Download - Building an HTML5 Video Player
![Page 1: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/1.jpg)
<video> <future answer=”maybe”> <darkside unknown=”1”> </video>
HTML 5
![Page 2: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/2.jpg)
@jimjeffers
DontTrustThisGuy.Comblog:
company:
SumoCreations.com
![Page 3: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/3.jpg)
The Flash Player<video> Support<video> FormatsWorkflow Wins!Example
![Page 4: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/4.jpg)
Understand the present stateof <video> and when, why, andhow you’d want to implement the technology.
GOAL OF THIS TALK:
![Page 5: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/5.jpg)
Flash Player* Closed Format* Powerful* Everyone Has It
![Page 6: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/6.jpg)
Market Penetration
89105
99%
98.9%
94.7%
31.1%
html5 video penetration:http://gs.statcounter.com/#browser_version-ww-monthly-200812-201001
flash penetration:http://www.adobe.com/products/player_census/flashplayer/
![Page 7: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/7.jpg)
HTML 5* Open/Closed Format* Powerful* Not Ubiquitious
![Page 8: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/8.jpg)
Works on...Firefox 3.5+Chrome 3.0+Safari 3.1+Opera 10.5+
![Page 9: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/9.jpg)
and on...iPhoneiPod TouchiPadAndroid OS
![Page 10: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/10.jpg)
<video>is only going to become moreubiquitious in the future andis already relevant for playingvideo on mobile devices.
![Page 11: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/11.jpg)
Format Wars
* h.264 (closed)* Ogg Vorbis (open)
![Page 12: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/12.jpg)
HTML5 Video Supports AnyMedia.It’s the browser that dictateswhich formats are played.
![Page 13: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/13.jpg)
DiveIntoHTML5for a detailed explanationon the formats that can beutilized in HTML5 and more...
http://diveintohtml5.org/video.html
![Page 14: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/14.jpg)
Workflow WinsHTML 5
![Page 15: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/15.jpg)
<video width="480" height="380" controls> <source src="trolololololololol.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="trolololololololol.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></video>
Basic Video Embeduse the browser’s native video controls
![Page 16: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/16.jpg)
<div id="player"> <video width="480" height="380" class="ecard"> <source src="trolololololololol.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="trolololololololol.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> </video> <nav class="player_controls"> <a href="#" class="play_button">Play<span></span></a> <a href="#" class="mute_button">Mute<span></span></a> <progress value="0" class="play_progress"> <span></span> </progress> <progress value="0" class="load_progress"> <span></span> </progress> </nav> </div>
Video With Player UI Expressedin HTML Markup
![Page 17: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/17.jpg)
/* =CONTROLS ------------------------------------------------------ */ .player_controls { bottom: -20px; height: 70px; left: 0; position: absolute; width: 480px; z-index: 10; }
/* =PLAY/MUTE BUTTONS ------------------------------------------------------ */ .player_controls a.play_button { bottom: 0; left: -38px; } .player_controls a.mute_button { bottom: 0; right: -38px; }
CSS to Style Player UI
![Page 18: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/18.jpg)
$(’video’).get(0).play();
Javascript to Control Video
this would tell th
e
first video elem
ent
on your page to
start playing.
![Page 19: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/19.jpg)
var _MEDIA = $(’#player video.ecard’).get(0);
$(’.play_button’).click(togglePlay);$(’.mute_button’).click(toggleMute);
function togglePlay(e) { if(_MEDIA.paused) { _MEDIA.play(); } else { _MEDIA.pause(); } return false;};function toggleMute(e) { if(_MEDIA.volume > 0) { _MEDIA.volume = 0; } else { _MEDIA.volume = 1; } return false;};
Javascript to Control Videoget the video element...
add some simple event listeners....
if paused play otherwise pause...
if it has volume mute otherwise turn on volume...
![Page 20: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/20.jpg)
var video = $(’video’).get(0);
video.play();video.pause();video.paused; // Returns true if video is paused.video.ended; // Returns true if video is over.
video.volume; // Returns volume value (between 0-1)video.volume=0.5; // Sets volume value (between 0-1)
video.currentTime; // Current point of time in the video.video.length; // Returns the length in seconds.
video.seekable; // Returns true if supports seeking.video.playbackRate; // Allows you to rewind/fastforward.
<video> methods & attributes
![Page 21: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/21.jpg)
To see all of the <video> methods & attributesbe sure to take a look at the whatwg working draft:http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html
or just use this link: http://bit.ly/2nkxD
![Page 22: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/22.jpg)
Your standardHTML/CSS/JSworkflow handleseverything.
![Page 23: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/23.jpg)
In Flash we do all of the legwork to build things that are trivial in the DOM.
![Page 24: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/24.jpg)
Time for anExample
![Page 25: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/25.jpg)
Video player that loads anddisplays cuepoints and messages from a datasource.
Skip to demo now if possible.http://sumocreations.com/demo/rattlebox/player.html
![Page 26: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/26.jpg)
Flash Implementation<html> js SWF
<xml>
css
AS3AS3AS3AS3
Viewer.as src.data Service src.events AssetEvent CoordinatorEvent CuepointEvent LayerEvent MessageQueueEvent PlayerControlEvent WarningEvent src.time Coordinator Cuepoint MessageQueue src.ui Layer LoadingBar Message Layer OffensiveWarning PlayerControls src.video Asset Client
! AS3 Stack has 20 custom classes.
40+ Dev Hours
! Still depends on HTML/JS/CSS
![Page 27: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/27.jpg)
HTML5 Implementation<html> js css
4 Dev Hours
![Page 28: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/28.jpg)
Cuepoint Data In Flash<?xml version="1.0" encoding="UTF-8"?><card offensive="false" version="2.0" id="1156"> <title>In Your Honor We'll Be Dancing</title> <library> <asset path="media/cards/1156/pickup.flv" duration="50.721" id="1156"/> </library> <timeline> <frame asset="1156"> <cuepoints> <cuepoint duration="3.5" fade="" time="0.3"> <layer type="fill"> <color>#000000</color> </layer> <layer type="message"> <content> <![CDATA[In your honor we'll be dancing...]]> </content> </layer> </cuepoint> <cuepoint duration="20.0" fade="" time="46.0"> <layer type="fill"> <color>#000000</color> </layer> <layer type="message"> <content> <![CDATA[Your personal message here.]]> </content> </layer> </cuepoint> </cuepoints> </frame> </timeline></card>
![Page 29: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/29.jpg)
Cuepoint Data in HTML5<ol class="cuepoints"> <li id="cuepoint_1" class="cuepoint" data-time="0.3" data-duration="3.5"> <p class="message">In your honor we'll be dancing...</p> </li> <li id="cuepoint_2" class="cuepoint" data-time="46.0" data-duration="20"> <p class="message">Your personal message here.</p> </li></ol>
![Page 30: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/30.jpg)
Certain things whichmay be complex in Flashare trivial to implementin HTML as the DOMcan do all of the ‘heavy lifting’ for you.
![Page 31: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/31.jpg)
Both technologies stillhave their purposes. It’simportant not to rallybehind technologies.
Use the right tool for the job be it HTML5 or Flash.
![Page 32: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/32.jpg)
Be sure to read:The Cold War of The Webhttp://www.alistapart.com/articles/flashstandards/
![Page 33: Building an HTML5 Video Player](https://reader033.vdocuments.mx/reader033/viewer/2022052321/55515126b4c905c6268b55c1/html5/thumbnails/33.jpg)
Do you guys haveany Questions?
the end