Even if you're new to streaming as a business, you're not new to it as a consumer or a viewer. You've seen what we call an online video player every time you watch a video: it could be YouTube's with its famous red, or anything else with that instantly recognizable right-pointing triangle you instinctively know indicates "play."
An online video player (or media player, which has some overlap) is the viewer-facing aspect of streaming. It's what enables playback. Whatever else goes on behind the scenes, from encoding and transcoding to distributing content with a CDN, the video player is the only part your audience will interact with. That's why in our pursuit to be everything and anything our customers need for streaming, Wowza offers Flowplayer, granting you true control over your workflow from end-to-end without needing a third-party solution to bring it all together.
You can use this guide to improve your understanding of online video players, why they're important, and how to start taking advantage of Wowza's native Flowplayer to optimize your audience's viewer experience.
What Is an Online Video Player?
First, it's important to cover what an online video player is - specifically, the kind based on HTML5. This is a specific type of media player - of which Flowplayer is one - that is by far the most common nowadays.
Do you recall Adobe Flash Player? Flash Player dominated the streaming landscape for years until Apple decided to end support for it in 2012. That left the streaming market with a dilemma: Flash was the most popular player, but Apple sold the most popular devices, so how do you deliver video when the two aren't compatible?
That's when online HTML5 players began growing in popularity. Developed for compatibility with Apple and most other kinds of devices, HTML5 players are industry standard now that Adobe Flash is officially sunset. Odds are that whenever you watch a video online, the frame and controls you're interacting with are HTML5.
What Does HTML5 Mean?
You already know that HTML refers to Hypertext Markup Language - the language that composes every page on the internet - but the 5 indicates the latest version of HTML that supports video and audio tags, like so: <video> and <audio>. Web browser developers have added video playback functionality into their browsers like Safari, Google Chrome, and Firefox, allowing other developers to add videos to web pages the same way they can with images.
However, these tags only support embedded videos, not streaming. The built-in video elements provide only limited control over how a browser loads and plays video, often resulting in stalling and buffering. Preventing these mishaps and ensuring a better viewing experience (for both live and on-demand streaming) requires a separate player component, the HTML5 streaming video player.
At its core, an HTML5 online video player is a JavaScript package that uses the Media Source Extensions API, or MSE. This API, combined with Encrypted Media Extensions (EME, for features like enhanced security and DRM), and VTTCue (for subtitles) allows developers to use JavaScript to override how browsers handle video tags and improve streaming video delivery.
What Do Online Video Players Do?
An online video player based on HTML5 handles every detail for connecting to a stream, including:
- Collecting stream information
- Parsing the manifest
- Downloading video segments
- ABR selection
- Buffer management
- Presenting downloaded segments to MSE for decoding and rendering on-page
- Content security
- Subtitles and captions
Adaptive bitrate streaming support is another significant feature that makes an online video player necessary. By continuously monitoring a user's bandwidth and buffer levels, the online video player identifies which of the available renditions of the stream will provide the best experience and selects that for viewing. This process ensures all your viewers have positive playback experiences regardless of device type or network performance.
Why HTML5 Is Necessary
As mentioned previously, HTML5 video came to be a more secure and functional replacement for Adobe Flash. Opera proposed the video element of HTML in 2007, which was implemented in HTML5. Adobe Flash was necessary to add a video to an HTML page before this time.
Flash leveraged the RTMP protocol to deliver video data from a server or CDN to a user's web browser. While offering many powerful features, such as dynamic switching, buffer control, and low latency, this protocol was not cacheable, so it required additional CDN resources to scale.
Along came HTTP-based streaming formats like HLS and DASH. These formats had the advantage of delivering video data in CDN-friendly segments over standard browser protocols. RTMP is still applicable for video ingestion, but protocols like HLS and MPEG-DASH for delivery require fewer CDN resources and, therefore, are more compatible with the modern web and are more capable of streaming to large audiences.
When You Need an Online Video Player
If you want to stream video to an audience, it's in your best interests to use an online video player. It's improbable anyone would miss out on your content because nearly every operating system and browser support it. Thanks to its industry prominence and adaptive bitrate streaming abilities, an HTML5 live video player ensures that your entire audience - from end users in big cities with high-speed internet connections to users struggling with high latency in rural locations - has a seamless playback experience.
What Are the Benefits of an Online Video Player?
There are numerous benefits to having an online video player at the far end of your video streaming workflow. They're industry standard, so you'll likely use one regardless, but here are a few key advantages they have over other kinds of players:
Native Browser Support and Compatibility: All modern web browsers support HTML5 video players without the need for additional software or plugins the way you did with Flash. This way, you don't have to worry about compatibility issues or not reaching a segment of your audience that uses a different kind of browser or device - everyone can watch whatever you're streaming.
Accessibility: HTML5 online web players also offer a range of features that make your content more accessible to people, whether they have language barriers or hearing impairments. Captions, subtitles, and translations help viewers understand what your video is communicating, and they can turn these features on or off as they please.
Mobile-Friendliness: Most online video players are also compatible with mobile devices so audiences can watch your content whenever, wherever. Players made with mobile in mind automatically adjust video quality and size according to the device's screen and network conditions, helping ensure smooth playback.
Customizability: The best online video players on the market offer an assortment of customization options. Every part of the streaming workflow affects a viewer's experience, but the player is what they see, and is therefore what they associate with your brand. A customizable player presents you with a chance to optimize your viewing experience and leave audiences with a sleek and recognizable impression of your business. Some players provide built-in customization options and others include API access for creating additional designs and interactions.
Improved Performance: You want your streams to flow seamlessly, right? Then an online video player with adaptive bitrate streaming that can adjust to network conditions in real-time will help ensure smooth playback, reduce buffering, and optimize bandwidth usage.
SEO: HTML5 players adhere to web standards, making it easier for search engines like Google to understand and index video content. This feature improves the discoverability and organic traffic to your landing pages and videos on demand.
A Secure Future: As we've mentioned, HTML5 players are industry standard, but it's also good to know that the World Wide Web Consortium (W3C) supports the technology. As both players and web browsers evolve, you won't have to worry about them becoming incompatible eventually the way Flash fell out of favor.
Online Video Player Use Cases
Video players are inevitable in streaming. Without one, there's no way to watch content! As such, you might be thinking: "How can there be use cases if you always need one?" Many players offer similar features, but there are a few different applications that could require different capabilities. Some video player use cases include:
- Live streaming
- Video on demand
- Advertising and marketing
- Video galleries and portfolios
- Video conferencing and webinars
- Surveillance and security
- Making content downloadable
And more. Live streaming and video on demand might be obvious applications, but did you know that if you want to download content on your device to watch for later viewing, it's often the player component of the workflow that makes that possible? Or if you want to display thumbnails for recommended titles once a video is over, you do so in the player, not the CMS? Read more about different video player use cases and how they could matter to your application.
What to Look for in an Online Video Player
There are many online video players available on the market to choose from. If you choose to shop around for one that best suits your needs, here are some critical features and details to look out for when making your decision:
Open Source or Commercial
Some live video players are free and open source, allowing you to download and modify them as necessary. These solutions are convenient but may require piecing together components from additional sources.
Other player options are paid and come with a host of additional features and integrations you won't find anywhere else. When deciding between these choices, keep in mind whose responsibility problem solving will be and what kind of functionality and support you need.
Customizability and Extendibility
Does the online streaming player you're considering allow you to customize it to feel on-brand? If you're watching a video on a company's website that looks like it's embedded straight from YouTube despite everything else looking put-together, it creates a jarring and incongruous viewer experience that might make you question what you're watching.
Some video player UI elements you'll want to customize include frame dimensions, watermarks and logos, and player controls (such as play, pause, skip, and rewind). A few online video players have even built their entire UI from WebComponents, allowing you to modify each component in the UI tree to support fine-grained UX customizations. Audiences will associate their viewer experiences with your business, so the more seamless you can make them, the more it benefits your brand's credibility.
A significant part of customization is player extendibility. This term refers to how much you can "extend" the HTML5 player's functionality with additional plugins. Plugins you may want include those for features listed in the rest of this section, as well as capabilities like adding cue points and implementing social media sharing buttons. One of the best plugins of all, though, is the ability to write your own.
It's also beneficial to have SDKs that let you optimize the user experience across different devices, including iOS, Android, and smart TV platforms. HMTL5 players may already be compatible with each other, but you'll want to make sure what viewers see is still on-brand with the right controls.
On-Screen Controls
Speaking of controls, a memorable user experience entails much more than the ability to play, pause, and rewind content. The best online video players also offer:
- Speed selection (such as 1.5x or 2x) if viewers want to fast forward without skipping
- Chapters that divide the video in the player control bar for easy navigation and topic identification
- Frame-accurate seeking so viewers who want to skip to a certain part don't have to guess where they are in the video
No one likes having to watch parts of a video that aren't relevant to them or rewatch segments they've already seen, so viewers will appreciate having an extra amount of control.
DRM
DRM, or Digital Rights Management, is used to encrypt and protect your content from unauthorized use. DRM systems will support multiple standards based on the delivery protocol and device destination of the stream, so you will want to be sure the online player you choose supports these different DRM standards to reach every device.
Ad Insertion
Ad insertion is vital if you hope to monetize your content. Therefore, your online video player needs to be capable of handling insertion markers, delivering decision data, and inserting advertisements before, after, or during a stream. These formats are pre-roll (before the main feature begins), midroll (which you can choose to put after a particular number of seconds or percentage into the video), and post-roll (after the video is over). Not every video player supports every format, so make sure the one you select gives you the option you want.
Also, double check which ad servers a player works with. Examples include Google DFP/AdXchange, SpotX, Smartclip, Telaria, and more.
Video Layouts
A smart business move to prove your brand's value is showing off the rest of your content without overwhelming your audience. A strategic way to do this is presenting your additional videos in a creative but non-invasive way. A few examples include:
- Video recommendations that appear at the bottom of the player or as thumbnails once the main feature has finished
- Video galleries that display multiple content titles in a grid
- Background videos that play behind other page elements
- Floating videos so content continues playing in a smaller screen if page visitors scroll away
It's also advantageous to add custom calls-to-action you can use to encourage viewers to visit another page or otherwise continue interacting with your site.
Captions and Subtitles
A high-quality online video player will allow you to display subtitles or screen reader descriptions during playback. These features are essential to make your content more accessible to your viewers, so double check if you can include captions (preferably in multiple languages) when selecting the player right for you.
Analytics
Analytics are valuable for measuring viewership, engagement levels, and other aspects of your audience's behavior. The more you can understand how they interact with your content and what they connect with, the better content you can deliver that grows your video ROI.
Online video players can also provide quality of experience data, such as failed playback, buffering, and stalls, which allows you to discover and address delivery problems that help ensure your viewers have the best experience possible.
Online Video Player Test
Want to try out what an HTML5 online video player is capable of? They're easily embeddable into your website's HTML. If you'd like to test the playback of a video file, the sample code below is an example of what you would insert into an HTML5 webpage. Simply sign up for a free trial and configure a test stream in either Wowza Streaming Engine or Wowza Video and copy the HLS playback URL that is provided as your source. You can then paste that playback URL in the code as your source (src).
<html>
<head>
<title>HTML5 Live Streaming Test</title>
</head>
<body>
<video width="640" height="400" controls="controls" src="http://[wowza-ip-address]:1935/live/[myStream]/playlist.m3u8"></video>
</body>
</html>Keep in mind that with Flash gone, media servers like Wowza can still ingest an RTMP source and repackage it for delivery over HLS in an HTML5 player. Although it is official that Adobe Flash is dead, that doesn't mean RTMP streaming is as well.
Streaming With Flowplayer
There are many free and paid versions of online video players available on the market, but now we want to talk about one in particular: Flowplayer.
Wowza's online video player, native to Wowza Video but also available for Wowza Streaming Engine customers, can take advantage of Flowplayer's feature-rich capabilities and easy setup (if you already know how to use the video tag, you know how to use Flowplayer!).
Flowplayer is designed for solution builders who want to create and automate scalable, cloud-based video applications. You can check out our list of some of the best online video players on the market, but you'll find that some of them have limited customizability or heavy codebases that make them difficult to work with. Flowplayer, fortunately, is lightweight, powerful, and tailored for solution builders.
Flowplayer empowers developers with:
Speedy development time. Plus, you don't need to include superfluous functionality your business doesn't need, removing potential problems and improving page speed load times (though it's there should you ever need it). A faster player also means an enhanced viewing experience for your audience.
Broad platform support and compatibility with all browser and device types.
Customization and flexibility so you can create the viewer experience you want your audience to associate with your business. It's possible to adjust Flowplayer's colors, appearance, video recommendations, ad placement, and more.
Robust builder controls via Flowplayer's JavaScript API. With this kind of access, you can take advantage of advanced features including ad insertion, subtitles, content protection, and a wide range of others.
Saving Money with Flowplayer
There is also high potential to save money with Flowplayer compared to standalone or free versions. Most players charge based on a "pay to play" model, meaning businesses pay every time a user presses the play button or allows an autoplay to proceed. Many businesses creating video applications purchase "bundles" of plays based on their anticipated viewership. Therefore, if an organization streams a video that does not reach as many audience members as it paid for, it loses the difference in cost.
Flowplayer is available to add on for Wowza Streaming Engine users, but Flowplayer is fully pre-integrated into Wowza Video - meaning plays are included in Viewer Hours, so you only pay for the views you reach.
What Flowplayer is Capable Of
When it comes to everything people use online video players for, there is very little Flowplayer isn't capable of. We've already mentioned its comprehensive yet accessible API and customization possibilities, but Flowplayer also enables:
- Speed selection (let's face it, we all watch videos on 2X speed sometimes)
- Social sharing to your favorite platforms
- Keyboard shortcuts for easy navigation
- Playlists to keep your viewers hooked
- Bitrate/quality selection if your users have less-than-ideal Internet connections
- Chromecast and Airplay casting for viewing on big screens
- Chapter divisibility and frame-accurate seeking
- Multiple audio tracks
- Small asset bundle sizes of 150kB
- WCAG 2.1 compliance for accessibility
And don't forget commercial support. Our team is here if you need anything.
Curious about what else Flowplayer can do and how to use it? Everything you need to know is covered in the Flowplayer docs.
Start Your Free Trial With Wowza's Online Video Player
If your business seeks to build an entirely cloud-based streaming application, then look no further than Wowza Video, which is already pre-integrated with Flowplayer. If you prefer a software based, on-premises application, it's still possible to use Flowplayer as an add-on to Wowza Streaming Engine and leverage one of the industry's few high-functioning hybrid streaming solutions.
You'll need an online video player to make your streaming application a success. Instead of piecing your workflow together from different components, Wowza makes it possible to create a true glass-to-glass solution, from encoding to playback, all with a single provider.