presented at ACRL 2013 conference

1. Got <VIDEO>?
Implementing HTML5 Video for Library
Tutorials
#html5video Beth Filar Williams, UNCG Libraries

2. Add video to a
webpage like
you add an
<IMG>
[CC BY-NC-ND-2.0] http://www.flickr.com/photos/68759973@N00/5994501076
#html5video
HTML5 <VIDEO>

3. built in video
playback
functionality
[CC BY-SA 2.] http://www.flickr.com/photos/97867688@N00/73299142/
#html5video
HTML5 <VIDEO>

4. plays across
browsers &
mobile devices
- w/o flash!
[CC BY-ND 2.0] http://www.flickr.com/photos/52137170@N00/56206868
#html5video
HTML5 <VIDEO>

5. 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
#html5video
HTML5 <VIDEO>

6. Toward
open
standard
WHERE ARE WE HEADED?
video
playback
[NC BY-NC-ND 2.0] http://www.flickr.com/photos/22196205@N03/2861690380
#html5video
HTML5 <VIDEO>

7. MPEG 4 WebM OGG
#html5video

8. Video type = video codecs + audio codecs
<video> H.264
<source src=“tutorial.mp4” type=‘video/mp4;
codecs=“avc1.42E01E, mp4a.40.2”/>
VP8
<source src=“tutorial.webm” type=‘video/webm; codecs=“vp8, vorbis”/>
<source src=“tutorial.ogv” type=‘video/ogg; codecs=“theora, vorbis”/>
Theora
Video tag not supported. Download the video <a href=“tutorial.webm”>here</a>
</video>
#html5video

9. Video type = video codecs + audio codecs
<video>
AAC
<source src=“tutorial.mp4” type=‘video/mp4;
codecs=“avc1.42E01E, mp4a.40.2”/>
Vorbis
<source src=“tutorial.webm” type=‘video/webm; codecs=“vp8, vorbis”/>
<source src=“tutorial.ogv” type=‘video/ogg; codecs=“theora, vorbis”/>
Vorbis
Video tag not supported. Download the video <a href=“tutorial.webm”>here</a>
</video>
#html5video

10. #html5video
HTML5 <VIDEO>

11. http://www.mirovideoconverter.com/
#html5video
HTML5 <VIDEO>

12. <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>

13. <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"'>
….

14. ….
<object type="application/x-shockwave-flash"
data="http://library.uncg.edu/mp/FLVPlayer_Progressive.sw
f" 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/tutori
als/v/ASC&autoPlay=false&autoRewind=true" />
….

15. ….
</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>
….

16. …
<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>

21. HTML5 <VIDEO>
…QUESTIONS?
Key Resources:
http://diveintohtml5.info/video.html
http://www.html5rocks.com/en/tutorials/video/basics/
https://ie.microsoft.com/testdrive/Graphics/CaptionMaker
Beth Filar Williams
efwilli3@uncg.edu