<video> <future answer=”maybe”> <darkside unknown=”1”> </video> HTML 5
May 12, 2015
<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