Taking advantage of HTML 5 Video
This is the source from Video 1 Inserting video the right way
Reference: "Video For Everybody" v0.4.2 by Kroc Camen of Camen Design.
You'll note that this design does not need any script loading in the (header of the) html document
<---- Snip
<!-- first we try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iPad/iPhone if you include the poster attribute! But it's fixed in iOS4.0 -->
<video width="320" height="240" controls>
<!-- MP4 must be first for iPad's to play the video! WebKit Browsers video codecs are listed first -->
<source src="../videoreels/Sequence2.mp4" type="video/mp4" />
<source src="../videoreels/Sequence2.3gp" type="video/3gp" />
<!-- Next we list Non web kit browsers: like Firefox. You can convert to webm or Video ogg videos formats using a web site called Firefogg You need to use Firefox as your browser to make this on-line service work as it is a plug-in for Firefox http://firefogg.org/make/index.html# -->
<source src="../videoreels/Sequence2.ogg" type="video/ogg" />
<source src="../videoreels/Sequence2.webm" type="video/webm" />
<!-- This is the generic Firefox / Opera format used in the statements above
<source src="__VIDEO__.MP4" type="video/mp4" />
<source src="__VIDEO__.OGV" type="video/ogg" /> -->
<!-- If all else fails (all the above video players don't work) the fallback to use a Flash player -->
<!-- Here we're using a java based flash player JW Player http://www.longtailvideo.com/
you'll need to go to the longtailvideo site and download and install the jwplayer -->
<object width="320" height="240" type="application/x-shockwave-flash" data="../jwplayer/player.swf">
<!-- Firefox Flash uses the `data` attribute listed above, IE/Safari uses the 'param' listed below-->
<param name="movie" value="../jwplayer/player.swf" />
<param name="flashvars" value="controlbar=over&image=../videoreels/Sequence2.jpg&file=../videoreels/Sequence2.mp4" />
<!-- Add a fallback image. note the title field below, put the title of the video there -->
<img src="../Videoreels/Sequence2.jpg" width="320" height="240" alt="Shel visits ECC" title="Sequence2.mp4, No video playback capabilities, please download the video below" />
</object>
</video><br />
<!-- you *must* offer your client a download link as they may be able to play the file locally. You can customize this bit all you want -->
<p><strong>If you can't play the video on-line <br />You may Down Load it! :</strong><br />
Closed Video Format for non-profit use only:<a href="../videoreels/Sequence2.mp4">"MP4"</a><br />
Open Video Format anyone can use it:<a href="../videoreels/Sequence2.ogg">"Ogg"</a>
</p>
---->snip
That's all you need in terms of "Markup"
Most of the work will involve converting your existing video to all of the above codecs
Video 2 Adobe's HTML 5 Video Widget
If you don't have Adobe's Widget Browser Installed, do get it. You don't need Dreamweaver CS5 to run the Widget browser or use the generated code! All you need to install is the latest version of Adobe Air and the Widget Browser
This is just a snap shot of the code generated by the HTML5 Video Widget
When you save the widget files to a folder, all the necssary files and scipts are generated and saved...
Files Generated by HTML5 Widget
In Dreamweaver CS5 it's way easier to just put your cursor where you want the video and insert it via the Insert panel: > Common > Widget
Change the path to the videos and you are done.
3 Inserting Flash Media in Dreamweaver
You want to use one the above methods if you want all browsers and all smart devices to be able to play the video.
Enjoy and have Fun!
No comments:
Post a Comment