MovieNow users would love to have a way to visualize trailers of their favorite movies. For that, we are going to create a player with basic functionality: play, pause, seek, volume control, and full screen.
We are going to use as an example a trailer of Sintel, an animated movie created with a free 3D animation tool known as Blender. This video trailer is hosted on the http://www.w3.org/ site in three major video formats: MP4 (mp4), WebM (webm), and Ogg Theora (ogv).
First, let's create a file called trailer.html
and use our main page structure.
Inside the article
tag, we use the video
tag, which allows us to specify an initial image using the poster
attribute to specify image path, and to show default controls using the controls
attribute.
<video poster="img/trailer-poster.png" controls>
You can specify the src
property directly for the video
tag, but to support multiple video format files we are going to declare our files using the source
tag inside video
...