SlideShare uma empresa Scribd logo
1 de 33
Baixar para ler 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

Mais conteúdo relacionado

Mais procurados

Introduction to google hacking database
Introduction to google hacking databaseIntroduction to google hacking database
Introduction to google hacking databaseimthebeginner
 
NoSql Injection
NoSql InjectionNoSql Injection
NoSql InjectionNSConclave
 
Lessons from 100+ ransomware recoveries
Lessons from 100+ ransomware recoveriesLessons from 100+ ransomware recoveries
Lessons from 100+ ransomware recoveriesDatabarracks
 
Ethical Hacking .pptx
Ethical Hacking .pptxEthical Hacking .pptx
Ethical Hacking .pptxjohnnymaaza
 
Module 8 System Hacking
Module 8   System HackingModule 8   System Hacking
Module 8 System Hackingleminhvuong
 
Invoke-Obfuscation DerbyCon 2016
Invoke-Obfuscation DerbyCon 2016Invoke-Obfuscation DerbyCon 2016
Invoke-Obfuscation DerbyCon 2016Daniel Bohannon
 
What is Open Source Intelligence (OSINT)
What is Open Source Intelligence (OSINT)What is Open Source Intelligence (OSINT)
What is Open Source Intelligence (OSINT)Molfar
 
The Secret Life of a Bug Bounty Hunter – Frans Rosén @ Security Fest 2016
The Secret Life of a Bug Bounty Hunter – Frans Rosén @ Security Fest 2016The Secret Life of a Bug Bounty Hunter – Frans Rosén @ Security Fest 2016
The Secret Life of a Bug Bounty Hunter – Frans Rosén @ Security Fest 2016Frans Rosén
 
Hacking and Hackers
Hacking and HackersHacking and Hackers
Hacking and HackersFarwa Ansari
 
CNIT 129S: Ch 7: Attacking Session Management
CNIT 129S: Ch 7: Attacking Session Management CNIT 129S: Ch 7: Attacking Session Management
CNIT 129S: Ch 7: Attacking Session Management Sam Bowne
 
Web application penetration testing
Web application penetration testingWeb application penetration testing
Web application penetration testingImaginea
 
Session Hijacking ppt
Session Hijacking pptSession Hijacking ppt
Session Hijacking pptHarsh Kevadia
 
How To Install and Configure SUDO on RHEL 7
How To Install and Configure SUDO on RHEL 7How To Install and Configure SUDO on RHEL 7
How To Install and Configure SUDO on RHEL 7VCP Muthukrishna
 
Burp plugin development for java n00bs (44 con)
Burp plugin development for java n00bs (44 con)Burp plugin development for java n00bs (44 con)
Burp plugin development for java n00bs (44 con)Marc Wickenden
 
DNS hijacking using cloud providers – No verification needed
DNS hijacking using cloud providers – No verification neededDNS hijacking using cloud providers – No verification needed
DNS hijacking using cloud providers – No verification neededFrans Rosén
 

Mais procurados (20)

Introduction to google hacking database
Introduction to google hacking databaseIntroduction to google hacking database
Introduction to google hacking database
 
Building Advanced XSS Vectors
Building Advanced XSS VectorsBuilding Advanced XSS Vectors
Building Advanced XSS Vectors
 
NoSql Injection
NoSql InjectionNoSql Injection
NoSql Injection
 
Lessons from 100+ ransomware recoveries
Lessons from 100+ ransomware recoveriesLessons from 100+ ransomware recoveries
Lessons from 100+ ransomware recoveries
 
Ethical Hacking .pptx
Ethical Hacking .pptxEthical Hacking .pptx
Ethical Hacking .pptx
 
Web Filters
Web FiltersWeb Filters
Web Filters
 
Module 8 System Hacking
Module 8   System HackingModule 8   System Hacking
Module 8 System Hacking
 
Qué Es Slideshare
Qué Es SlideshareQué Es Slideshare
Qué Es Slideshare
 
Invoke-Obfuscation DerbyCon 2016
Invoke-Obfuscation DerbyCon 2016Invoke-Obfuscation DerbyCon 2016
Invoke-Obfuscation DerbyCon 2016
 
What is Open Source Intelligence (OSINT)
What is Open Source Intelligence (OSINT)What is Open Source Intelligence (OSINT)
What is Open Source Intelligence (OSINT)
 
The Secret Life of a Bug Bounty Hunter – Frans Rosén @ Security Fest 2016
The Secret Life of a Bug Bounty Hunter – Frans Rosén @ Security Fest 2016The Secret Life of a Bug Bounty Hunter – Frans Rosén @ Security Fest 2016
The Secret Life of a Bug Bounty Hunter – Frans Rosén @ Security Fest 2016
 
Same origin policy
Same origin policySame origin policy
Same origin policy
 
Hacking and Hackers
Hacking and HackersHacking and Hackers
Hacking and Hackers
 
CNIT 129S: Ch 7: Attacking Session Management
CNIT 129S: Ch 7: Attacking Session Management CNIT 129S: Ch 7: Attacking Session Management
CNIT 129S: Ch 7: Attacking Session Management
 
Web application penetration testing
Web application penetration testingWeb application penetration testing
Web application penetration testing
 
Session Hijacking ppt
Session Hijacking pptSession Hijacking ppt
Session Hijacking ppt
 
File upload vulnerabilities & mitigation
File upload vulnerabilities & mitigationFile upload vulnerabilities & mitigation
File upload vulnerabilities & mitigation
 
How To Install and Configure SUDO on RHEL 7
How To Install and Configure SUDO on RHEL 7How To Install and Configure SUDO on RHEL 7
How To Install and Configure SUDO on RHEL 7
 
Burp plugin development for java n00bs (44 con)
Burp plugin development for java n00bs (44 con)Burp plugin development for java n00bs (44 con)
Burp plugin development for java n00bs (44 con)
 
DNS hijacking using cloud providers – No verification needed
DNS hijacking using cloud providers – No verification neededDNS hijacking using cloud providers – No verification needed
DNS hijacking using cloud providers – No verification needed
 

Destaque

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!
 

Destaque (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...
 

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

Semelhante a 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
 
前端概述
前端概述前端概述
前端概述
 

Último

Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
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
 
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
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
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
 
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
 
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
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
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
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
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
 
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
 
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
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
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
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 

Último (20)

Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.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
 
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
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
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
 
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
 
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
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
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
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
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™
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
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...
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
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.
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 

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