Tag: html5
The State of HTML5 Video Report - JavaScript, Market Share, Fullscreen, and More...
by Jeroen Wijering on April 19, 2012
In January 2012, we announced the launch of our online resource, The State of HTML5 Video Report. Since its launch, we have had a tremendous response from our community. The page itself has been tweeted over 3,000 times, received 30,000 visits the day of its launch, and is still actively circulating the digital sphere.
Three months after its initial launch, we have updated the report with some very interesting findings. First, you will find a new JavaScript section, dedicated to video scripting using the video tag. Common use cases for this are the rendering of custom controls (like JW Player does) or page interaction with the video timeline (like Popcorn.js does). Second, you will find all existing tests updated with results from the latest browsers and mobile platforms. We highlight some interesting findings below.
Market Share
Compared with our statistics from last quarter, we already see shifts in market share. By market share, we mean the portion of the online market that is controlled by a particular browser / device:
IE 6/7/8 are declining quickly; their market share has gone from approximately 28% to 22% in the last few months. IE9, however, is growing (up to 11% market share from 9%). Chrome & Firefox are growing as well. Both have surpassed the share of IE 6/7/8.
Additionally, Android now has surpassed Opera. In terms of the mobile market, iOS still controls roughly 2x (4%) more than the other platforms, due to its dominance over the tablet market & recent success with the iPhone 4S. Other mobile platforms are virtually nonexistent.
Android 4.0
While Android 4.0 (Ice Cream Sandwich) was released last year, not every device-maker has updated their devices to the latest operating system. Still, some devices (like the Galaxy S2) now run ICS, so we have included it in our test results. Unfortunately, we found Android 4.0 to exist as a mixed bag of new features and new bugs. Some of the more interesting findings were:
- Support for WebM video decoding. It is in software though, so larger or longer videos do not play.
- Support for Apple HLS streaming. Unfortunately, quality switching has not yet been implemented.
- The video tag controls are still buggy. It is still difficult to start a video in HTML5.
- The scripting API is still a bit buggy - no metadata, no errors & no buffering. API for playback and seeking have improved though.
- Videos play inline on mobile phones, which creates an awkward UX. A fullscreen button is available, but it is as equally hard to click as the play button (e.g. they are both tiny).
Fullscreen API
There have been several updates on the state of Fullscreen playback in HTML5, which is pretty exciting for online video. While Chrome & Safari already supported the Fullscreen API, Firefox recently introduced support for it too (view our test page here). Thus, between these three browsers, the majority of the browser market supports fullscreen playback in HTML5. Opera is actively working on fullscreen support; presumably IE10 will introduce beta support as well.
Other interesting developments that you should stay tuned for more information on include Firefox's drop in support for the fullscreen button, and the discussion around fullscreen support in mobile devices, which becomes more relevant now that Android 4.0 plays the video inline.
We hope you take a look at the most recent version of our published report, share with your community, and send us your feedback! Feel free to post your comments directly to this blogpost, or join the discussion on our Facebook page.
HTML5 Takes the Lead on Android Devices
by Pablo Schklowsky on February 28, 2012
Even before Adobe's announcement back in November that it would cease supporting Flash on Android devices, it was becoming clear to us at LongTail Video that the JW Player would need to shift its focus on Android devices towards HTML5 mode. We took the first step with the release of the 5.9 player, which now embeds itself in HTML5 mode on all Android devices by default, since our testing has shown that Android is fully capable of playing HTML5 video. But there are several reasons why HTML5 should be the delivery mode of choice on Android, with or without Flash. This blog post will attempt to address a few of them.
Limited Future Support for Flash
This one should be obvious, so we'll get it out of the way. After the current generation of Android devices running Froyo (2.2), Gingerbread (2.3), Honeycomb (3.x) and Ice Cream Sandwich (4.0) are either phased out or upgraded to future Android versions, Flash will no longer be supported in the browser.
Video Player Behavior on Mobile Devices
It is difficult to put forth a general rule for how video players should behave on mobile platforms. In fact, the term "mobile" is itself too general in this context, since viewing a web page containing video is a very different experience depending on whether you are viewing on a smartphone with limited screen real estate, versus watching on a tablet with more room for your fingers to interact with the content.
If you load the JW Player on an Android smartphone in Flash mode, you will get the same version of the player you would have gotten had you loaded it on a desktop browser. However, everything will be scaled to the size of your phone's screen, including all of the button controls. Not only would the buttons be hard to press, but they wouldn't really make sense in the context of watching video on a phone. Conversely, the player's HTML5 mode relies on the phone's own built-in video controls, which are optimized for the screen size. Additionally, HTML5 video will always play in full-screen mode on Android smartphones, which is a much better experience.
Viewing video in a browser on a tablet isn't as cut-and-dry of an issue. The screen is larger, so it is possible to have a usable video playing inside of the page content. This can be done in both Flash and HTML5 modes, so the decision of which to use comes down to performance (despite its reputation, Flash doesn't perform that poorly on most Android devices when it comes to video) and usability (the built-in HTML5 controls are optimized for touchscreens, while the Flash controls would need to be modified to work well on touch devices).
Lastly, we feel that it is important to provide a consistent experience across all mobile devices, not just Android devices. Switching to HTML5 playback for Android means that users on both Android and iOS devices will see the same things:
- Fullscreen-only playback (on phones)
- No overlays on top of the video player while a video is playing
- Built-in touch screen controls
Flash Embedding on Mobile Browsers
One issue we've noticed with Flash for Android is that it "steals" interaction events from the browser. For example, if you're scrolling down a page using the one-finger swipe gesture, and your finger happens to brush over a Flash element on the page, Flash will interpret this as a mouse click. In the case of the JW Player, the player will begin to play, when what you actually wanted to do was scroll down the page. Using native HTML5 elements eliminates this sort of behavior, since those elements distinguish between different types of gestures.
HTTP Live Streaming (HLS)
Beginning with Ice Cream Sandwich, Android devices will support HTTP Live Streaming (HLS), which has become the de facto standard for streaming video over HTTP. This is the same format which is used to stream video content to iOS devices. Unfortunately, HLS is not supported natively in the Flash player, making this another reason to favor HTML5 over Flash on Android. For an explanation of what HLS is and why it's important, check out our blog post on the subject.
Android Support in the JW Player Going Forward
For all of the reasons described above, we feel that it is necessary to focus our Android development efforts on HTML5 and not Flash. Flash mode will still be used as a failover on Android devices which support it; for example, if your player configuration specifies an RTMP stream (which can't be played in HTML5 mode), the Flash player will still be used. And if you disagree with our decision, you can still specify Flash as your primary renderer by setting the modes block in your player configuration. But we think you'll find that for Android, HTML5 is the best way to go.
HTML5 Video Ads: Coming To a Mobile Device Near You
by Pablo Schklowsky on February 21, 2012
As HTML5 grows its share of the online video market, web video publishers are beginning to look for ways to monetize videos being played outside of the traditional Flash advertising methods. But when someone watches a video in HTML5 mode, what should that experience be like? What's possible, given the current state of the tech?
HTML5: Desktop vs. Mobile
Before we begin talking about the challenges that face HTML5 video ads, it's valuable to acknowledge that video in HTML5 can behave very differently on the desktop compared to the same HTML code running on mobile devices. Here are some of the primary differences:
| HTML5 Desktop | HTML5 Smartphone | HTML5 Tablet | |
|---|---|---|---|
| Clickable Overlays | Yes | No | Depends* |
| Clickable Video | Yes | No | Depends* |
| Companion Ads | Yes | Not visible | Yes |
| Fullscreen mode | Optional | Always | Optional |
| Customizable controls | Yes | No | Yes |
| Available Bandwidth (probable) | LAN/WAN | 3G/4G/WAN | 3G/4G/WAN |
* Platform-specific
As you can see from the table above, some concepts that advertisers take for granted, such as video ads which cause a web page to be displayed when clicked, are not possible on smartphones. For example, on most mobile devices, once an HTML5 video begins playing, whether it's an ad or not, the phone will enter fullscreen video playback mode. In this mode, the user has full control over the playing video, including the ability to seek to the end of it.
Technical Challenges
As the major ad networks are beginning to offer support for HTML5 video ads, they face several important challenges.
Video Codec Incompatibility (WebM vs. MP4)
One issue which HTML5 video publishers are already familiar with is that to support all platforms, video must be encoded into multiple formats — WebM (or Ogg Theora) for Firefox, and H.264 for everything else. Second, someone (whether the browser, ad network, video player, or publisher) will need to select the appropriate format and display it to the user. This can be difficult to implement in an ad scenario, especially if ad networks don't account for the user's browser when generating an ad response.
Crossdomain Issues
An additional technical concern is that loading external assets (a VAST XML response from an ad server, for example) brings with it certain restrictions in JavaScript. These restrictions need to be worked around on the server hosting those assets.
<Video> Tag Access
Depending on the implementation, most ad networks require direct access to the player's <video> tag in order to play an ad in HTML5. This makes sense, considering that in iOS, each distinct <video> tag placed on a page needs to be clicked by the user in order for the video to be played. If the ad were to be played in a new <video> tag which was placed on top of the player, the user would need to click "play" twice - once for the ad and another time to watch the main video. This presents some interesting problems. While the ad is playing, the player needs to treat the events flowing from the <video> tag differently than if the main video were playing. After the ad has played, the video tag needs to be restored to its original state (the video playing, its position, etc).
Industry Roundup
Considering the relative newness of HTML5 video (and the challenges listed above), it's unsurprising that not many video ad networks have implemented full HTML5 support yet. That being said, there are a few ad networks who have made some progress on this front:
- Google recently released HTML5 support in their Interactive Media Ads (IMA) product. This implementation allows publishers to set up VAST ads, with certain limitations based on device compatibility. The JW Player's Google IMA Plugin includes beta support for HTML5 mode.
- YuMe has been steadily improving their HTML5 support, which is now supported in the JW Player's HTML5 mode via the YuMe plugin.
- Most other video ad networks (Tremor, SpotXchange, BrightRoll, and others) have either announced, or are currently implementing support for mobile devices, which will mean HTML5-compatible ad media.
Future Considerations
As in Flash, as more publishers attempt to handle more sophisticated scenarios, new techniques must be devised to handle them. Dynamic bitrate switching, for example, allows publishers make on-the-fly optimizations for video ads based on screen resolution and available bandwidth. Apple HLS (HTTP Live Streaming) is on its way to becoming the standard streaming format on mobile devices — with competition coming in the form of MPEG DASH, which was ratified as an ISO standard last week. Both HLS and DASH are based around the idea of a manifest file, which keeps track of smaller chunks of video that can be stitched together into a single seamless video. To insert an ad into this stream can be as simple as adding the ad chunks inside of the manifest file at the appropriate times, a technique known as dynamic ad insertion. A more general optmization we'll be moving towards is ad delivery which is optimized for variable-bandwidth environments, as many mobile users are viewing content over slower wireless networks.
In short, we're still a long way from having a turnkey video advertising solution for all HTML5 viewers, but we're closer than ever before to achieving that goal.
Introducing The State of HTML5 Video Report
by Jeroen Wijering on January 26, 2012
Today we announced the public launch of our latest resource, The State of HTML5 Video Report. For two years our JW Player team has researched and monitored the evolution of HTML5 video capabilities so that we could effectively support it. Beyond our own products, we believe that the community at large will benefit from this work. We are extremely pleased to share our detailed research with the community.
We grouped our test results into the few topics we've found to be the most critical. Each section is fleshed out, and to the best of our ability accurately represents the state of HTML5 online video today - complete with our published test pages & results. The topics covered in the report include:
- Market Share of Browsers and Devices
- Media Formats
- Tag Attributes
- Fullscreen Playback
- Adaptive Streaming
- Accessibility
Get full access to the online report here. Each time we update the report, we will post a notification on our Facebook page, as well as on our Twitter account. Be sure to like us on Facebook and follow us on Twitter to stay informed.
Whether you are well-acquainted with HTML5, or just getting started, the content presented in our report is an indispensable resource for tracking the progress of HTML5 video. As HTML5 video progresses, we will update and amend this report to accurately reflect the state of the industry.
We have already received such a great response from our community, and as always appreciate the support. In addition to the applause, we have also received valuable feedback from other HTML5 experts, and intend to edit the report where necessary.
The JW Player team will be participating in discussions with the community around HTML5 video. Visit us on Facebook to join the conversation.
The Future of Mobile Video is Apple, For Now
by Jeroen Wijering on December 12, 2011
Consolidation has begun in the mobile video space. In early November, Adobe announced it would stop developing its Flash Player for mobile devices (read: Android). Going forward, HTML5 will be the only method to play back videos on mobile phones and tablets. This is a big win for Apple, the company that most strongly opposed Flash in the last few years
According to Adobe, Android 4 (Ice Cream Sandwich) will be the last mobile platform to get a Flash plugin. The OS is launching without one, though. Given the terrible track record of Flash for mobile, we shouldn't be surprised if it never arrives. Ergo, video publishers should ensure their video works in HTML5 on Android today.
Apple is winning under the hood as well. The H.264 codec is baked into the CPU of every single mobile phone today, while WebM is still confined to a software-only (and non-HTML5) implementation on some Android devices. Google is working on hardware, but the path from reference designs to integration in phones and, eventually, market share is a long one.
Until WebM hardware decoding is supported by a decent slice of mobile devices, video publishers will continue to focus on H.264. Seeing this, Google continues its support for H264 in Chrome, despite the announcement to drop it "soon" almost a year ago. For all intents and purposes, H.264 is the baseline codec for HTML5 video at present.
Completing its hat trick, Apple is well on its way to providing the de facto streaming protocol for mobile video: HLS. Built on top of HTML5, this protocol allows publishers to deliver their videos securely with high quality. I should note that this is relevant only to roughly 10 percent of all publishers, but these publishers account for 90 percent of all mobile views.
What Is HLS?
The acronym HLS stands for HTTP Live Streaming. It is a protocol that allows publishers to stream video using plain HTTP web servers, as opposed to often expensive and hard to scale dedicated streaming servers. This streaming is achieved by chopping up the video hosted on the server into small (usually 10 seconds) fragments, stitching them together again in the browser. The browser only requests the next fragment in line, instead of loading the entire video and wasting bandwidth, as happens in vanilla HTML5. See diagram below for a single fragmented stream:
A video streamed through HLS is usually encoded into multiple qualities, ranging from a mere 180px to full-blown 720px and beyond. Every time the browser returns to the server to load the next fragment, it decides which quality level to load. The browser thus continuously adjusts the quality of the stream to best match the available bandwidth. This is hugely important in mobile, with devices perpetually swapping between 2G, 3G, 4G and WiFi connections. See diagram below for an adaptive fragmented stream:
In addition to this, the fragments of HLS streams can be encrypted for secure delivery. Users who intercept these fragments will not be able to play them at all. This is a big security advantage over plain HTML5 video, where every savvy user can find the URL of a video and download it for his own use.
Why Use HLS?
Today's wide usage of the HLS protocol is a result of the success of iOS. Apple designated the protocol as the one and only way to stream video to the iPhone and iPad. No Flash, no Silverlight, no RTP or RTSP. On top of that, HLS is required for in-app video. Even simple MP4 downloads, which do work for in-browser playback, are not allowed in iOS apps.
Every major publisher therefore needs to use the HLS protocol, and every major encoding tool (e.g. Sorenson Squeeze) and streaming server (e.g. Flash Media Server or Wowza Media Server) supports it nowadays. This broad ecosystem, in turn, now has many devices that support the protocol as well. Nearly every popular set-top box can play HLS (Xbox, PS3, Roku, Apple TV, Boxee), as will Android phones running the new Ice Cream Sandwich release.
Wondering if there are any competing protocols? Absolutely. Smooth Streaming from Microsoft is one, but it requires the non-mobile Silverlight plugin. There is also Dynamic Streaming from Adobe, which requires the soon to be retire? Flash plugin. HLS is built on top of HTML5, which makes it easy to implement by both browsers and devices.
A standardization effort is on its way as well, in the form of MPEG DASH (HLS, as well as RTMP and RTSP. However, as things go with standards, progress is slow and broad support is years away.
The Apple Standard
So, for the foreseeable future, we'll watch our mobile video the Apple way: embedded using HTML5, encoded using H.264 and streamed using HLS. Any platform that wants broad support for quality video (Windows Phone?) must implement HLS and any publisher that wants many mobile viewers must leverage HLS.
Now, is this a bad thing? Quite the contrary. The alternative to a central protocol is fragmentation: multiple plugins, multiple codecs and multiple protocols. Which is bad for large media corporations, as it reduces their bottom line. Even worse for smaller video publishers though, since they lack the resources to even make their video available at all. And that, in turn, is a detriment to mobile video at large. The key to mass adoption is broad-reaching availability across a wide variety of content.
This blogpost is a modified version of our article first published on Mashable. Read Full Article Here.
- 1 of 4
- ››