Got <VIDEO>?       Implementing HTML5 Video for Library       Tutorials#html5video                            Beth Filar W...
Add video to a                                                                         webpage like                       ...
built in video                                                                    playback                                ...
plays across                                                                    browsers &                                ...
Must have                                                                     control of web                              ...
Toward                                                                         open                                       ...
MPEG 4   WebM   OGG#html5video
Video type = video codecs + audio codecs<video>                                                        H.264<source src=“t...
Video type = video codecs + audio codecs<video>           AAC<source src=“tutorial.mp4” type=‘video/mp4;codecs=“avc1.42E01...
#html5video              HTML5 <VIDEO>
http://www.mirovideoconverter.com/#html5video                       HTML5 <VIDEO>
<video controls width="500"> <source src="http://library.uncg.edu/research/tutorials/v/ASC.mp4" type=video/mp4;codecs="avc...
<video controls width="500"> <source src=“http://library.uncg.edu/research/tutorials/v/ASC.mp4"type=video/mp4; codecs="avc...
….   <object type="application/x-shockwave-flash"data="http://library.uncg.edu/mp/FLVPlayer_Progressive.swf" width="500" h...
….</p>Your browser does not support internet video. You maydownload the video below:<p>    <ul>      <li><ahref="http://li...
… <track kind="captions"src="http://library.uncg.edu/research/tutorials/v/transcripts/ASC.vtt" label="English captions" sr...
HTML5 <VIDEO>                …QUESTIONS?Key Resources:http://diveintohtml5.info/video.htmlhttp://www.html5rocks.com/en/tut...
Got &lt;video>?  Implementing HTML5 Video for Library Tutorials
Got &lt;video>?  Implementing HTML5 Video for Library Tutorials
Got &lt;video>?  Implementing HTML5 Video for Library Tutorials
Got &lt;video>?  Implementing HTML5 Video for Library Tutorials
Upcoming SlideShare
Loading in...5
×

Got &lt;video>? Implementing HTML5 Video for Library Tutorials

231

Published on

presented at ACRL 2013 conference

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
231
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Got &lt;video>? Implementing HTML5 Video for Library Tutorials

  1. 1. Got <VIDEO>? Implementing HTML5 Video for Library Tutorials#html5video Beth Filar Williams, UNCG Libraries
  2. 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. 3. built in video playback functionality[CC BY-SA 2.] http://www.flickr.com/photos/97867688@N00/73299142/#html5video HTML5 <VIDEO>
  4. 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. 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. 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. 7. MPEG 4 WebM OGG#html5video
  8. 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”/> TheoraVideo tag not supported. Download the video <a href=“tutorial.webm”>here</a></video> #html5video
  9. 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”/> VorbisVideo tag not supported. Download the video <a href=“tutorial.webm”>here</a></video> #html5video
  10. 10. #html5video HTML5 <VIDEO>
  11. 11. http://www.mirovideoconverter.com/#html5video HTML5 <VIDEO>
  12. 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. 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. 14. …. <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" />….
  15. 15. ….</p>Your browser does not support internet video. You maydownload the video below:<p> <ul> <li><ahref="http://library.uncg.edu/research/tutorials/v/ASC.mp4">MP4</a></li> <li><ahref="http://library.uncg.edu/research/tutorials/v/ASC.webm">WebM</a></li> <li><ahref="http://library.uncg.edu/research/tutorials/v/ASC.ogv">OGV</a></li> </ul> </object>….
  16. 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>
  17. 17. 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 Williams efwilli3@uncg.edu
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×