SlideShare a Scribd company logo
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
HTML 5
Workflow Wins
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.
Time for an
Example
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

More Related Content

What's hot (13)

PDF
Management in Informatica Power Center
Edureka!
 
PDF
corso web - Introduzione ai Database
Riccardo Piccioni
 
PPTX
Amazon EC2
OSoft Labs
 
PDF
Modern Java web applications with Spring Boot and Thymeleaf
LAY Leangsros
 
PPTX
SSIS control flow
Slava Kokaev
 
PDF
Migrating database content from sql server to sap hana
venu212
 
PPT
Efficient Database Design for Banking System
S.M. Murad Hasan Tanvir
 
PPT
Xhtml
Manav Prasad
 
PPTX
Html and css presentation
umesh patil
 
PPT
Advanced normalization - Bcnf
litpuvn
 
PDF
Basic Details of HTML and CSS.pdf
Kalyani Government Engineering College
 
PDF
UDA-Guia de desarrollo
Ander Martinez
 
PDF
Introduction to CSS3
Doris Chen
 
Management in Informatica Power Center
Edureka!
 
corso web - Introduzione ai Database
Riccardo Piccioni
 
Amazon EC2
OSoft Labs
 
Modern Java web applications with Spring Boot and Thymeleaf
LAY Leangsros
 
SSIS control flow
Slava Kokaev
 
Migrating database content from sql server to sap hana
venu212
 
Efficient Database Design for Banking System
S.M. Murad Hasan Tanvir
 
Html and css presentation
umesh patil
 
Advanced normalization - Bcnf
litpuvn
 
Basic Details of HTML and CSS.pdf
Kalyani Government Engineering College
 
UDA-Guia de desarrollo
Ander Martinez
 
Introduction to CSS3
Doris Chen
 

Viewers also liked (12)

PPTX
Introduction to HTML5 & CSS3
Pradeep Varadaraja Banavara
 
KEY
HTML5 Video Player - HTML5 Dev Conf 2012
steveheffernan
 
PPT
Building an HTML5 Video Player
Brightcove
 
PDF
HTML5: features with examples
Alfredo Torre
 
PPTX
Html5 tutorial for beginners
Singsys Pte Ltd
 
PDF
Making the HTML5 Video element interactive
Charles Hudson
 
KEY
Video.js - How to build and HTML5 Video Player
steveheffernan
 
PPTX
Use case document for boot fitting form
Kalai Vani
 
PPTX
html5.ppt
Niharika Gupta
 
PPT
How to Embed a PowerPoint Presentation Using SlideShare
Joie Ocon
 
PDF
reveal.js 3.0.0
Hakim El Hattab
 
PDF
What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginn...
Edureka!
 
Introduction to HTML5 & CSS3
Pradeep Varadaraja Banavara
 
HTML5 Video Player - HTML5 Dev Conf 2012
steveheffernan
 
Building an HTML5 Video Player
Brightcove
 
HTML5: features with examples
Alfredo Torre
 
Html5 tutorial for beginners
Singsys Pte Ltd
 
Making the HTML5 Video element interactive
Charles Hudson
 
Video.js - How to build and HTML5 Video Player
steveheffernan
 
Use case document for boot fitting form
Kalai Vani
 
html5.ppt
Niharika Gupta
 
How to Embed a PowerPoint Presentation Using SlideShare
Joie Ocon
 
reveal.js 3.0.0
Hakim El Hattab
 
What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginn...
Edureka!
 
Ad

Similar to Building an HTML5 Video Player (20)

KEY
HTML5 Video Presentation
sith33
 
PDF
Html5 intro
Kevin DeRudder
 
PDF
HTML5 Intoduction for Web Developers
Sascha Corti
 
PDF
HTML5 multimedia - where we are, where we're going
brucelawson
 
PDF
Multimedia on the web - HTML5 video and audio
Christian Heilmann
 
PDF
soft-shake.ch - Introduction to HTML5
soft-shake.ch
 
PDF
WordCamp Thessaloniki2011 The NextWeb
George Kanellopoulos
 
KEY
HTML5: Markup Evolved
Billy Hylton
 
PDF
5 Things You Need to Know to Start Using Video and Audio Today
Nigel Parker
 
PDF
HTML5 Multimedia: where we are, where we're going
brucelawson
 
PDF
JS Days HTML5 Flash and the Battle for Faster Cat Videos
Greg Schechter
 
PDF
JS Days Mobile Meow
Greg Schechter
 
PDF
Word camp nextweb
Panagiotis Grigoropoulos
 
PPT
Monetizing Flash Applications
Yoss Cohen
 
PDF
Web DU Mobile Meow
Greg Schechter
 
PDF
GDD HTML5, Flash, and the Battle for Faster Cat Videos
Greg Schechter
 
PPT
Flash 101
Stanley Fok
 
PDF
HTML5 and Accessibility sitting in a tree
brucelawson
 
PDF
Developer Training for 23 Video
Steffen
 
HTML5 Video Presentation
sith33
 
Html5 intro
Kevin DeRudder
 
HTML5 Intoduction for Web Developers
Sascha Corti
 
HTML5 multimedia - where we are, where we're going
brucelawson
 
Multimedia on the web - HTML5 video and audio
Christian Heilmann
 
soft-shake.ch - Introduction to HTML5
soft-shake.ch
 
WordCamp Thessaloniki2011 The NextWeb
George Kanellopoulos
 
HTML5: Markup Evolved
Billy Hylton
 
5 Things You Need to Know to Start Using Video and Audio Today
Nigel Parker
 
HTML5 Multimedia: where we are, where we're going
brucelawson
 
JS Days HTML5 Flash and the Battle for Faster Cat Videos
Greg Schechter
 
JS Days Mobile Meow
Greg Schechter
 
Word camp nextweb
Panagiotis Grigoropoulos
 
Monetizing Flash Applications
Yoss Cohen
 
Web DU Mobile Meow
Greg Schechter
 
GDD HTML5, Flash, and the Battle for Faster Cat Videos
Greg Schechter
 
Flash 101
Stanley Fok
 
HTML5 and Accessibility sitting in a tree
brucelawson
 
Developer Training for 23 Video
Steffen
 
Ad

Recently uploaded (20)

PDF
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
PDF
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
PPTX
MuleSoft MCP Support (Model Context Protocol) and Use Case Demo
shyamraj55
 
PPTX
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
PDF
The 2025 InfraRed Report - Redpoint Ventures
Razin Mustafiz
 
PPTX
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
PDF
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
PDF
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
PDF
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
PDF
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
PDF
UPDF - AI PDF Editor & Converter Key Features
DealFuel
 
PPTX
Digital Circuits, important subject in CS
contactparinay1
 
PPT
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 
PDF
“Squinting Vision Pipelines: Detecting and Correcting Errors in Vision Models...
Edge AI and Vision Alliance
 
PDF
NLJUG Speaker academy 2025 - first session
Bert Jan Schrijver
 
PPTX
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
PPTX
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
PDF
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
PDF
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
PDF
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
MuleSoft MCP Support (Model Context Protocol) and Use Case Demo
shyamraj55
 
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
The 2025 InfraRed Report - Redpoint Ventures
Razin Mustafiz
 
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
UPDF - AI PDF Editor & Converter Key Features
DealFuel
 
Digital Circuits, important subject in CS
contactparinay1
 
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 
“Squinting Vision Pipelines: Detecting and Correcting Errors in Vision Models...
Edge AI and Vision Alliance
 
NLJUG Speaker academy 2025 - first session
Bert Jan Schrijver
 
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 

Building an HTML5 Video Player

  • 1. HTML 5 <video> <future answer=”maybe”> <darkside unknown=”1”> </video>
  • 3. The Flash Player <video> Support <video> Formats Workflow Wins! Example
  • 4. GOAL OF THIS TALK: Understand the present state of <video> and when, why, and how you’d want to implement the technology.
  • 5. Flash Player * Closed Format * Powerful * Everyone Has It
  • 6. 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
  • 7. HTML 5 * Open/Closed Format * Powerful * Not Ubiquitious
  • 8. Works on... Firefox 3.5+ Chrome 3.0+ Safari 3.1+ Opera 10.5+
  • 10. <video> is only going to become more ubiquitious in the future and is already relevant for playing video on mobile devices.
  • 11. Format Wars * h.264 (closed) * Ogg Vorbis (open)
  • 12. HTML5 Video Supports Any Media. It’s the browser that dictates which formats are played.
  • 13. DiveIntoHTML5 for a detailed explanation on the formats that can be utilized in HTML5 and more... http://diveintohtml5.org/video.html
  • 15. 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>
  • 16. 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>
  • 17. 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; }
  • 18. 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
  • 19. 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; };
  • 20. <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.
  • 21. 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
  • 23. In Flash we do all of the legwork to build things that are trivial in the DOM.
  • 25. 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
  • 26. 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
  • 27. HTML5 Implementation <html> js css 4 Dev Hours
  • 28. 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>
  • 29. 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>
  • 30. 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.
  • 31. 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.
  • 32. Be sure to read: The Cold War of The Web http://www.alistapart.com/articles/flashstandards/
  • 33. Do you guys have any Questions? the end