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
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
PPTX
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
PDF
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
PDF
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
PPTX
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
PPTX
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
PPTX
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 
PDF
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
PDF
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
PPTX
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
PPTX
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
DOCX
Python coding for beginners !! Start now!#
Rajni Bhardwaj Grover
 
PDF
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
PDF
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
PDF
AI Agents in the Cloud: The Rise of Agentic Cloud Architecture
Lilly Gracia
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PPTX
Designing_the_Future_AI_Driven_Product_Experiences_Across_Devices.pptx
presentifyai
 
PDF
Kit-Works Team Study_20250627_한달만에만든사내서비스키링(양다윗).pdf
Wonjun Hwang
 
PDF
UPDF - AI PDF Editor & Converter Key Features
DealFuel
 
PDF
Staying Human in a Machine- Accelerated World
Catalin Jora
 
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
Python coding for beginners !! Start now!#
Rajni Bhardwaj Grover
 
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
AI Agents in the Cloud: The Rise of Agentic Cloud Architecture
Lilly Gracia
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
Designing_the_Future_AI_Driven_Product_Experiences_Across_Devices.pptx
presentifyai
 
Kit-Works Team Study_20250627_한달만에만든사내서비스키링(양다윗).pdf
Wonjun Hwang
 
UPDF - AI PDF Editor & Converter Key Features
DealFuel
 
Staying Human in a Machine- Accelerated World
Catalin Jora
 

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