Building an HTML5 Video Player - Streaming Streaming Media West 2011 #SMWest #html5video Steve...

Click here to load reader

  • date post

    26-Sep-2020
  • Category

    Documents

  • view

    0
  • download

    0

Embed Size (px)

Transcript of Building an HTML5 Video Player - Streaming Streaming Media West 2011 #SMWest #html5video Steve...

  • Streaming Media West 2011

    #SMWest #html5video

    Steve Heffernan, VideoJS & Zencoder

    Building an HTML5 Video Player

    Thursday, November 10, 2011

  • Thursday, November 10, 2011

  • Thursday, November 10, 2011

  • Thursday, November 10, 2011

  • ~2008~2000 ~2020

    Thursday, November 10, 2011

  • Thursday, November 10, 2011

  • Reasons to use HTML5 Video Now

    • It’s the future!

    • Runs natively in the browser

    • Cleaner code

    Thursday, November 10, 2011

  • Thursday, November 10, 2011

  • Thursday, November 10, 2011

  • Thursday, November 10, 2011

  • Thursday, November 10, 2011

  • http://blog.mefeedia.com/html5-feb-2011

    Thursday, November 10, 2011

    http://blog.mefeedia.com/html5-feb-2011 http://blog.mefeedia.com/html5-feb-2011

  • Thursday, November 10, 2011

  • Thursday, November 10, 2011

  • Thursday, November 10, 2011

  • Thursday, November 10, 2011

  • Download Video: MP4 Ogg

    Thursday, November 10, 2011

  • Embed Builder

    Thursday, November 10, 2011

  • Thursday, November 10, 2011

  • OPEN CLOSED

    Thursday, November 10, 2011

  • Thursday, November 10, 2011

  • CONTAINER FORMAT

    VIDEO CODEC

    AUDIO CODEC

    Thursday, November 10, 2011

  • MP4

    H.264

    AAC 9+ 9+3+

    Thursday, November 10, 2011

  • OGV

    THEORA

    VORBIS

    3+ 10.5+3.5+

    Thursday, November 10, 2011

  • WEBM

    VP8

    VORBIS6+ 10.6+4+

    Thursday, November 10, 2011

  • Thursday, November 10, 2011

  • Thursday, November 10, 2011

  • 6+ 10.6+4+

    Three Formats

    3+ 10.5+3.5+

    9+ 9+3+

    Thursday, November 10, 2011

  • 6+ 10.6+4+

    Two Formats

    9+ 9+3+

    Thursday, November 10, 2011

  • One Format

    9+ 9+3+

    Thursday, November 10, 2011

  • Handbrake.fr

    Thursday, November 10, 2011

  • Firefogg.org

    Thursday, November 10, 2011

  • Zencoder.com

    Thursday, November 10, 2011

  • Content Protection

    • RTMP Streaming

    • DRM (Flash Access/Smooth Streaming)

    • Source Obscurity

    • Time/GEO/IP limited URLs

    • Native App Obscurity

    • HTTP Streaming

    • AES Encryption

    Thursday, November 10, 2011

  • Browser/General Issues

    •Autobuffer => Preload

    •Missing Poster in Some Safari Versions

    •Cross-browser Load Progress Tracking

    •HTML5 Browsers Do Not Fallback on Incompatible Sources

    Thursday, November 10, 2011

  • Device Quirks: iOS 3

    • Needs MP4 as first source.

    • iPad Poster Attribute Bug

    • iPad JS in Head / iPhone JS not in Head

    Thursday, November 10, 2011

  • Device Quirks: Android 2.1 / 2.2

    • @type at MP4 source breaks.

    • Video can only be programmatically started.

    Thursday, November 10, 2011

  • VideoJS.com

    Thursday, November 10, 2011

  • VideoJS - 3 Pieces

    •HTML Embed Code

    •Javascript Library (video.js)

    •CSS Skin (video-js.css)

    Thursday, November 10, 2011

  • CSS Skin

    Thursday, November 10, 2011

  • CSS Skin

    Thursday, November 10, 2011

  • CSS Skin

    Thursday, November 10, 2011

  • CSS Skin

    Thursday, November 10, 2011

  • CSS Skin

    Thursday, November 10, 2011

  • By Kroc Camen

    Video for Everybody

    Thursday, November 10, 2011

  • By Mark Pilgrim

    Dive into HTML5

    Thursday, November 10, 2011

  • HTML5 Video and Audio in Depth

    http://videojs.com/lynda

    Thursday, November 10, 2011

    http://videojs.com/lynda http://videojs.com/lynda

  • Thursday, November 10, 2011

  • http://videojs.com

    @videojs

    Building an HTML5 Video Player

    Streaming Media West 2011

    #SMWest #html5video

    Steve Heffernan, VideoJS & Zencoder

    Thursday, November 10, 2011

    http://videojs.com http://videojs.com