Training

• Home
• Training Classes

"Winners make choices,
losers make excuses."
Decide to be a Winner!!!!

± Getting Started

± Phase 1
Planning

± Website Tools

± Phase 3
Conceptual Design

± Helpful Information

± Phase 4
Physical Design

± Phase 5
Testing

± Phase 6
Implement and Market Website

± Other Web Development Items

± Multimedia

± Useful Utilities

± Programming

± Advanced Programming

± Microsoft Office Products

± Computer Maintenance

± Other

---

NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.

Video - HTML5

HTML5 introduces a standard way to include video on web pages with the video element. Before HTML5 most videos was shown through a plugin but the not all browsers support the same plugins.

Check if your browser supports HTML5 video

Video Formats

The video must be in the approved formats. Notice that each browser recognizes a different format.

Video Format	IE	Firefox	Opera	Chrome	Safari
0gg Theora video codec and Vorbis audio codec	No	3.5+	10.5+	5.0+	No
mp4 MPEG 4 files with H.264 video and AAC audio codec	9.0+	No	No	5.0+	3.0+
WebM VP8 video codec and Vorbis audio codec	No	4.0+	10.6+	6.0+	No

Video Converters

Video must be converted to the correct format before using the video element.

• MP4 to OGG
• MiroVideo Converter - free open-source way to convert almost any video to MP4, WebM (vp8), Ogg Theora, or for Android, iPhone, and more..
• FoxTab MP3 Converter - download program and conver to ogg

---

Code

To make the video work in Internet Explorer, Safari and future versions of Chrome, we must add a MPEG4 and WebM file.

The video element allows multiple source elements which can link to different video files formats recognized by different browsers. The browser will use the first recognized format:

<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

Video Attributes

Attribute	Value	Description
audio	muted	Defining the default state of the the audio. Currently, only "muted" is allowed
autoplay	autoplay	If present, then the video will start playing as soon as it is ready
controls	controls	If present, controls will be displayed - play, pause, and volume control buttons
height	pixels	Sets the height of the video player
loop	loop	If present, the video will start over again, every time it is finished
poster	url	Specifies the URL of an image representing the video
preload	preload	If present, the video will be loaded at page load, and ready to run. Ignored if "autoplay" is present
src	url	The URL of the video to play
width	pixels	Sets the width of the video player

HTML5 Video Element Code

<video width="620" controls="controls"> <!-- MP4 must be first for iPad! --> <source src="/Multimedia/video/flowers.mp4" type="video/mp4" /><!-- Safari / iOS video --> <source src="/Multimedia/video/flowers.ogg" type="video/ogg" /><!-- Firefox / Opera / Chrome10 --> <span class="note">Your browser does not support the video tag.</span> <!-- fallback to Flash: --> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below --> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" /> <!-- fallback image. note the title field below, put the title of the video there --> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object> </video>

HTML5 Video Element Example

Download Video: "MP4" "Ogg"

top of page

Page last updated: May 31, 2012 10:41 AM