Delivering Video with HTML5 and Smart Players

ProductEdition
Video CloudExpress I, Express II, Express III, Professional, Enterprise

This topic describes how to use Video Cloud smart players to deliver your video in Flash or HTML5, depending on your viewer's device capabilities.

Smart players enable you to use a single Video Cloud player so you don't have to create and manage separate players for each environment.

Introduction

With the rapid growth of the mobile web, video publishers face a fragmented environment in which they can no longer reach their desired audience using the Flash Player alone. In order to serve your whole audience on both desktop and mobile devices, you need to consider HTML5 video as well.

 

Flash has been the Internet standard for video delivery for years; HTML5 video is emerging as the new standard. While HTML5 video is developing rapidly, it has not yet reached the maturity of Flash video in terms of technology or the ecosystem of integrations that are available.

Video Cloud smart players are designed to help meet these challenges. When you enable HTML5 player delivery, the Video Cloud smart players will play your videos in a Flash player for desktop computers, or prompt the user to install Flash if the computer does not have Flash installed. For mobile devices, the Video Cloud smart players will play your video in a Flash player for devices that support Flash and have it installed. For mobile devices that do not support Flash or do not have Flash installed, Video Cloud videos will play in an HTML5 player. This enables you to use a single Video Cloud player that can deliver video in Flash or HTML5, so you don't have to create and manage separate players for each viewer environment. Also, your existing players can automatically load in Flash or HTML5 mode without any custom work or additional JavaScript on your part. For a complete list of the Apple and Android operating systems currently supported by Video Cloud HTML5 players, see the topic Supported Devices for HTML5 Players.

Our goal is to provide HTML5 players with all the features that we provide for Flash players as browser support for HTML5 matures. See the Current Limitations section in this topic for detailed information about the features not yet available in this release for smart players in HTML5 mode.

What is a smart player?

A smart player is a Video Cloud video player that is capable of running as a Flash player or as an HTML5 player. When a smart player loads using the JavaScript player publishing code, it detects the device that is loading it. If the device supports Flash, then the player loads in Flash mode. If the device does not support Flash, but does support HTML5, then the player loads in HTML5 mode.

HTML5 mode is supported only for Apple iOS and Android OS devices. You can test whether any given device supports HTML5 mode by visiting http://admin.brightcove.com/html5support/index.html using the device's browser. That test page will report explicitly whether your device is compatible with Video Cloud HTML5 players.

Which players are smart players?

All standard player templates are smart players. This means that players using standard player templates for single video players, single playlist players, and multiple playlist players can run as a Flash or HTML5 player. In HTML5 mode, standard multiple playlist templates will show only one playlist, the first playlist, or the featured playlist, if you've assigned a featured playlist. For more on setting featured playlists, see Designating featured content in players. For more details on all standard player templates, see Player Templates. In addition, custom player templates made with BEML will also act as smart players provided they use only the Supported BEML Elements for HTML5 Players.

How do you configure whether HTML5 mode is used?

You can configure at both the account level and the individual player level whether HTML5 mode is used. By default, HTML5 mode is enabled for all players. You can disable HTML5 mode for all your existing players, or enable or disable it for individual players. Read Setting Your HTML5 Video Delivery Options for details.

Styling and localizing smart players

Smart players can be styled just like any other Video Cloud player, with a few exceptions. You can use the Video Cloud Studio Publishing module to customize a player's look, and your custom colors, styles, images, and themes will be used by the player, whether the player is working in Flash mode or in HTML5 mode.

Localization for smart players also works the same whether the player is working in Flash mode or in HTML5 mode. However, due to cross-domain security limitations, a smart player in HTML5 mode is limited to using the Video Cloud standard player language choices and cannot load an external XML player label file that isn't hosted by Video Cloud.

Current limitations

Our goal is to provide HTML5 players with the same features that we provide for Flash players as HTML5 matures.  Currently, a smart player in HTML5 mode has the following functional limitations in comparison to Flash mode:

Content limitations

The Video Cloud smart player feature has pretty much the same content requirements as any mobile video:

  • Encoding and delivery
    • Your videos need to be encoded in H.264 (MP4) or HTTP Live Streaming (HLS). You can't deliver H.263 (FLV) videos in an HTML5 video player.
    • Your account must be set up either with universal delivery service or progressive download (PD). Universal delivery service is enabled by default for all accounts set up for streaming. You can't use Flash Media Server streaming (FMS) to deliver videos in an HTML5 video player. Read about Setting Video Delivery Options.

      Note that if you deliver video via progressive download to iOS devices (iPhones or iPads), iOS will attempt to download the entire video, even if the viewer never tries to play it. This can increase your bandwidth usage if you have many viewers on iOS devices. You can prevent this by insuring that there are HLS renditions for all of your videos.

      Note: A default set of HLS renditions was made available to all Video Cloud publishers on November 20, 2013.

  • Your videos should have one or more lower bandwidth renditions that are suitable for delivery over mobile networks. If your videos use the Video Cloud default transcoding options, you are all set. Otherwise, you want to make sure your videos include a rendition encoded in H.264 baseline profile with a total bandwidth of approximately 256 kbps. Brightcove also recommends creating HLS renditions if you have a Professional or Enterprise account. Read Encoding for Mobile Delivery, Setting Your Transcoding Options and the Standard Transcode Settings Reference for more details.
  • To avoid performance issues, a smart player in HTML5 mode will load only the first 20 videos from a playlist. If a video is not one of the first 20 in the playlist, but is marked as a "featured video" in the player publishing code, that featured video will be loaded in the smart player and will prevent the playlist's 20th video from being loaded in the player.
  • Logo overlays are not supported for HTML5. If you select the Burn-In option for your logo in Account Settings, the logo overlays will appear in the player in HTML5 mode, but be aware that burn-in overlays do not support click-through URLs.

Player publishing limitations

You must publish the player using the JavaScript player publishing code. For more information on player publishing code, see Publishing a Video Cloud Player.

For single video players, this means you should select the website code from the Quick Publish dialog:

Quick Publish a Smart Player

For playlist players, you must use the JavaScript code:

Publishing code for a Smart Player

Only players published using the JavaScript player publishing code or launched from the link URL can act as smart players. Players published with ActionScript or the HTML embed code will not act as smart players and therefore will load in Flash mode if the device supports Flash, and will not load at all if the device does not support Flash.

Smart players published on HTTPS pages may cause security warnings when they load in HTML5 mode. For more information, see Publishing a Video Cloud player on an HTTPS page.

Player functions in HTML5 mode

The screen shot below illustrates how a smart player renders as a Flash player or HTML5 player when it contains unsupported functions in HTML5 mode. The HTML5 chromed players do not support the email, social sharing, get code, full screen, and volume controls. Chromeless players, however, will use the native controls of the player and will not include custom developed controls such as a video quality switcher and also will not include non-supported functionality such as a social sharing control and a volume control. 

Flash HTML5

Sharing features and menus. The player sharing features and menus (social sharing, get link, get code, email) are not yet available for a smart player in HTML5 mode.

Volume control. There is no volume control on the player. Viewers are expected to use the device's volume controls.

Full screen. If you want users to be able to access the full screen button, please use our Chromeless video player experience, as then the browser's native video controls will be displayed. There is no full screen control on the VideoPlayer chrome for now. Apple does not provide JavaScript control to initiate full-screen, so our custom controls can't include a full-screen button.

Player APIs. The Video Cloud Flash-only Player APIs are not available. Use the Smart Player APIs.

Bumpers. There is no support for bumpers in HTML5 mode. Bumpers are skipped.

Player plug-ins. SWF plug-ins added to players will not work in HTML5 mode. You can add an additional JavaScript plug-in — a JavaScript file written using the Smart Player API - and the appropriate version of the plug-in will be loaded at runtime. See Adding Functionality to Smart Players using Plug-Ins for more details.

Player styling limitations

  • Custom skins, themes, and stylesheets are not yet supported in HTML5 mode
  • There may be some minor design differences between a player in Flash mode and a player in HTML5 mode
  • If you use the BEML <Style> tag, use only the class attribute, not the id attribute; When you use a style like <Style class="videoList">, your BEML code will have two tags with the id "videoList," which prevents the player from functioning correctly in HTML5 mode

Smart players and multi-bitrate renditions

For a smart player in HTML5 mode, video delivery is over standard HTTP. As a result, the player must pick a rendition when the viewer first starts to play the video, unless you have HLS renditions. In addition, mobile devices provide no mechanism for an HTML5 application to perform bandwidth detection. Therefore, the player doesn't have the ability to switch renditions. In order to accommodate the largest set of use cases, we pick one of the lower quality renditions to ensure playback on mobile networks. This is the rendition whose total bandwidth is the closest to 512 kbps.

A smart player in HTML5 mode will attempt to play only H.264 (MP4) files and will ignore any H.263 (FLV) renditions. On Apple iOS devices, the player will play any available Apple HTTP Live Streaming (M2TS) renditions and, if detected bandwidth is extremely low, may play an audio-only rendition if one is available.

Smart players and analytics

The Analytics module includes a Platform Trends report for determining if videos are viewed from Flash or HTML5 players. The Platform Trends report shows views, viewed minutes, and viewed minutes per view, for a specified date range by the Flash or HTML5 video player platform. See the Analytics Report Reference for more on viewing platform trends.

Data about streams, player loads, and bandwidth usage from players in HTML5 mode is collected and reported in the Video Cloud Studio Reports page. This data is aggregated with data from Flash mode and there is no way to separate the HTML5 usage from the Flash usage.

Smart players and advertising

Video Cloud offers limited support for running pre-roll ads for videos delivered in an HTML5 player. While procedures for trafficking your video ad campaign and assigning policies are identical to assigning ads to your Flash-delivered videos, HTML5 ad delivery requires publishing in an HTML5-enabled smart player as well as some specific ad server integration steps. For specifics and support limitations, see Delivering Advertising with HTML5.

Reply

The content of this field is kept private and will not be shown publicly.