Slide 7.9: HTML5 videos

HTML5 Videos

Playing videos in HTML is not easy! You must add many tricks to make sure your video will play in all browsers (IE, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac, iPad, iPhone). Videos can be embedded in HTML pages with the following several methods:

The <embed> tag defines a container for external (non-HTML) content. A Flash video embedded in a web page is given next:
```
<embed src="intro.swf" height="90" width="90">
```
The <object> tag tag can also define a container for external content. A Flash video embedded in a web page is given next:
```
<object data="intro.swf" height="90" width="90"></object>
```

The HTML5 <video> tag defines a video or movie. The following example uses the HTML5 <video> tag, which specifies one MP4 file, and one OGG file. If something fails, it will display a text:

  <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 best solution is to use the HTML5 <video> element + the <embed> element. The example below uses the <video> element and tries to play the video either as MP4 or OGG. If that fails, the code “falls back” to try the <embed> element:

  <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    <object data="movie.mp4" width="320" height="240">
      <embed src="movie.swf" width="320" height="240">
    </object>
  </video>

Demonstration
The following demonstration shows how the HTML5 script is displayed on the Web.


<!DOCTYPE html> <html> <head><title>HTML Working Area</title></head> <body> <div style="text-align:center"> <button onclick="playPause( )">Play/Pause</button> <button onclick="makeBig( )">Big</button> <button onclick="makeSmall( )">Small</button> <button onclick="makeNormal( )">Normal</button> <br /><br /> <video id="video1" width="420"> <source src="https://undcemcs01.und.edu/~wen.chen.hu/course/101/7/video/movie.mp4" type="video/mp4"> <source src="https://undcemcs01.und.edu/~wen.chen.hu/course/101/7/video/movie.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> </div> <script type="text/javascript"> var myVideo = document.getElementById( "video1" ); function playPause( ) { if ( myVideo.paused ) myVideo.play( ); else myVideo.pause( ); } function makeBig( ) { myVideo.width = 560; } function makeSmall( ) { myVideo.width = 320; } function makeNormal( ) { myVideo.width = 420; } </script> </body> </html>

Review: HTML5 Video

embed

flash

object

video

Result: