SlideShare a Scribd company logo
1 of 33
Download to read offline
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

Linux Kernel MMC Storage driver Overview
Linux Kernel MMC Storage driver OverviewLinux Kernel MMC Storage driver Overview
Linux Kernel MMC Storage driver OverviewRajKumar Rampelli
 
Kernel Recipes 2019 - Marvels of Memory Auto-configuration (SPD)
Kernel Recipes 2019 - Marvels of Memory Auto-configuration (SPD)Kernel Recipes 2019 - Marvels of Memory Auto-configuration (SPD)
Kernel Recipes 2019 - Marvels of Memory Auto-configuration (SPD)Anne Nicolas
 
Up is Down, Black is White: Using SCCM for Wrong and Right
Up is Down, Black is White: Using SCCM for Wrong and RightUp is Down, Black is White: Using SCCM for Wrong and Right
Up is Down, Black is White: Using SCCM for Wrong and Rightenigma0x3
 
VMS Comparison table
VMS Comparison tableVMS Comparison table
VMS Comparison tableGeter Junior
 
Device tree support on arm linux
Device tree support on arm linuxDevice tree support on arm linux
Device tree support on arm linuxChih-Min Chao
 
DevDays: Profiling With Java Flight Recorder
DevDays: Profiling With Java Flight RecorderDevDays: Profiling With Java Flight Recorder
DevDays: Profiling With Java Flight RecorderMiro Wengner
 
Fundamentals of Linux Privilege Escalation
Fundamentals of Linux Privilege EscalationFundamentals of Linux Privilege Escalation
Fundamentals of Linux Privilege Escalationnullthreat
 
Ruxcon 2014 - Stefan Esser - iOS8 Containers, Sandboxes and Entitlements
Ruxcon 2014 - Stefan Esser - iOS8 Containers, Sandboxes and EntitlementsRuxcon 2014 - Stefan Esser - iOS8 Containers, Sandboxes and Entitlements
Ruxcon 2014 - Stefan Esser - iOS8 Containers, Sandboxes and EntitlementsStefan Esser
 
Part 02 Linux Kernel Module Programming
Part 02 Linux Kernel Module ProgrammingPart 02 Linux Kernel Module Programming
Part 02 Linux Kernel Module ProgrammingTushar B Kute
 
Understanding a kernel oops and a kernel panic
Understanding a kernel oops and a kernel panicUnderstanding a kernel oops and a kernel panic
Understanding a kernel oops and a kernel panicJoseph Lu
 
LCU14-103: How to create and run Trusted Applications on OP-TEE
LCU14-103: How to create and run Trusted Applications on OP-TEELCU14-103: How to create and run Trusted Applications on OP-TEE
LCU14-103: How to create and run Trusted Applications on OP-TEELinaro
 
eMMC Embedded Multimedia Card overview
eMMC Embedded Multimedia Card overvieweMMC Embedded Multimedia Card overview
eMMC Embedded Multimedia Card overviewVijayGESYS
 
How Linux Processes Your Network Packet - Elazar Leibovich
How Linux Processes Your Network Packet - Elazar LeibovichHow Linux Processes Your Network Packet - Elazar Leibovich
How Linux Processes Your Network Packet - Elazar LeibovichDevOpsDays Tel Aviv
 
ARMv8-M TrustZone: A New Security Feature for Embedded Systems (FFRI Monthly ...
ARMv8-M TrustZone: A New Security Feature for Embedded Systems (FFRI Monthly ...ARMv8-M TrustZone: A New Security Feature for Embedded Systems (FFRI Monthly ...
ARMv8-M TrustZone: A New Security Feature for Embedded Systems (FFRI Monthly ...FFRI, Inc.
 
Introduction to Computer System-ppt-converted.pptx
Introduction to Computer System-ppt-converted.pptxIntroduction to Computer System-ppt-converted.pptx
Introduction to Computer System-ppt-converted.pptxShivanjaliChaurasia1
 
HKG18-402 - Build secure key management services in OP-TEE
HKG18-402 - Build secure key management services in OP-TEEHKG18-402 - Build secure key management services in OP-TEE
HKG18-402 - Build secure key management services in OP-TEELinaro
 

What's hot (20)

Linux Kernel MMC Storage driver Overview
Linux Kernel MMC Storage driver OverviewLinux Kernel MMC Storage driver Overview
Linux Kernel MMC Storage driver Overview
 
Kernel Recipes 2019 - Marvels of Memory Auto-configuration (SPD)
Kernel Recipes 2019 - Marvels of Memory Auto-configuration (SPD)Kernel Recipes 2019 - Marvels of Memory Auto-configuration (SPD)
Kernel Recipes 2019 - Marvels of Memory Auto-configuration (SPD)
 
Up is Down, Black is White: Using SCCM for Wrong and Right
Up is Down, Black is White: Using SCCM for Wrong and RightUp is Down, Black is White: Using SCCM for Wrong and Right
Up is Down, Black is White: Using SCCM for Wrong and Right
 
Using strace
Using straceUsing strace
Using strace
 
VMS Comparison table
VMS Comparison tableVMS Comparison table
VMS Comparison table
 
Device tree support on arm linux
Device tree support on arm linuxDevice tree support on arm linux
Device tree support on arm linux
 
DevDays: Profiling With Java Flight Recorder
DevDays: Profiling With Java Flight RecorderDevDays: Profiling With Java Flight Recorder
DevDays: Profiling With Java Flight Recorder
 
Fundamentals of Linux Privilege Escalation
Fundamentals of Linux Privilege EscalationFundamentals of Linux Privilege Escalation
Fundamentals of Linux Privilege Escalation
 
ARM Compute Library
ARM Compute LibraryARM Compute Library
ARM Compute Library
 
Ruxcon 2014 - Stefan Esser - iOS8 Containers, Sandboxes and Entitlements
Ruxcon 2014 - Stefan Esser - iOS8 Containers, Sandboxes and EntitlementsRuxcon 2014 - Stefan Esser - iOS8 Containers, Sandboxes and Entitlements
Ruxcon 2014 - Stefan Esser - iOS8 Containers, Sandboxes and Entitlements
 
Linux Kernel I/O Schedulers
Linux Kernel I/O SchedulersLinux Kernel I/O Schedulers
Linux Kernel I/O Schedulers
 
Part 02 Linux Kernel Module Programming
Part 02 Linux Kernel Module ProgrammingPart 02 Linux Kernel Module Programming
Part 02 Linux Kernel Module Programming
 
Understanding a kernel oops and a kernel panic
Understanding a kernel oops and a kernel panicUnderstanding a kernel oops and a kernel panic
Understanding a kernel oops and a kernel panic
 
Linux IO
Linux IOLinux IO
Linux IO
 
LCU14-103: How to create and run Trusted Applications on OP-TEE
LCU14-103: How to create and run Trusted Applications on OP-TEELCU14-103: How to create and run Trusted Applications on OP-TEE
LCU14-103: How to create and run Trusted Applications on OP-TEE
 
eMMC Embedded Multimedia Card overview
eMMC Embedded Multimedia Card overvieweMMC Embedded Multimedia Card overview
eMMC Embedded Multimedia Card overview
 
How Linux Processes Your Network Packet - Elazar Leibovich
How Linux Processes Your Network Packet - Elazar LeibovichHow Linux Processes Your Network Packet - Elazar Leibovich
How Linux Processes Your Network Packet - Elazar Leibovich
 
ARMv8-M TrustZone: A New Security Feature for Embedded Systems (FFRI Monthly ...
ARMv8-M TrustZone: A New Security Feature for Embedded Systems (FFRI Monthly ...ARMv8-M TrustZone: A New Security Feature for Embedded Systems (FFRI Monthly ...
ARMv8-M TrustZone: A New Security Feature for Embedded Systems (FFRI Monthly ...
 
Introduction to Computer System-ppt-converted.pptx
Introduction to Computer System-ppt-converted.pptxIntroduction to Computer System-ppt-converted.pptx
Introduction to Computer System-ppt-converted.pptx
 
HKG18-402 - Build secure key management services in OP-TEE
HKG18-402 - Build secure key management services in OP-TEEHKG18-402 - Build secure key management services in OP-TEE
HKG18-402 - Build secure key management services in OP-TEE
 

Viewers also liked

HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012steveheffernan
 
Building an HTML5 Video Player
Building an HTML5 Video PlayerBuilding an HTML5 Video Player
Building an HTML5 Video PlayerBrightcove
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examplesAlfredo Torre
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginnersSingsys Pte Ltd
 
Making the HTML5 Video element interactive
Making the HTML5 Video element interactiveMaking the HTML5 Video element interactive
Making the HTML5 Video element interactiveCharles Hudson
 
Video.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video PlayerVideo.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video Playersteveheffernan
 
Use case document for boot fitting form
Use case document for boot fitting formUse case document for boot fitting form
Use case document for boot fitting formKalai Vani
 
How to Embed a PowerPoint Presentation Using SlideShare
How to Embed a PowerPoint Presentation Using SlideShareHow to Embed a PowerPoint Presentation Using SlideShare
How to Embed a PowerPoint Presentation Using SlideShareJoie Ocon
 
What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginn...
What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginn...What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginn...
What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginn...Edureka!
 

Viewers also liked (12)

Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012
 
Building an HTML5 Video Player
Building an HTML5 Video PlayerBuilding an HTML5 Video Player
Building an HTML5 Video Player
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examples
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
 
Making the HTML5 Video element interactive
Making the HTML5 Video element interactiveMaking the HTML5 Video element interactive
Making the HTML5 Video element interactive
 
Video.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video PlayerVideo.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video Player
 
Use case document for boot fitting form
Use case document for boot fitting formUse case document for boot fitting form
Use case document for boot fitting form
 
html5.ppt
html5.ppthtml5.ppt
html5.ppt
 
How to Embed a PowerPoint Presentation Using SlideShare
How to Embed a PowerPoint Presentation Using SlideShareHow to Embed a PowerPoint Presentation Using SlideShare
How to Embed a PowerPoint Presentation Using SlideShare
 
reveal.js 3.0.0
reveal.js 3.0.0reveal.js 3.0.0
reveal.js 3.0.0
 
What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginn...
What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginn...What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginn...
What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginn...
 

Similar to Building an HTML5 Video Player

Mobile Web Video
Mobile Web VideoMobile Web Video
Mobile Web VideoSarah Allen
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5Chris Mills
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5smueller_sandsmedia
 
HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012
HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012
HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012Patrick Lauke
 
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010Patrick Lauke
 
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...Patrick Lauke
 
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...Patrick Lauke
 
Taking HTML5 video a step further
Taking HTML5 video a step furtherTaking HTML5 video a step further
Taking HTML5 video a step furtherSilvia Pfeiffer
 
Craft 2019 - “The Upside Down” Of The Web - Video technologies
Craft 2019 - “The Upside Down” Of The Web - Video technologiesCraft 2019 - “The Upside Down” Of The Web - Video technologies
Craft 2019 - “The Upside Down” Of The Web - Video technologiesMáté Nádasdi
 
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, CroatiaLeave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, CroatiaRobert Nyman
 
Web Presentations, deck.js and Extensions
Web Presentations, deck.js and ExtensionsWeb Presentations, deck.js and Extensions
Web Presentations, deck.js and Extensionsremiemonet
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5Kevin DeRudder
 
Capture, record, clip, embed and play, search: video from newbie to ninja
Capture, record, clip, embed and play, search: video from newbie to ninjaCapture, record, clip, embed and play, search: video from newbie to ninja
Capture, record, clip, embed and play, search: video from newbie to ninjaVito Flavio Lorusso
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web DesignChristopher Schmitt
 

Similar to Building an HTML5 Video Player (20)

Mobile Web Video
Mobile Web VideoMobile Web Video
Mobile Web Video
 
HTML5와 모바일
HTML5와 모바일HTML5와 모바일
HTML5와 모바일
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5
 
HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012
HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012
HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012
 
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
 
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
 
Html5 intro
Html5 introHtml5 intro
Html5 intro
 
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
 
Jsf2 html5-jazoon
Jsf2 html5-jazoonJsf2 html5-jazoon
Jsf2 html5-jazoon
 
Taking HTML5 video a step further
Taking HTML5 video a step furtherTaking HTML5 video a step further
Taking HTML5 video a step further
 
Craft 2019 - “The Upside Down” Of The Web - Video technologies
Craft 2019 - “The Upside Down” Of The Web - Video technologiesCraft 2019 - “The Upside Down” Of The Web - Video technologies
Craft 2019 - “The Upside Down” Of The Web - Video technologies
 
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, CroatiaLeave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
 
Web Apps
Web AppsWeb Apps
Web Apps
 
Flash And Dom
Flash And DomFlash And Dom
Flash And Dom
 
Web Presentations, deck.js and Extensions
Web Presentations, deck.js and ExtensionsWeb Presentations, deck.js and Extensions
Web Presentations, deck.js and Extensions
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
 
Capture, record, clip, embed and play, search: video from newbie to ninja
Capture, record, clip, embed and play, search: video from newbie to ninjaCapture, record, clip, embed and play, search: video from newbie to ninja
Capture, record, clip, embed and play, search: video from newbie to ninja
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
前端概述
前端概述前端概述
前端概述
 

Recently uploaded

Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 

Recently uploaded (20)

Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 

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