Building an HTML5 Video Player

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

@jimjeffers
blog:
DontTrustThisGuy.Com
company:
SumoCreations.com

The Flash Player
<video> Support
<video> Formats
Workflow Wins!
Example

GOAL OF THIS TALK:
Understand the present state
of <video> and when, why, and
how you’d want to implement
the technology.

Flash Player
* Closed Format
* Powerful
* Everyone Has It

Market Penetration
8 99%
9 98.9%
10 94.7%
5 31.1%
flash penetration:
http://www.adobe.com/products/player_census/flashplayer/

html5 video penetration:
http://gs.statcounter.com/#browser_version-ww-monthly-200812-201001

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

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

and on...
iPhone
iPod Touch
iPad
Android OS

<video>
is only going to become more
ubiquitious in the future and
is already relevant for playing
video on mobile devices.

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

HTML5 Video
Supports Any
Media.
It’s the browser that dictates
which formats are played.

DiveIntoHTML5
for a detailed explanation
on the formats that can be
utilized in HTML5 and more...
http://diveintohtml5.org/video.html

Basic Video Embed
use the browser’s
native video controls

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

Video With Player UI Expressed
in HTML Markup
<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>

CSS to Style Player UI
/* =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;
}

Javascript to Control Video

$(’video’).get(0).play();
e ll the
o uld t t
t his w e lemen
v ideo
first o
p age t
on your .
p laying
st art

Javascript to Control Video
var _MEDIA = $(’#player video.ecard’).get(0); get the
video element...
$(’.play_button’).click(togglePlay);
$(’.mute_button’).click(toggleMute);

function togglePlay(e) {
if(_MEDIA.paused) { add some simple
_MEDIA.play(); event listeners....
} else { if paused play
_MEDIA.pause(); otherwise pause...
}
return false;
};
function toggleMute(e) {
if(_MEDIA.volume > 0) {
_MEDIA.volume = 0;
} else {
_MEDIA.volume = 1; if it has volume mute
} otherwise turn on volume...
return false;
};

<video> methods & attributes
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.

To see all of the <video>
methods & attributes
be 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 standard
HTML/CSS/JS
workflow handles
everything.

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

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

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

Flash Implementation
Viewer.as
src.data
<html> js css SWF AS3 Service
AS3 src.events
AS3
AS3 AssetEvent
CoordinatorEvent
CuepointEvent
LayerEvent
<xml> MessageQueueEvent
PlayerControlEvent
WarningEvent
src.time
Coordinator
Cuepoint
MessageQueue
! AS3 Stack has 20 custom classes. src.ui
Layer
LoadingBar
! Still depends on HTML/JS/CSS Message
Layer
OffensiveWarning

40+ Dev Hours PlayerControls
src.video
Asset
Client

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 which
may be complex in Flash
are trivial to implement
in HTML as the DOM
can do all of the
‘heavy lifting’ for you.

Both technologies still
have their purposes. It’s
important not to rally
behind technologies.
Use the right tool for the job
be it HTML5 or Flash.

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

Do you guys have
any Questions?

the end

Building an HTML5 Video Player

More Related Content

What's hot (13)

Viewers also liked (12)

Similar to Building an HTML5 Video Player (20)

Recently uploaded (20)

Building an HTML5 Video Player