Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...
Got <video>? Implementing HTML5 Video for Library Tutorials
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>
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
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>
….