Video Players

Video Players

Browser

HTML5

Flash

Android yes yes
Chrome yes yes
Firefox yes yes
Internet Explorer 6/7/8 no yes
Internet Explorer 9 yes yes
iPad/iPhone yes no
Opera yes yes
Safari yes yes

HTTP Downloads

  • Uses the HTTP protocol
  • Viewers have to wait for video to completely download before viewing
  • The transferred video is stored on the viewer's hard drive
  • No specialized server hardware or software is required to deliver the videos

Media Streaming

  • The only way to embed a live video feed on webpages so that people can watch a video while it is being recorded
  • Uses protocols such as RTP, RTMP, UDP, or TCP
  • Requires use of server-side software to handle the stream
    • Flash Media Server (FMS)
    • Windows Media Services (WMS)

Real Time Messaging Protocol (RTMP) Streaming

  • Delivers on-demand and live media to Adobe Flash applications
  • Supports video in FLV and H.264 (MP4/MOV/F4V) formats
  • Supports audio in MP3 and AAC (M4A) formats
  • Runs on port 1935 so is frequently blocked by (corporate) firewalls
  • The bandwidth of the connection must always be larger than the datarate of the video
    • The video display will stutter when the connection drops for a couple of seconds
    • The video will not display if the connection bandwidth is smaller than the video datarate

HTTP Pseudo-Streaming

  • The video starts playing as soon as enough of it has been downloaded that the user can experience continuous playback
  • Extends the advantages of straight HTTP downloads
    • It passes through (corporate) firewalls
    • Viewers with bad connections can simply wait for the download
  • MP4 and FLV videos can both be played back
  • A server-side module is needed to implement it
    • The H264 streaming module supports pseudo-streaming MP4 videos on IIS
    • The FLV streaming module supports pseudo-streaming FLV videos
  • No security and long loading times when seeking in large videos
  • YouTube uses this

HTTP Dynamic Streaming (HDS)

  • True streaming that does not require specialized streaming servers or proprietary transfer protocols
  • Breaks up the encoded media files into chunks that each contain a few seconds
  • The video player combines these chunks together
  • Only supported by the Flash Plugin 10.1 and later
  • Several different implementations exist
    • Adobe provides HTTP Dynamic Streaming
    • Apple provides HTTP Live Streaming
    • Microsoft provides Smooth Streaming
    • Octoshape provides Adaptive Bitrate

JW Player for Flash and HTML5

  • Popular open source audio/video player for the Web
  • Supports all playback formats for Adobe Flash Player and HTML5 browsers
    • AAC (.aac, .m4a, .f4a ) - high quality audio encoding that is widely supported
    • FLV (.flv) - a container for video encoded with either the VP6 or Sorenson Spark codec and audio encoded with the MP3 codec. FLV is an outdated format, inferior in quality to MP4 or WebM
    • MP3 (.mp3) - audio encoding that is supported by almost all devices that play audio, but is not as good in quality as AAC
    • MP4 (.mp4, .m4v, .f4v, .mov ) - a container for video encoded with either the H.264 or AAC codec. Supports the best video quality and hardware accelerated playback on a wide range of browsers and devices
    • WebM (.wbm) - a royalty free format for HTML5 video with quality similar to MP4
  • Supports multiple streaming and playlist formats
    • HTTP
    • Live streaming, where people can watch the video while it is being recorded
    • RMTP
  • Supports numerous playback options
  • The player renders in Flash by default, or HTML5 if Flash is not supported

Markup for Video Display 

<head> on Layout <script type="text/javascript" src="/js/jwplayer.js"></script> </head>

<body> implemented in XSLT file dynamically bound to Video Delivery item

<h3 class="topic-heading">JW Player .MP4 Display</h3>

<video 

    src="http://www.theinsidecorner.com/media/<video file>"

    height="270"

    id="container"

    poster="/media/preview.jpg"

    width="480">

</video>

<script type="text/javascript">

    jwplayer("container").setup({

    flashplayer: "/js/player.swf"

    });

</script>

</body>

JW Player for Silverlight

  • Displays Windows Media video, audio and live streams on a website
  • Used by publishers who have content encoded in WMV or WMA
  • Features similar settings to the JW Player for Flash/HTML5, except for playlist support
  • Customizable and Extendable through a JavaScript API

Sources