Capt. Horatio T.P. Webb |
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)
Other properties:
|
Javacsript Interactions With The Video:
|
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>
BROWSER [on WinTel 11/10/2013] | *.mp4 | *.ogv | *.webm |
Firefox 25 | Yes | Yes | Yes |
Chrome 30 | Yes | Yes | Yes |
IE 9.0.8 | Yes | No | Yes |
Opera 12.16 | No | Yes | Yes |
Safari 5.1.7 | Yes | No | No |
Here are the three standard video files that are supported in HTML 5:
<video id="v1" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" preload=”none” loop controls>not supported</video>
<video id="v2" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"
poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" loop controls>not supported</video>
<video id="v3" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm"
poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" loop controls>not supported</video>
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);