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>

 

Leave a Reply

Your email address will not be published. Required fields are marked *