• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Got <video>?  Implementing HTML5 Video for Library Tutorials
 

Got <video>? Implementing HTML5 Video for Library Tutorials

on

  • 370 views

presented at ACRL 2013 conference

presented at ACRL 2013 conference

Statistics

Views

Total Views
370
Views on SlideShare
370
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Got <video>?  Implementing HTML5 Video for Library Tutorials Got <video>? Implementing HTML5 Video for Library Tutorials Presentation Transcript

    • Got <VIDEO>? Implementing HTML5 Video for Library Tutorials#html5video Beth Filar Williams, UNCG Libraries
    • 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>
    • built in video playback functionality[CC BY-SA 2.] http://www.flickr.com/photos/97867688@N00/73299142/#html5video HTML5 <VIDEO>
    • plays across browsers & mobile devices - w/o flash![CC BY-ND 2.0] http://www.flickr.com/photos/52137170@N00/56206868#html5video HTML5 <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#html5video HTML5 <VIDEO>
    • 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>
    • MPEG 4 WebM OGG#html5video
    • 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
    • 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
    • #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="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 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>….
    • … <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 Williams efwilli3@uncg.edu