Month: September 2015

Categories
Uncategorized

The HTML

To show a video in HTML, use the <video> element (will not autoplay):

 

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

 

The controls attribute adds video controls, like play, pause, and volume.

IInclude width and height attributes.

Text between the <video> and </video> tags will only display in browsers that do not support the <video> element.

Multiple <source> elements can link to different video files. The browser will use the first recognized format.

 

Categories
Uncategorized

HTML5 Video Code

Working with HTML5 video in Dreamweaver

Encode video to MP4, Ogg, and WebM format.

Follow these steps to create a new HTML file in Dreamweaver and add video and source tags:

Open Dreamweaver and an HTML file.

Switch to Code view or Split view.

Add the following code inside the <body></body> tags:

<video autoplay="autoplay" controls="controls" preload="auto"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogv" type="video/ogg"> <source src="movie.webm" type="video/webm"> </video>

Notice that the video tag specifies three parameters that preload the video when the page loads, auto-play the video when ready, and show the browser’s native controls. Nested between the open and close video tags are three source tags. The source tags define the MP4 video source, the Ogg video source, and the WebM video source. The browser chooses the source it can support. Note that the MIME type must be included for full support across browsers, and the MP4 type should come first to support iPad.

Save the file next to your videos or in the location of your choice.

Update the src attribute in the source tags with the path to your videos.

For poster:

<video controls poster=”demo.jpg”>
<source src=”demo.mp4″ type=”video/mp4″ />
<source src=”demo.webm” type=”video/webm”/>
<source src=”demo.ogv” type=”video/ogg”/>
<p>Fallback code if video isn’t supported</p>/
</video>