Capt. Horatio T.P. Webb
HTML 5 -- EXAMPLE Video

Parks -- Fall 2013

<video controls>

   <source src="filename" type="video/mp4">

   text to display if video is NOT available

</video>

VIDEO TAG PROPERTIES

The source tag requires two attributes:

      src="video file name"

and

      type="video/file type"

Video file types supported are:

         video/mp4 (NOTE: this is H.264)
         video/ogv
         video/webm

Other properties:

  1. width="pixels" sets video screen width
  2. height="pixels" set video screen height
  3. muted -- if present the video is muted at load time
  4. autoplay -- if present the video is muted at load time
  5. controls --if present the play, pause and volume controls are shown
  6. loop -- repeats the video indefinitely
  7. poster -- image to show before the video starts
  8. preload -- video is loaded when the page is loaded -- overidden by autoplay. Values:
    1. "none" -- do NOT preload the video
    2. "metadata" -- fetches dimenions, first frame, duration etc.
    3. "auto" -- start downloading the entire video
    Specifying the empty string is equivalent to specifying the value "auto".
Javacsript Interactions With The Video:
  • First get the video object by either:

    var vidObj = document.getElementsByTagName('video')[0]; [assumes that it is the first video, i.e., zsero)
    OR
    var vidObj=documentgetElementById ("the id value inside the video tag");

    [vidObj is just an example name for the video object -- it can be ANY name yopu want]

  • to mute or unmute:

    vidObj.muted = true; [to mute]
    vidObj.muted = false; [to unmute]

  • to get video width:

    width_value=vidObj.videoWidth;

  • to get video height:

    height_value=vidObj.videoHeight;

  • get/set loop

    vidObj.loop=true;
    OR
    vidObj.loop=false;

  • get/set autoplay

    vidObj.autoplay=true;
    OR
    vidObj.autoplay=false;

  • get/set volume

    vidObj.volume=integer; [0 < integer <= 1.0]
    OR
    volume_value=vidObj.volume;

  • video duration

    video_duration=vidObj.duration; [floating point in seconds];

  • video currentTime

    video_current_time_value = vidObj.currentTime; [floating point in seconds];

  • playback rate

    playbackrate_value = vidObj.playbackRate; [floating point, 1.0 is the default rate as recorded]

Here is a video (mp4) played with the video tag:

<video id="v" loop controls>
   <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
      not supported
</video>

Simple Javascript Controls
  
  

Volume:
Duration (Time):
Current Time:
Progress Bar

Volume 

BROWSER
[on WinTel 11/10/2013]		*.mp4*.ogv*.webm
Firefox 25YesYesYes
Chrome 30YesYesYes
IE 9.0.8YesNoYes
Opera 12.16NoYesYes
Safari 5.1.7YesNoNo

Here are the three standard video files that are supported in HTML 5:

See Video for Everybody (and the their test page) for a discussion of video without javascript that utilizes HTML 5 video with flash as the final fallback position. Videos on this page are used on this site.

Here is the javascript code to show standard values: 

crlf=String.fromCharCode(10,13);
var vidObj=document.getElementById("v");
os=" width="+vidObj.videoWidth+crlf;
os=os+" height="+vidObj.videoHeight+crlf;
os=os+" poster="+vidObj.videoPoster+crlf;
os=os+" loop="+vidObj.loop+crlf;
os=os+" autoplay="+vidObj.autoplay+crlf;
os=os+" controls="+vidObj.controls+crlf;
os=os+" muted="+vidObj.muted+crlf;
os=os+" volume="+vidObj.volume+crlf;
os=os+" currentTime="+vidObj.currentTime+crlf;
os=os+" duration="+vidObj.duration+crlf;
os=os+" playbackRate="+vidObj.playbackRate+crlf;
alert (os);