Not seeing a Scroll to Top Button? Go to our FAQ page for more info. HTML5 Videos Page

                                HTML 5 Videos


In H264:

<video id="sampleMovie" width="640" height="360" preload controls>
	<source src="HTML5Sample_H264.mov" />
</video>






In OGG:

<video id="sampleMovie" width="640" height="360" preload controls>
	<source src="HTML5Sample_Ogg.ogv" />
</video>


In WebM:


<video id="sampleMovie" width="640" height="360" preload controls>
	<source src="HTML5Sample_WebM.webm" />
</video>

All 3 Videos (Preffered by Browser)


<video id="sampleMovie" width="640" height="360" preload controls>
	<source src="HTML5Sample_H264.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
	<source src="HTML5Sample_Ogg.ogv" type='video/ogg; codecs="theora, vorbis"' />
	<source src="HTML5Sample_WebM.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>



In FLV:

<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="none" width="auto" height="auto"
poster="path/to/image.png"
data-setup='{"example_option":true, "autoplay": true}'>
    <source src="path/to/video.ogv" type='video/ogg' />
    <source src="path/to/video.webm" type='video/webm' />
    <source src="path/to/video.mp4" type='video/mp4' />
    <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
    <object class="vjs-flash-fallback" width="640" height="360" type="application/x-shockwave-flash" data="http://teachers.dadeschools.net/jrios/students/p03s17/multimedia/videos/HTML5Sample_H264.flv">
        <param name="movie" value="http://teachers.dadeschools.net/jrios/students/p03s17/multimedia/videos/HTML5Sample_H264.flv" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value='config={"playlist":["path/to/image.png", {"url": "path/to/video.flv","autoPlay":false,"autoBuffering":true}]}' />
        <!-- Image Fallback. Typically the same as the poster image. -->
        <img src="path/to/image.png" width="640" height="264" alt="Poster Image" title="No video playback capabilities." />
    </object>
</video>