Got <video>? Implementing HTML5 Video for Library Tutorials
Download as PPTX, PDF1 like637 views
The document discusses implementing HTML5 video on webpages. It provides information on how to add video with the <video> tag, which allows built-in video playback across browsers without requiring Flash. It demonstrates how to specify video formats and codecs for browser compatibility and includes captions. Resources for converting video and adding captions are also referenced.
![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>](https://image.slidesharecdn.com/gotvideofinal-130414062923-phpapp01/85/Got-lt-video-Implementing-HTML5-Video-for-Library-Tutorials-2-320.jpg)
![built in video
playback
functionality
[CC BY-SA 2.] http://www.flickr.com/photos/97867688@N00/73299142/
#html5video
HTML5 <VIDEO>](https://image.slidesharecdn.com/gotvideofinal-130414062923-phpapp01/85/Got-lt-video-Implementing-HTML5-Video-for-Library-Tutorials-3-320.jpg)
![plays across
browsers &
mobile devices
- w/o flash!
[CC BY-ND 2.0] http://www.flickr.com/photos/52137170@N00/56206868
#html5video
HTML5 <VIDEO>](https://image.slidesharecdn.com/gotvideofinal-130414062923-phpapp01/85/Got-lt-video-Implementing-HTML5-Video-for-Library-Tutorials-4-320.jpg)
![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>](https://image.slidesharecdn.com/gotvideofinal-130414062923-phpapp01/85/Got-lt-video-Implementing-HTML5-Video-for-Library-Tutorials-5-320.jpg)
![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>](https://image.slidesharecdn.com/gotvideofinal-130414062923-phpapp01/85/Got-lt-video-Implementing-HTML5-Video-for-Library-Tutorials-6-320.jpg)
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>
- 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