got ? implementing html5 video for library tutorials
DESCRIPTION
presented at ACRL 2013 conferenceTRANSCRIPT
Got <VIDEO>? Implementing HTML5 Video for Library Tutorials
Beth Filar Williams, UNCG Libraries #html5video
#html5videoHTML5 <VIDEO>
Add video to a webpage like you add an <IMG>
[CC BY-NC-ND-2.0] http://www.flickr.com/photos/68759973@N00/5994501076
#html5videoHTML5 <VIDEO>
built in video playback functionality
[CC BY-SA 2.] http://www.flickr.com/photos/97867688@N00/73299142/
#html5videoHTML5 <VIDEO>
plays across browsers & mobile devices - w/o flash!
[CC BY-ND 2.0] http://www.flickr.com/photos/52137170@N00/56206868
#html5videoHTML5 <VIDEO>
Must have control of web server settings - content type header in MIME
[CC BY-SA 2.0] http://www.flickr.com/photos/66742614@N00/290711738
#html5videoHTML5 <VIDEO>
Toward open standard video playback
[NC BY-NC-ND 2.0] http://www.flickr.com/photos/22196205@N03/2861690380
WHERE ARE WE HEADED?
#html5video
MPEG 4 WebM OGG
#html5video
Video type = video codecs + audio codecs
<video>
<source src=“tutorial.mp4” type=‘video/mp4; codecs=“avc1.42E01E, mp4a.40.2”/>
<source src=“tutorial.webm” type=‘video/webm; codecs=“vp8, vorbis”/>
<source src=“tutorial.ogv” type=‘video/ogg; codecs=“theora, vorbis”/>
Video tag not supported. Download the video <a href=“tutorial.webm”>here</a>
</video>
H.264
VP8
Theora
#html5video
Video type = video codecs + audio codecs
<video>
<source src=“tutorial.mp4” type=‘video/mp4; codecs=“avc1.42E01E, mp4a.40.2”/>
<source src=“tutorial.webm” type=‘video/webm; codecs=“vp8, vorbis”/>
<source src=“tutorial.ogv” type=‘video/ogg; codecs=“theora, vorbis”/>
Video tag not supported. Download the video <a href=“tutorial.webm”>here</a>
</video>
AAC
Vorbis
Vorbis
#html5videoHTML5 <VIDEO>
#html5videoHTML5 <VIDEO>
http://www.mirovideoconverter.com/
<video controls width="500"> <source src="http://library.uncg.edu/research/tutorials/v/ASC.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="http://library.uncg.edu/research/tutorials/v/ASC.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="http://library.uncg.edu/research/tutorials/v/ASC.ogv" type='video/ogg; codecs="theora, vorbis"'> <object type="application/x-shockwave-flash" data="http://library.uncg.edu/mp/FLVPlayer_Progressive.swf" width="500" height="360"> <param name="movie" value="http://library.uncg.edu/mp/FLVPlayer_Progressive.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="scale" value="noscale" /> <param name="salign" value="lt" /> <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=/cn/Corona_Skin_3&streamName=http://library.uncg.edu/research/tutorials/v/ASC&autoPlay=false&autoRewind=true" /> <p>Your browser does not support internet video. You may download the video below:</p> <ul> <li><a href="http://library.uncg.edu/research/tutorials/v/ASC.mp4">MP4</a></li> <li><a href="http://library.uncg.edu/research/tutorials/v/ASC.webm">WebM</a></li> <li><a href="http://library.uncg.edu/research/tutorials/v/ASC.ogv">OGV</a></li> </ul> </object> <track kind="captions" src="http://library.uncg.edu/research/tutorials/v/transcripts/ASC.vtt" label="English captions" srclang="en-us" default></video><P><a href="http://library.uncg.edu/research/tutorials/v/transcripts/ASC.pdf">Transcript</a></p>
<video controls width="500"> <source src=“ http://library.uncg.edu/research/tutorials/v/ASC.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src=“ http://library.uncg.edu/research/tutorials/v/ASC.webm" type='video/webm; codecs="vp8, vorbis"'> <source src=“ http://library.uncg.edu/research/tutorials/v/ASC.ogv" type='video/ogg; codecs="theora, vorbis"'> ….
….
<object type="application/x-shockwave-flash" data="http://library.uncg.edu/mp/FLVPlayer_Progressive.swf" width="500" height="360"> <param name="movie" value="http://library.uncg.edu/mp/FLVPlayer_Progressive.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="scale" value="noscale" /> <param name="salign" value="lt" /> <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=/cn/Corona_Skin_3&streamName=http://library.uncg.edu/research/tutorials/v/ASC&autoPlay=false&autoRewind=true" />….
….
</p>Your browser does not support internet video. You may download the video below:<p> <ul> <li><a href="http://library.uncg.edu/research/tutorials/v/ASC.mp4">MP4</a></li> <li><a href="http://library.uncg.edu/research/tutorials/v/ASC.webm">WebM</a></li> <li><a href="http://library.uncg.edu/research/tutorials/v/ASC.ogv">OGV</a></li> </ul> </object> ….
… <track kind="captions" src="http://library.uncg.edu/research/tutorials/v/transcripts/ASC.vtt" label="English captions" srclang="en-us" default></video><P><a href=“http://library.uncg.edu/research/tutorials/v/transcripts/ASC.pdf">Transcript</a></p>
HTML5 <VIDEO> …QUESTIONS?
Key Resources:http://diveintohtml5.info/video.htmlhttp://www.html5rocks.com/en/tutorials/video/basics/https://ie.microsoft.com/testdrive/Graphics/CaptionMaker
Beth Filar [email protected]