Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Introducing the HTML5 Video Element

DZone's Guide to

Introducing the HTML5 Video Element

· Web Dev Zone ·
Free Resource

Learn how Crafter’s Git-based content management system is reinventing modern digital experiences. Download this white paper now. 

Forget using the <iframe> element for sharing videos to your friends. There is an easier way to do this. Now, with HTML5 you can use the <video> element:

 <!DOCTYPE html>
<html>
<body>
<video width="448" height="336" controls="controls" poster="poster.jpg">
  <source src="Nole vs. Rafa.mp4" type="video/mp4" />
  <source src="Nole vs. Rafa.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>
</body>
</html>
And the output will be:

 
The <video> tag is supported in Internet Explorer 9 (earlier versions does not support the <video> element), Firefox, Opera, Chrome and Safari.

poster="poster.jpg" – specifies an image to be shown while the video is downloading, or until the user hits the play button

For more informations, please visit http://www.w3.org/TR/html5/the-video-element.html#the-video-element .

Crafter CMS is a modern Git-based platform for building innovative websites and content-rich digital experiences. Download this white paper now.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}