Building an HTML5 Video Player

<video> <future answer=”maybe”> <darkside unknown=”1”> </video>

HTML 5

@jimjeffers

DontTrustThisGuy.Comblog:

company:

SumoCreations.com

The Flash Player<video> Support<video> FormatsWorkflow Wins!Example

Understand the present stateof <video> and when, why, andhow you’d want to implement the technology.

GOAL OF THIS TALK:

Flash Player* Closed Format* Powerful* Everyone Has It

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/

HTML 5* Open/Closed Format* Powerful* Not Ubiquitious

Works on...Firefox 3.5+Chrome 3.0+Safari 3.1+Opera 10.5+

and on...iPhoneiPod TouchiPadAndroid OS

<video>is only going to become moreubiquitious in the future andis already relevant for playingvideo on mobile devices.

Format Wars

* h.264 (closed)* Ogg Vorbis (open)

HTML5 Video Supports AnyMedia.It’s the browser that dictateswhich formats are played.

DiveIntoHTML5for a detailed explanationon the formats that can beutilized in HTML5 and more...

http://diveintohtml5.org/video.html

Workflow WinsHTML 5

<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

<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

/* =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

$(’video’).get(0).play();

Javascript to Control Video

this would tell th

e

first video elem

ent

on your page to

start playing.

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...

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

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

Your standardHTML/CSS/JSworkflow handleseverything.

In Flash we do all of the legwork to build things that are trivial in the DOM.

Time for anExample

Video player that loads anddisplays cuepoints and messages from a datasource.

Skip to demo now if possible.http://sumocreations.com/demo/rattlebox/player.html

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

HTML5 Implementation<html> js css

4 Dev Hours

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>

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>

Certain things whichmay be complex in Flashare trivial to implementin HTML as the DOMcan do all of the ‘heavy lifting’ for you.

Both technologies stillhave their purposes. It’simportant not to rallybehind technologies.

Use the right tool for the job be it HTML5 or Flash.

Be sure to read:The Cold War of The Webhttp://www.alistapart.com/articles/flashstandards/

Do you guys haveany Questions?

the end