Is Your HTML5 Video Player Fully Compatible?

Times are changing in the world of online video. Flash, which dominated online video for decades, has already experienced a terminal decline. Meanwhile, HTML5 video player options and formats continue to expand. This is great news for the security and speed of the internet. At the same, it’s caused a shakeup for an industry in the throes of exponential growth.

Are you ready for the changes on the horizon–and already underway–in the online video world? Or, if you’ve already made the switch, is your HTML5 video player fully compatible?

In this article, we review some key changes that are happening around HTML5 video player formats. We’ll also cover what you can do to ensure your content remains playable in a post-Flash era. Finally, we’ll provide instructions for embedding a Dacast HTML5 video player, as well as embedding an HTML5 video player for social media sharing.

First, let’s begin by taking a closer look at the rise of HTML5 video player formats.

Flash is dying; HTML5 video player formats are on the rise

Flash has been around for over 20 years.

During most of that time, Flash was the dominant platform for video and most other multimedia on the internet. According to Adobe, for example, more than 1.3 billion devices around the world widely support Flash. As such, it’s been a standard in the online video distribution industry for good reason.

However, Flash technology has encountered some ongoing issues, particularly in recent years. Most notably, security and speed have posed issues for Flash.

Looking back a bit, Apple released the first iPhone in 2007. However, that iPhone intentionally didn’t support Flash. In fact, this move marked the first major computing platform to deliberately drop Flash support. Since then, the iPhone has been a trendsetter. And in 2012, Android followed suit by dropping support for Flash completely.

The trend has continued in more recent years, with many web browsers also dropping Flash support. In July 2016, the popular open source web browser Firefox announced its plans to phase out support for Flash. Firefox explained the goal of this transition to “enhance security, improve battery life, [create] faster page load, and better browser responsiveness.”

Following that big move, Microsoft Edge, Apple’s Safari, and Google Chrome have since jumped on the HTML5 bandwagon as well.

Chrome 55 drops native Flash support

Google Chrome is the most popular web browser in the world. When Chrome makes changes, then, it’s important to take notice. In 2015, Google announced a plan to phase out (or “de-emphasize”) Adobe Flash. This shift represented an important step, not only for Google Chrome but for the entire online video industry.

A year later, in September 2016, Google released Chrome 53. That version of Chrome was the first to block Flash-based analytics and other background processes. With the Chrome 54 release, Google rewrote the YouTube support to use HTML5 by default.

More recently, version 55 of Chrome took an even bigger step. This version was the first to default to the HTML5 video player on all websites for all content. (There are, however, some notable exceptions. Google exempted the top 10 websites for one year. In 2016, those sites included YouTube, Facebook, Yahoo, VK, Live, Yandex, OK.ru, Twitch, Amazon, and Mail.ru. In a similar vein, the Chrome 55 HTML5 default behavior did not apply to sites that rely on Flash entirely.)

Firefox, the second most popular browser in the world, has since followed suit. In 2017, all Flash content become “click to activate” in Firefox. Additionally, Firefox plans to disable use of the Flash plug-in altogether for most users (not including organizations using FSR) by early 2020. What does this mean for users like you? If you create content in Flash, you need to transition to a different technology if you haven’t done so already.

Changes in Chrome 56 and beyond

Web developers and content creators strive to stay attuned to changes in the world of web browsing. Many of these changes are driven by evolving standards and practices adopted by web browsers. As such, it’s good to keep an eye on the future.

In March 2018, Google released Chrome 56 and introduced some changes related to HTTP. The HTTP protocol is used for loading just about every page on the web. However, it’s not a secure method of transmitting data. HTTPS is a secure version of HTTP that includes encryption. Most pages that involve transmitting passwords, banking information, or other sensitive details have used HTTPS for years.

Starting in 2018 with Chrome 56, Google added the feature allowing your browser to label “insecure” HTTP content. When using Chrome, a prominent logo in the URL bar now warns users of insecure content. For video content creators, we recommend ensuring that your pages are in HTTPS. The “Not Secure” warning label may scare users away otherwise. In the short term, this is most important for login pages and payment portals.

In the long term, however, we strongly recommend moving all of your content to HTTPS. Here at Dacast, for example, our HTML5 video player is HTTPS compatible to make payments 100% secure. Akamai, the live streaming CDN we use at Dacast, has also updated its CDN for HTTPS video delivery. This ensures maximum security and compatibility for a safer web experience.

As of September 2019, Chrome has released version 77 for Mac, Windows and Linux, with Android support being rolled out this month.

Finally, by the end of 2020, Google plans to completely remove all Flash support.

Transition times for online video

As Wired succinctly stated in 2015, “Flash. Must. Die.” Considering the history we outline above, it seems inevitable that online video has since moved away from Flash. If you haven’t embraced this shift yet, the time is now! By 2020, we expect to see Flash become further marginalized from the online video industry.

We can find evidence of these changes in other venues beyond the Chrome and Firefox browsers. For example, CDN support for Flash video encoded using Adobe’s RTMP standard has declined gradually as well. By the end of 2017, most CDNs had announced plans to end support for Flash streaming in the near future.

A number of CDN service providers have already depreciated RTMP in favor of HLS, HDS, Smooth Streaming, and other HTTP-based protocols. Comcast already does not support RTMP; likewise, other CDNs including Fastly and Highwinds have ended their support as well.

Other networks have also initiated this transition. Level 3 Communications, for example, stopped taking new Flash streaming customers at the beginning of 2016. Verizon Digital Media Services dropped RTMP support in June 2017, although they still support RTMP ingestion (at least for now).

Akamai, Dacast’s CDN, has adopted a similar approach. Akamai has moved away from RTMP gradually, but the CDN continues to support existing customers. Limelight Networks and Amazon CloudFront are two of the few CDNs that still have no definitive plans to drop RTMP support.

The bottom line in terms of CDNs and online video compatibility? No matter which CDN you use, your content should play well with a modern delivery format and an HTML5 video player.

Which HTML5 video player ensures compatibility?

For online video producers, we know that the decline of Flash can pose a challenge. Luckily, there are many strategies to make the transition easier. Among these options, one ideal method is embedded video player software for deployment to websites under your control. These video players can support Flash, HTML5 video, or both.

In fact, many modern video players support both formats. For example, the popular video.js video player is an HTML5 video player. JW Player, which powers video on millions of popular websites, is also an HTML5 video player. However, like video.js, JW Player has fallback support for Flash. Note that you can only play certain content, such as .flv videos, using Flash. As for streaming, JW Player supports DASH, HLS, and RTMP.

Another option is MediaElement.js. This video player alternative mimics HTML5 even when playing video using Flash or Silverlight in older browsers.

There are a multitude of options available when it comes to using a compatible HTML5 video player. Even better, some offerings are open-source projects that you can modify to suit your needs. Video.js is the best example, however. You can change every aspect of video.js, including appearance, controls, and more with a bit of coding.

What to know about the Dacast HTML5 video player?

Another option is to use the video player provided by your online video platform. Different video streaming platforms provide different video player options. Here at Dacast, our video player is based on video.js. This means that our player is completely compatible with the HTML5 revolution and ready for HTTPS delivery.

The Dacast video player uses HTML5 video natively. In light of the industry trends, as of 2017 Dacast no longer supports Flash as a fallback option. However, should the need arise, Dacast does provide an alternate low latency streaming solution (10s latency on average)  available at the Premium pricing plan level and above. Overall, viewers can stream any video hosted or streamed via the Dacast platform on any device that supports HTML5 video.

For both viewers and producers, this is an ideal situation. Viewers will automatically receive the best quality content over their HTML5-compatible playback device. This makes for a convenient and easy viewing experience, particularly if you’re broadcasting live video stream to generate revenue from your content.  Additionally, video creators need only to use a single embed code to reach every potential audience.

Streaming with Dacast

In terms of the streaming solutions that Dacast offers, our video players are compatible with every modern web browser, including Chrome, Firefox, Opera, Edge, Safari, Vivaldi, UC Browser, Samsung Internet, and many others. Even many old, outdated browsers still support Dacast video without issue. And that means that our broadcasters can reach 99.9% of internet users without issue.

Dacast’s HTML5 video player is configurable in many different ways. You can change the color scheme, choose a watermark (i.e.) a logo, change embedded video size, select between iframe and Javascript, embed social sharing buttons, and more. For maximum compatibility, Javascript is usually the best option.

One crucial advantage to the Dacast platform is its responsiveness. Any video player scales automatically to different screen sizes and device types. It’s also extremely fast to load—about 20 times faster than the previous version! Combined with a fast first-frame time, this guarantees a snappy experience for users. Dacast also supports plugins for extending the functionality of your video player, as well as popular advertising standards such as VAST2.

Finally, the Dacast video player has a dedicated video API. This API integrates with Google Analytics, which allows you to connect players to your account. You can also integrate live events into your analytics account, enabling you to track audiences in real time.

How to embed a Dacast HTML5 video player

Embedding a Dacast HTML5 video player window is easy. You can follow these instructions to get started:

1. First, visit your account back office. Next, navigate to the live channel or on-demand video content that you wish to embed.
2. Click “Publishing Options” (“Publish Settings” in channel view) in the drop-down menu.
3. At this stage, you’ll see a series of options. You can restrict allowed referrers or viewer countries. You can also select a custom player theme, turn video autoplay on or off, add subtitles, and choose whether or not you want to publish your video on the Dacast portal. Choose your preferred settings before continuing to the next step.
4. Below on the same screen, you’ll need to select the width and height for your embed code. A common size is 640 x 480, but you can go bigger or smaller as you like. Feel free to simply use the default.
5. Next, you’ll need to select whether your embed should use Javascript or iframe code. These options are somewhat advanced. In general, Javascript is the preferred option, as it supports more features. However, iframe works on a wider range of services, including websites that you don’t code yourself.
6. Finally, you can copy your share code. Select all the code in the text box and copy it to your clipboard.
7. Next, visit the website on which you want to stream live video by embedding a code.
8. Log in to your administrative backend and enter “code view” for the page in question. Paste the embed code in the proper location relative to other content. Make sure to save, and you’re ready to go! Your HTML5 video player will appear on the page.

If you’re new to the game, it can be a bit challenging to understand how to stream live video on your website can be a bit confusing. But rest assured that it’s much easier than you’d imagine, even if you’re not very tech-savvy! To learn more about embedding code on the most popular website hosting platform, WordPress, check out this guide.

Embedding an HTML5 video player on other website platforms

A similar process also applies to other website platforms. However, the specifics can vary. For example, Weebly is a website platform that uses drag-and-drop elements. These elements include an “HTML code” block. To embed a video on Weebly:

1. First open your website editor.
2. Navigate to the page of your choice.
3. Locate the HTML code block in the sidebar. Then drag this block to the proper location on the page.
4. Click the block to edit it, paste in your embed code, and click publish.

If everything works well, you should now see the embedded video when you visit the live website page.

Social media sharing via an HTML5 video player embed

On social media, sharing Dacast on-demand or live streaming content is easy as well. You may have noticed the “Facebook share code” option within your account. You can copy this code directly into a Facebook post.

When you share it, this link will create a video that viewers can play directly on Facebook via the timeline, page, or profile. This function works for both on-demand videos and live streaming video. Once inserted into a post, broadcasters even have the option to remove the URL. This results in a streamlined, clean social media post with embedded video. This functionality is ideal for maintaining the security and rights associated with a white-label video host, while still accessing the large audiences found on social media platforms.

Conclusion

Are you ready for HTML5 and incorporation of an HTML5 video player? Times are changing in video, and we hope this article will help you keep up. A move toward more modern, fast, and reliable standards is taking place. There are growing pains, of course, but overall the changes are positive. In terms of online video, Flash is no longer the dominant force it once was. HTML5 video players are the way to go!

This transition away from Flash isn’t the only change in the online video industry. Increasingly, HTTPS is becoming the standard for video content delivery. With Chrome maintaining its status as the world’s most popular browser, Google’s decision to label non-HTTPS (“not secure”) content is huge.

As with any change, businesses and service providers are adapting. Using a video platform like Dacast means that you will be prepared for the future. Our thorough and comprehensive HTML5 video player support and increasing support for HTTPS mean that we’ll help you deliver your content–securely and seamlessly. Whether you use Dacast or another video hosting service, this article is a good place to start your own transition to an HTML5-based mindset.

Of course, we do hope you’ll consider Dacast’s streaming solutions, if you haven’t already streamed with us.

If you’d like to try Dacast free of cost, sign up today to enjoy free streaming and all our great features for 30 days (no credit card required).

YES, SIGN ME UP

For regular tips on live streaming, as well as exclusive offers, you can join our Dacast LinkedIn group. For more information, tutorials, and consideration of all things (live) streaming, check out our full collection of blog articles. Finally, don’t forget to share your questions and comments below; we love to hear from our readers!

Thanks for reading, and good luck with your broadcasts!

By Max Wilbert.