In his recent presentation at the Demuxed conference for video engineers, Bitmovin solution architect, James Yeh, looked at the pros and cons of delivering video to mobile devices using an HTML5 player versus using the native player.

Streaming video to mobile devices

In our recent video developer survey, we found that the vast majority of video developers (87%) are already using HTM5 players to deliver video to desktop platforms. The same survey showed that more than half are also using HTML5 to deliver video to mobile both on Android and iOS and a slightly higher number again are delivering video using native applications (60% and 62% respectively). These figures show clearly that a number of developers are doing both, but also suggest that there is a significant number of video developers who are choosing between using an HTML5 player or a native app to deliver video to mobile devices. This blog post, based on Jame’s Demuxed presentation, discusses some of the pros and cons for each approach.

HTML5 Player and an HTML5 UI

Using the HTML5 player approach has a number of benefits, the most obvious being the time saving. By using the same HTML5 based player across web, iOS and Android apps, you can reuse a lot of your code and significantly reduce the time needed to build and maintain your player. As well as reusing the player, your HTML5 UI can also be reused, which not only saves time but also ensures a consistent user experience across all three platforms. The benefits here are obvious. Less work and therefore time required makes you faster to market. Updates can be made server side rather than in the client which means fewer app updates. The entire process is much more efficient.
However there are some downsides to the HTML5 approach. Firstly, the startup times tend to be noticeably slower. Secondly the CPU usage is much higher, so your app will burn through your users battery lives much faster than if you were to go for the native app option. Another significant difference is the access to native features. Some of the limitations will include: not being able to offer offline DRM, less access to sensors (camera, geo location etc.) and HEVC support on Android will not be available.

Native player on iOS and Android

In contrast to working with an HTML5 player, building natively will require working with a separate player for each platform and therefore a significant additional investment in development and maintenance. Developers will be required with expertise in AVPlayer and Exoplayer, and they can be a little harder to find. The UI will need to be built separately for each app, which along with increasing the overhead, makes the task of delivering a unified look and feel across all your product lines that much harder.
But the extra investment in time and resources does come with some significant benefits. For example the performance will be significantly better because of the native video players more efficient usage of CPU. All of the features mentioned above will also become available. HEVC on Android is possible, offline playback with DRM will allow you to offer downloadable premium content. Furthermore you will have access to all of the user’s devices sensors, giving you much more control over the user experience.

Developing on Roku?

Roku is another very popular platform that is enjoying significant market growth, partially due to it’s low entry cost for consumers. But as a developer it has a number of challenges that need to be overcome. Bitmovin’s Roku SDK is available for download via our online portal. Check out our getting started guide to jump in and see how it can speed up your development. If you don’t have a Bitmovin account, the button will take you to the sign up page where you can create a free account.

Native App vs Hybrid

The third option is to use the native player but build a unified HTML5 UI on top of it. This will limit your access to native functions and sensors, but by using the native player you will be able to achieve similar start up times and CPU usage which will go a long way towards solving most of your user experience and battery usage problems.
The following graphs show performance on iOS during playback. From these tests we can see that while there is a big difference between HTML5 player and the native player, the performance when comparing a native app vs hybrid solution is quite close to native both in terms of CPU usage and startup times.

Why would you want access to device sensors?

In 2018 the Bitmovin Player team developed a feature called “User Aware Adaptation”. This capability enables the player to adjust the way it delivers a video stream based on what the user does in the real world. In our standard demonstration we use video recognition software to monitor the user’s eyes as they watch the screen. When they look away from the screen the player switches to a lower bitrate stream, or even pauses the video. This is beneficial to both parties, saving bandwidth and reducing CDN costs for the provider, and avoiding the need to rewind a video for the end user.
Our demonstration is just one fairly obvious example of how device sensors can be used to enhance the video experience. As mobile app developers are well aware, the mobile experience is very different from the desktop experience. As the video industry matures, and user interfaces become more sophisticated, I am sure we will see more and more creative and useful ways to enhance the video experience by building true native applications.

Conclusion

At the end of the day, the difference between building an HTML5 player and reusing it across all devices and building a set of native applications is clear. Native applications are superior in every way, other than time and cost. A premium product will probably always need to be built as a native application, but if you are trying to deliver an MVP or a prototype to market quickly and cheaply, then an HTML5 player might be the way to go. And if you are willing to compromise some functionality, the Hybrid approach can deliver close to native performance
View James Demuxed presentation Here
Download our Video Player Datasheet

The post HTML5 Player Vs Native Player in App Development appeared first on Bitmovin.

When it comes to media, entertainment and technology, IBC is one of the world’s most influential shows . For us at Bitmovin, it is a great opportunity to demonstrate what our tech is capable of to a distinguished audience of industry experts.

If you are coming to IBC this year, then the Bitmovin Stand 14.G09 is definitely worth a visit. For this year’s event, we have prepared a showcase of our most recent tech stack – from AV1 and Per-Title to 3-pass encoding and server-side ad insertion, it’s all there!
To get personal demonstration of any of our products from one of our video delivery experts, just arrange a meeting.

Bitmovin Player v8: Enter modularity

The latest version of our player is here. The new modular structure allows you to customize the player with exactly the modules you’ll need. The new player comes with a reduced footprint while still offering the same rich set of features. This means that the same great player now loads super-fast. Loading times and startup times are make or break in terms of the user experience and the new player is an invaluable asset to deliver on a state-of-the-art UX. Our demo shows how you can slim down the player to only load selected modules – and you’ll be able to see how much faster it loads compared to the full codebase.

Integration of an AV1 end-to-end workflow

Following the AV1 bitstream freeze in March, Bitmovin is presenting a fully integrated end-to-end encoding workflow using AV1. The encoding requirements for AV1 are high, so it’s a definite candidate for our highly efficient cloud encoding solution. Requirements aside, the results are astounding, as you’ll no doubt be able to tell from checking out our AV1 demo. AV1 looks better than any other codec at low bitrates and offers tremendous potential to shape video delivery workflows in the near future.

Multi-Codec Streaming

Multi-codec streaming configurations are key drivers in establishing advanced codecs like AV1 on a broader scale. With our multi-codec workflow, we’re matching the user’s browser or device to the most efficient codec available. Users will get to view the best quality video at the lowest possible bitrate. For providers, this results in noticeable bandwidth savings, while still improving device compatibility. If the best codec (for example AV1) does not play on the device, the stream simply defaults back to the next best alternative (e.g. HEVC).

Containerized scalable encoding running anywhere

Efficient video encoding workflows form the backbone of any video delivery infrastructure. Our encoding demo illustrates our smart approach to encoding. Select the input file and an encoding profile and you’re good to go. Our encoding processes are easily scalable and can be hosted in the cloud or on premise. You’ll be able to see immediately how the different encoding profiles reflect on encoding times and quality by viewing key stats from the process, as well as the encoded video. We build our software-only encoders using state-of-the-art container technology so they run anywhere, including all major cloud providers (check out the demos for Google Cloud and AWS).

Analytics

Video Analytics are key to understanding your user base as well as to identifying advertising opportunities and possible delivery bottlenecks. That’s why we keep optimizing our analytics solution. You’ll be able to view our latest analytics dashboard and see how we envision leveraging powerful analytics into smart business decisions. Our dashboard makes key metrics visible and presentable, providing you with the insights you need to grow your business. Our API makes it possible to design your own dashboard and get a customized view tailored to your exact needs.

Server-side dynamic ad insertion

Bitmovin encoders and players have been capable of using server-side ad insertion for a while. We now have multiple integrations in leading ad servers. This results in undetectable playback of ads without risk of ad-blocker detection, effectively preventing losses in revenue from unseen ads. The insertion happens dynamically and can be triggered at the mere click of a button in our demo showcase, illustrating the use of HLS cue points to run ads.

Dolby Vision HDR

We have updated our Bitmovin encoders to support pristine Dolby Vision HDR, delivering cutting-edge pictures and an astounding visual experience featuring a depth of color which has been previously unknown to consumer-grade devices. The full experience can be enjoyed on Dolby Vision capable large screen TVs and other compatible devices.

Native Player SDKs

At Bitmovin, we understand that our solutions need to be a joy to work with for fellow developers, in order for our products to become as popular as we want them to be. That’s why we put an emphasis on creating great developer tools from the very start. Our range of Native Player SDKs has been growing consistently and allows for a flawless delivery of high quality video on practically any system. They run on Android, iOS, Android TV, tvOS and Fire OS and come with extensive APIs and events. Features like multi DRM support, multi codec streaming, HLS support and more make it easy to integrate our player anywhere.

Per-Title encoding

Using per-title encoding, the optimum encoding settings are derived based on predictions for each specific title. The demo shows how the process uses a preceding analysis of the input file to determine the best possible settings, before encoding the video. This results in a greater quality at lower bitrates. You can see for yourself by viewing the encoded video right on our demo page.

Other Demos at IBC

That is a few of the high profile demonstrations that we are promoting at IBC, but there are a lot of others on display. Per-Scene Adaptation is an interesting quality and efficiency optimization technique that involves delivering bitrate information to the player in advance, allowing it to make smarter adaptation decisions. We are also ready to give you a good look at our VR & 360 playback solution, Live to VoD and HEVC/HLS on iOS and MacOS.
Our research and development section offers some very exciting tech including:

• Tile Based Streaming –  optimizing 360 and VR streams
• Behavioural Playback – enabling the player to react to user behaviour
• Clientside Stream Enhancement – applying filters to your video on the client side to improve visual quality.

As well as that we offer a full range of monetization options including: DRM, Multi-DRM and our full range of client-side Advertising Solutions. We also have a partners section displaying many of the integrations that you can find in our software, including partners like: AWS, Google, Scality and YoSpace.

Meet us at IBC 2018 – Stand 14.G09

Our amazing experts will be on-site presenting Bitmovin solutions and sharing the depth of their expertise. See our tech stack in action to experience what state-of-the-art high-end video technology can look like.

The post Check out the Bitmovin Demo Showcase at the IBC Conference 2018! appeared first on Bitmovin.

Bitmovin, in combination with our partners Irdeto, hosted a webinar to present the common approaches to Digital Rights Management in 2018 and the changes coming to common workflows with CMAF. The following is a brief summary of the topics discussed and solutions that were presented.

An Overview of DRM

The webinar begins by anwering the question: What is DRM? In short, DRM is a technology designed to protect monetization models from copyright infringement and is a common requirement for many content providers. In essence it provides you the ability to control who and how people can consume your content.
DRM is a very fragmented technology. As with many other components in the video delivery workflow, a DRM solution needs to work across multiple platforms, browsers and devices. This has lead to the development of several different DRM technologies. As we discovered in last years video developer report, where we surveyed the video developer community, most content providers are using multiple DRM technologies. You can see this in the overlap in percentages in the graph below.

The most popular DRM technologies are Google Widevine, Microsoft PlayReady and Apple Fairplay. Each one has its own unique set of compatabilities and configurations. Google Widevine is compatible with systems like Android, Chrome and Firefox and supports DASH with CENCE. Apple Fairplay on the other hand is mainly compatible with Safari and Mac devices. Microsoft PlayReady has perhaps the broadest device coverage, as it includes consoles like Playstation and XBox as well as Edge and Internet Explorer. In the webinar recording you can listen to a detailed explanation of each of these technologies and how they often need to be combined into a multi-DRM solution. This section is presented by Bitmovin Solution Architect, Paul MacDougall.

How does DRM work?

DRM is an integrated part of the video workflow. After a video asset is ingested (sent to the encoding platform), it is encoded and then packaged. It is during the packaging process that the DRM encryption happens with media keys from one or more DRM servers. After packaging the adaptive bitrate streaming files are sent to storage and then streamed through a CDN to the end user application. This is where the encryption is detected, the license is checked and the video is unencrypted fore the user, or not, depending on whether the user is successfully authenticated. This workflow is explained in detail in the webinar by Juan Matinez, Senior Product Manager at Irdeto.

What is changing and what is happening next in DRM?

The webinar also goes into some detail about other recent changes in the DRM landscape such as CMAF and how that might make things easier. You will also hear about other modern applications of DRM technology such as offline DRM which allows the user to download a VoD video and play from their local drive without any risk of content theft.

What to learn more? The State of the Web 2018: DRM Whitepaper is a comprehensive explanation of Digital Rights Management giving you everything you need to build your DRM or Multi-DRM system, from encoding inputs through to playback.

The post DRM Webinar: Selecting and Implementing the Right Premium Content Protection appeared first on Bitmovin.

Our new online demo section showcases a great range of Bitmovin video delivery solutions for encoding, player and analytics.

The video demo section on or website has always ranked among our most popular content, and with good reason. Not only does it showcase our products, but many of our online demonstrations are useful development tools for testing and optimizing your own video workflow. Our new video infrastructure demos and code example section takes this to a whole new level, with big improvements on the existing demos along with completely new features and solutions on display.

What You Will Find in the Bitmovin Demos and Code Example Mini-Site

The first thing you will notice that is new in the new Video Demos and Code mini-site in that you can immediately sort by product using our product icons at the top of the page. This will make it easier for you to quickly find the specific solution that you are looking to test. The next thing you will notice is how long the list of demos are. We have covered many of our most popular features and solutions, and there are still more to come over the coming weeks and months. But enough talk, let’s jump in a go through each demo one at a time.

Stream Test for DASH, HLS and Progressive (Player)

This is one of our most used demonstrations. It allows you to test your own video files in the Bitmovin Player, simply by pasting the location of your manifest file and selecting the type of file it is. This is a great way to see firsthand just how good your videos will look in the Bitmovin Player in any browser and and any device, no plugins, fast startup.

• View the Bitmovin Player stream test demo
• Find out more about the Bitmovin Player
• Download the Player Now

Per-Title Encoding (Encoding)

Per-Title Encoding is a technique for optimizing the bitrate of your encoding profiles based on the content of the video that you are encoding. It offers exciting possibilities for quality optimization as well as bandwidth reduction. The online demonstration will show you a graph of bitrate savings as they play on the video next to it.

• View the Per-Title Encoding demo
• Read more in the Per-Title Encoding blog post

DRM Stream Test (Player)

Test your protected DRM stream live with the Bitmovin Player and get immediate insights into which DRM system and codecs are supported by your browser. This demo also includes code examples to show you how easy it is to integrate DRM into your video workflow with the Bitmovin Player.

• View the DRM stream test demo
• Find out more about DRM with Bitmovin
• Download the DRM Whitepaper

Server Side Ad Insertion (Encoding, Player)

Ad Blocking software has had a major impact on ad revenue across the entire video industry. Server-Side Ad Insertion offers a way to bypass Ad Blockers by splicing the advertising material directly into the video during the encoding phase. This makes ads virtually impossible to detect.

• View the Server-Side Ad Insertion demo 
• Download the Server-Side Ad Insertion datasheet
• Read more about Bypassing Ad Blockers

Per-Scene Adaptation (Encoding, Player)

Per-Scene offers another method to improve quality and or reduce bandwidth consumption by enabling the player to anticipate the required bitrate of an upcoming segment based on the visual complexity, and the human eyes ability to perceive it. This is achieved by analyzing the visual complexity of each segment within a video and feeding that data to the player in the form of meta data.

• View the Per-Scene Adaptation demo
• Read the Per-Scene Adaptation blog post

Native Player SDKs (Player)

Bitmovin’s Native SDKs give you everything you need to get your video playing anywhere, any device, any platform. The unified configuration, UI and API gives you a single point of control  across all the different platforms that you support, creating a consistent experience for your users, whichever device they use.

• View the Native SDK demo
• Read more about our SDKs

Ad Scheduling (Player)

This demo showcases the Bitmovin Player’s ad insertion capabilities. The player can be used with different advertising standards, namely VAST, VPAID, IMA and VMAP. Use the interactive features to adjust ad position and even connect your own ad server for testing.

• View the Ad Scheduling demo
• Learn more about video advertising with the Bitmovin advertising solutions!

Thumbnail seeking (Player)

Display thumbnails over the seek bar to show a preview of the video as the timeline is moved. This demonstration includes a working preview and code snippets so you can quickly implement thumbnail seeking into your own video streams.

• View the Tumbnail Seeking demo

Custom Adaptation (Player)

The adaptation logic in the player is the key to avoiding buffering and minimizing startup time. Custom adaptation is a feature that allows you to adjust the adaptation behavior to suit your specific customer base. This demo shows the adaptation as it happens in graph form, as well as code snippets to help you get started customizing your own player’s adaptation behavior.

• View the Custom Adaptation demo
• Read more about Custom Adaptation in your video player

VR & 360 Video (Player)

The Bitmovin Player was the first player on the market to achieve complete cross browser compatibility, and is still leading the way in features and performance. This working demo features keyboard controls and code examples.

• View the VR & 360 demo
• Learn about the 360 capabilities of the Bitmovin Player

Bitrate Ladder Validator (Analytics)

Build and customize graphs exactly the way your team needs it to help troubleshoot, optimize and plan your development efforts. Bitmovin Analytics is an API-controlled, developer-focused analytics system with all the versatility that a dynamic development team needs to help them hit their goals.

• View the Bitrate Validator demo
• Find out more about Bitmovin Analytics

UI Styling (Player)

A unified UI config ensures that your player will look the same, regardless of which device or platform it is rendered on. This demo includes some simple interactive color controls to change the user interface along with code examples showing you how to take your branding to the next level.

• View the UI styling demo
• Find out more about the Bitmovin Player

Variable Playback Speed (Player)

Bitmovin Player gives you the option to control the playback speed. This can be useful to speed up some content or slow it down if you need to focus on it or analyze it. Great for all types of sporting content and exciting action content. This demo shows the function in our player and includes code examples.

• View the Variable Playback Speed demo

Multiple Audio Tracks & Multiple Subtitles (Player)

Bitmovin supports multiple audio/language tracks, without the need of duplication or repackaging the video, either for live or on-demand content. This demo shows the code required to implement multiple audio and language options as well as a playable demo showing this feature in action.

• View the Multiple Audio and Language demo

Fast Channel Switching (Player)

This interactive video demo showcases the Bitmovin Player’s ability to switch between channels, quickly and seamlessly. Three channels are available with a display to show the exact time in milliseconds between the switch and the first frame hitting the player for each channel. The code examples on this page show the initial setup and the switch control.

• View the Fast Channel Switching demo

Impression Count (Analytics)

Querying the analytics engine to send specific metrics to your dashboard is what the Bitmovin Analytics system is all about. This code sample shows you how to Query the Analytics Impressions that occurred in the last 24 hours, grouped by hour.

• View the Analytics Impression Count code example
• Find out more about Bitmovin Analytics

Picture in Picture (Player)

Picture in picture is a great feature for screens with more content than just the video, or screens with multiple videos. See it in action as you scroll down the page on this demo screen. Complete with code examples with a range of configuration options.

• View the Picture in Picture demo

Chromeless Player (Player)

This player demo has been set up to autoplay without the use of a UI. The code example gives you the configuration settings required. This demo showcases how the Bitmovin Player can be controlled completely via the API.

• View the Chromeless Player demo

HLS Fragmented MP4 (Player)

This demo showcases HLS content using fragmented MP4 (fMP4) being played by the Bitmovin Player, bringing you the advantage of reducing storage cost by sharing the encoded segment between the HLS and the DASH manifest, which is supported by Bitmovin’s encoding service.

• View the HLS Fragmented MP4 demo

CEA-708 captions and styling (Player)

This demo shows the Bitmovin Player displaying a video with captions and offering all the controls necessary to be compliant with CEA-708. The demo includes a working player and code examples.

• View the CEA-708 captions and styling demo

Chromecast (Player)

The Chromecast Player allows you to cast directly from your device to your television screen using the Chromecast browser plugin and a Chromcast enabled display device. This demo shows the simple javascript configuration, and a player with the Chromecast button active and enabled.

• View the Chromecast demo

Multi-Codec Streaming (Encoding,Player)

By encoding in multiple codecs and dynamically switching between codecs based on the users individual playback environment, Multi-Codec Streaming offers another great opportunity to improve your QoE score by reducing buffering, improving quality and reducing bandwidth. In this demo you will see live a live graph displaying bandwidth savings as the video is played in the optimum codec for your browser.

• View the Multi-Codec Streaming demo
• Read our Multi-Codec Streaming blog post

AV1 Playback (Encoding, Player)

Bitmovin is spearheading the drive towards a commercially viable AV1 solution. We have already delivered the world’s first AV1 live stream and made huge inroads into reducing the CPU power required encode this next generation codec, which is promising improvements of over 30% when compared to HEVC. This demo required the Chrome Canary Browser.

• View the AV1 demo
• Find out more about Bitmovin and AV1

Encoding with Python and S3 (Encoding)

This working code example will create DASH on AWS with Python and write to S3. You can also access our Python API client on Github!

Modular Player (Player)

The Bitmovin Player is a modular player. This means that you can pick and choose between the different modules that you require for your specific use case, and minimize the size of the player. This versatility can make a big different in page load times as well as bandwidth usage. This demo is an interactive explanation of how the modular system works in the Bitmovin Player.

• View the Bitmovin Modular Player demo

The post 25 New and Improved Online Video Delivery Demos appeared first on Bitmovin.

Containerization has opened up new possibilities in performance and efficiency and is a perfect fit for video encoding

The difference between containerization and virtualization?

Server-side technology has been on a steep development curve over recent years, as architects and system engineers have worked to streamline and optimize their workflows, as well as improve the performance of their applications. Virtualization was one of the major breakthroughs on this curve and has now been a part of the IT landscape for a long time. By running multiple virtual machines (VMs) on a single server, each running its own operating system and staying independent from each other, IT departments have been able to better utilize their hardware resources and optimize their load management.
Containerization has taken virtualization one step further by allowing applications to run in dedicated environments that are in turn hosted by a common operating system kernel. By utilizing a shared OS kernel, containers are portable, light on resources and extremely scalable making them a much more powerful and versatile solution than VMs.

The main advantages of containers

The characteristics that make containers so easily portable, are the same characteristics that make them so perfect for modern cloud-based architecture.
First, each container runs without dependencies so the developer has complete control over the environment that their app runs in without being limited by an inflexible OS. Furthermore, this same independence ensures that the environment will be the same anywhere, whether it is deployed in the public cloud, on a private cloud or in the local test environment.
The fact that containers share an OS kernel makes them much smaller than a VM, which requires its own OS. This makes it very easy to scale containers across a cloud cluster, because they use fewer resources. It also makes them much more efficient in terms of CPU usage, memory and storage. All of this makes for a solution that is fast to initialize, quick to respond and most importantly scales massively in a matter of seconds.

Containerized Video Encoding

Linear vs Containerized

Before we start looking into containerized encoding, it is best to run through the linear approach that is employed by the majority of encoding services and systems. This approach is to input a video and simply crunch through the file from start to finish, writing each segment into the encoded profiles in chronological order. In our tests, encoding to a standard bitrate ladder, with FFMPEG or similar solutions on a 8-core machine, usually resulted in a 0.3x to 1x realtime factor.

The very nature of adaptive bitrate streaming makes it perfect for a containerized approach.

The key to exploiting the versatility and power of containers in a video encoding service is to scale horizontally. This horizontal scaling allows us to encode each segment separately which in turn makes it is possible to spread a single video file across multiple instances, and encode them simultaneously. The immediate effect of this is that the video encoding can be completed much faster simply by adding more containerized encoding instances. We have actually tracked up to 100x real time, but in addition to speed there are a number of other very important benefits to the containerized approach.

Advantages and Opportunities

By approaching the encoding process segment by segment, we can see that what was once a large process, has become a lot of very small processes. If we combine this with the opportunities that containerization presents, then we have the possibility to completely re-engineer the encoding workflow to much better meet the specific needs of a particular business model.

On-Prem, Cloud and Hybrid Cloud

Exploiting the massive resources that are available on the public cloud is just the beginning of the containerized encoding story. By using a true container based encoding service, it is possible to run the same environment in the public cloud, on a private cloud, or across both simultaneously. This creates a whole new level of resource management, where you no longer need to decide whether to run your service on-prem or in the cloud. The nature of the containerized system allows you to create a unified infrastructure that incorporates both zones within the same system. This allows you to switch between on-prem and public cloud as required. This might be because your on-prem hardware maxes out due to heavy demand and needs to push overflow to the public cloud, or it might be because you have sensitive data that needs to stay behind your firewall.

Utilizing Spot Instances

Spot instances are a great way to save money and have become a popular resource for many companies running processes in the cloud. Amazon has turned this into a market-driven system where you can actually bid your own price, and compete for available spot instances. The flipside of the lower price, is that reliability of your instance cannot be guaranteed. A higher bidder can take an instance away from you without notice. In a linear workflow this can lead to a complete loss of your encoding, forcing you to restart a job again from the beginning. But in a containerized workflow, losing one instance is almost insignificant. The interrupted segment is simply moved to another instance and the entire job continues without noticeable disruption.
Taking this a step further, it is even possible to mix and match instance types depending on how the spot market develops. The encoding coordinator, which is the instance that controls each encoding job and assigns segments to instances, can be placed on a higher cost instance to ensure that it remains stable. The worker instances, which is where the encodings actually happen, are interchangeable, so can placed on lower cost, higher risk instances. For example; If c4.2xlarge instances are in short supply on the spot market we could start the coordinator on a c4.xlarge instance and the workers on even bigger instance types (running less instances in turn). If we see the spot price drop for another instance type (c3.2xlarge for example) we can switch to these and decommission the more expensive nodes we’ve been using so far.

Security

A containerized encoding approach accommodates virtual private cloud (VPC) setups where customers can use their own accounts with AWS, Google Cloud Platform, Azure, etc. This provides companies the benefit of ensuring that media files never leave their VPC, while having all the features and scalability of a cloud-based SaaS encoding service. This is especially useful for sensitive content and highly secured workflows.

Hardware Agnostic

As explained previously, the nature of containerization makes it very easy to run on any standard hardware. In the case of video encoding, this is a game changer. Up until now companies looking to run video encoding processes on-prem have been required to invest heavily in dedicated hardware encoders. These hardware encoders are expensive to purchase and to maintain, often requiring a dedicated team to maintain them. On top of that, they are generally very inflexible and cannot be upgraded to cater to new technologies such as AV1. Containerized video encoding makes it possible to replace these dedicated boxes with standard servers. This not only allows companies to utilize their existing hardware infrastructure, but also to move the encoding process to a more standard tool set that can be incorporated into the rest of the IT team.

Speed, Agility and Flexibility

There are many situations where the speed of your encoder is important live streaming, user generated content, and bringing a large VOD library to market, to name just a few. But the most significant aspect of containerization is the ability to adapt to a situation. Every business is different, and requires a slightly different encoding solution. Furthermore, every business changes, and the requirements of an encoding system will also change over time.
Containerization creates a versatile solution, where encodings can be run on-prem, in the cloud, or spread across both. They can be moved in realtime between different zones (Private cloud, Amazon Cloud, Google Cloud etc.), to accommodate demand, security or any other specific requirements that might arise. The nature of the “controller – worker” relationship allows conditions to be built into the workflow to optimize the system on the fly, cutting costs and reducing errors. The possibilities of containerized encoding are endless.

About the Bitmovin Containerized Encoding Solution

When we released Bitmovin Containerized Encoding earlier this year, our goal was to enable our customers to benefit from our fast encoding speeds and flexible API, while at the same time being able to leverage your own existing infrastructures or cloud accounts. By being a managed solution that works through our Bitmovin API, we give you the flexibility to run your base workloads on your own infrastructure, while still being able to offload burst workloads to the cloud. This also adds redundancy to the encoding pipeline, as we use a multi-cloud approach to encoding to be vendor agnostic and infinitely scalable.
This approach allows you to build robust and reliable encoding workflows that can cope with any load while avoiding the pitfalls of over-provisioning or under-provisioning resources in advance, while still giving customers full control over their infrastructure.
To deliver on this goal we decided to base our solution on the open-source container orchestrator Kubernetes that can run virtually anywhere on bare metal and is natively supported by many major cloud vendors like Google, Microsoft, RedHat and IBM.
This also enabled us to streamline the setup process so our customers can get up and running very quickly without requiring lengthy systems integrations (besides a running Kubernetes cluster). Kubernetes enables us to manage all the compute resources required to run our high performance encoding engine on any hardware or cloud infrastructure.
For more information on optimizing your encoding workflow with containerized encoding contact our sales team.

• Learn the theories behind Netflix-Style optimization for quality and CDN Costs in our Per-Title Encoding WEBINAR

This article first appeared in the Streaming media Encoding SuperGuide

The post Containerized Video Encoding Definition: What is it and what are the advantages? appeared first on Bitmovin.

The Content Everywhere Hall is where you can find the engines that drive the video industry. Here’s a look back at what we saw in Hall 14 and what people were asking for at the Bitmovin stand.

IBC 2017 was an enormous event with some truly mind blowing technology on display. 14 halls, chock-full of the latest in entertainment, media and electronics ranging from the worlds most human-like robot to a paper thin 8K television screen that you can roll up and put in your pocket.
In our particular part of the video ecosystem, the Content Everywhere Hall, there was a visible increase in the number of visitors from previous years, which fits with the general trends that we have observed in 2017. As broadcasters and content providers work through the myriad of video delivery problems created by a rapidly changing environment, we see more and more of them moving toward flexible software defined solutions. The ability to adapt quickly to change in order to take advantage of opportunities and to ensure that their platforms stay up to date with the latest features, is becoming a priority for most engineers.
As it does every year, IBC gave us a wonderful opportunity for an up close look at our customers, partners and competitors alike. In an industry that is as dynamic as video, that means a lot of new technology, new products, new solutions and a chance to exchange ideas with the other developers at the forefront of our industry.
As always we arrived at IBC with a bag full of demonstrations and a strong team of solutions architects ready to put our latest products and features on display. The most popular theme this year seemed to be optimization. The feeling amongst our team was that the industry has moved beyond simply being excited that they can play video everywhere and anywhere. This is now expected. Now the goal for established content providers is to optimize the business model, and while advertising revenue is still a prominent theme, it was the potential cost savings in better utilizing codecs and improving workflows that seemed to be top of mind for many development teams. Below is a brief summary of some of the more commonly requested demonstrations from the Bitmovin stand at IBC 2017.

AV1 on Firefox with a 7x improvement in efficiency

AV1 is still a hot topic, and we were excited by the number of people who came to our booth just to see the demo. Despite the uncertainty around the exact date of the AV1 code freeze, we are in no doubt that this codec will be a major change in the game for many of our customers, which is why bringing it to a commercially viable offering continues to be a high priority for us. With that in mind, we demonstrated two significant achievements at IBC 2017. (Download our AV1 Datasheet)

The first was a significant improvement in encoding efficiency. Our original AV1 live stream required over 200 cores to deliver. Since then we have optimized the workflow and have it down to “just” 32 cores. There is still work to do, but this 7x improvement in efficiency has shown us that our end goal is definitely achievable.
The second big step was achieved with help from the Mozilla team. Our first demonstration ran on a player that was custom built for the purpose. This time we used our own Bitmovin Player, and delivered video directly into the Firefox browser. Both of these achievements are significant steps towards making AV1 a commercial reality. (Watch our Webinar: An Introduction to AV1)

Bandwidth savings to reduce CDN costs and improve quality

Now that most of us are reliably delivering high quality experiences to every device, it is relatively straight forward for our developers to keep our customer’s customers happy. Much of the focus has moved to reducing operational costs, while maintaining the same Quality of Experience (QoE). One of the obvious targets for cost cutting is bandwidth usage.

Per Title Encoding

Per Title Encoding is an extra step in the encoding process, where each video asset is passed through a complexity analysis to determine the bitrate level required to deliver the video at an acceptable visual quality. The data from the analysis is passed to the encoders configuration, which then adjusts the bitrate ladder before the encoding process begins. In many cases this will result in a significantly smaller bitrate in the final encoding, which translates directly into bandwidth savings, and a smaller CDN bill. This can be especially effective in videos with limited colour and tone variations, such as cartoons. Conversely, you could also use the same process to increase the bitrate ladder to maintain quality in more complex videos like sports streams.

Per Title Encoding Workflow

Multi Codec Streaming

Another option to reduce bandwidth usage is by dynamically adjusting the codec that you stream based on each user’s device. By encoding HEVC and VP9 in addition to H.264, you can ensure that you are streaming the lowest bitrate possible at all times. VP9 will be streamed to Firefox and Chrome users, while HEVC will be streamed to Safari and Edge users. This technique can save up to 50% on your bandwidth usage, so it’s no surprise that it was a hot topic at IBC.

Unified Video Players

Another pain point with many of our visitors was the difficulty in maintaining multiple players. This is usually because a number of applications are running on a number of different platforms, each one requiring a different player solution. Mobile apps running on iOS and Android are common examples, but smart TVs and Set Top Boxes are also common. Our recently released native SDKs offer a single, unified player configuration and API across all platforms, which greatly reduces the work required to maintain a consistent user experience across all of your applications. This delivers a significant reduction in integration and maintenance time.

Social events

Happily IBC 2017 was not all work and no play. Bitmovin continued a proud tradition of contributing to the fun, and sponsored three cool parties at IBC. The first was on Friday night in combination with Fastly, Vigour and Peer5 where we enjoyed some incredible Hors d’oeuvres and had a chance to release our Video Developer Report for the first time. Saturday evening we hosted a happy hour at our booth with the help of our partners Irdeto and on Sunday we continued our tradition of supporting the DASH Industry Forum as a gold sponsor at their regular reception.

Our newly published Video Developer Survey was a big hit at every event. It contains some interesting insights into current technology usage as well as planned usage moving into 2018, and  reveals quite a few surprising trends. If you didn’t have a chance to read our video developer report, you can still get a digital copy by clicking the button below.

The post A Constantly Evolving Video Landscape on Display at IBC 2017 appeared first on Bitmovin.

This blog post will show you how to integrate the Bitmovin Adaptive Streaming Player with Google Analytics.

For most commercial websites, Google Analytics is a must have. It is easy to install, and provides great insights into page views, traffic sources, user behaviour, user technology, goal conversions and much, much more. But when it comes to video, it is not very effective. User activity inside the video player is not reported, which leaves a significant blind spot for video publishers.

With just a few simple Javascript calls, you can integrate your Bitmovin Player with the Google Analytics system, and start seeing what is happening under the hood of your video platform.

It’s all About Metrics

The argument for using analytics for video is essentially the same as analytics for any other online vertical: By better understanding how your customers are using your website or app, you can optimize their experience and /or modify their behaviour, usually with the end goal of maximizing your revenue. In the case of video, to gain an understanding of how and why a visitor reacts in a particular way to your video, you will need insight into how your users are interacting with your video player.

What can you Track?

As with all of our products, the Bitmovin Player is build for developers, and so it is quite straightforward to set up tracking events. Here are 5 examples of common events that will occur regularly in most online video scenarios, that are will deliver valuable data.

Play

The ON_PLAY event fires every time someone clicks the play button. This is obviously an easy way to track how many people watch a particular video, but it can also be used in combination with other metrics to gain a deeper understanding of the user experience.
For example, you might find that a page with a video has thousands of page views, but very few ON_PLAY events. This might suggest that the video does not look interesting enough. If this is happening you might consider replacing the poster image.

Conversely the player’s ON_PLAY event might seem to be happening too often. Perhaps your video is frequently buffering, causing frustrated viewers to hit STOP then PLAY repeatedly, in an attempt to view the content.

Pause

A metric to show you how many times a video is paused might be useful to measure engagement in the case of presentation, where users might be pausing the video to read the notes. Or it might be a sign that the video is not maintaining the viewers attention, and users are pausing as they search for other content. By combining the PLAY and PAUSE metrics, you could quickly find out which of the two possibilities is the reality.

Playback Finished

ON_PLAYBACK_FINISHED is a very useful metric. This can show you how many times a video was played through the the end. In combination with ON_PLAY you can quickly get an idea of how engaging a particular piece of content is.

Ad Click

Engagement with advertisements is obviously of huge importance to many content providers, and the ON_AD_CLICKED event will provide great insights into that. This is not only useful for reporting on the success of any particular ad, but can also be used to optimize and align ad content with video content.

Quality Change

In some cases you may find that the quality of a video is affecting the engagement, and a high frequency of quality changes might signal that there is a problem. ON_VIDEO_PLAYBACK_QUALITY_CHANGED will fire a trackable event every time that a user manually, or the player automatically changes the quality of the video.

The options listed above are just a few of the potential events that you can set up with google Analytics. The Bitmovin Player allows you to track almost every possible interaction that a user might have, as well as things that might be bi-products of a “user action” such as errors. You can find a full list of events under the events menu in our video player API documentation.

Advanced Analytics Options

While Google Analytics provides a very powerful set of analytics features, it is not designed specifically as a video analytics platform, and therefore will not deliver the type of information required for a comprehensive video analytics solution.

Part of the difference between regular web analytics and video analytics is the dimension of time and how it relates to the events that occur in your player. A good example of this is buffering. By combining the events ON_STALL_STARTED and ON_STALL_ENDED in a more advanced video analytics platform, you can start to build a picture of how often your videos are buffering, and for how long. With that information you can optimize your encoding profiles, or even implement more advanced adaptation techniques, such as Per-Scene Adaptation, to better serve your audience and improve the user experience across all your video offerings.

To address the advanced needs for Analytics tools in the online video domain, Bitmovin has developed a dedicated analytics product. The Bitmovin Analytics solution is an advanced, developer focussed tool that allows the collection, combination and presentation of data to be completely customized to suit your business needs. Some of the other advantages include:

• Monitor load times, buffering, adaptation behavior
• Easily investigate how users are watching your content
• REST-API to query your raw data and combine it with data from other sources
• Analyze individual sessions for debugging
• Designed for adaptive streaming (HLS and MPEG-DASH)
• A/B testing support
• Create webhooks and notifications
• Custom fields and dimensions for filters
• Integrates easily into existing workflows

You can request a free demonstration of Bitmovin Analytics by contacting our solutions team.

Setting up Google Analytics

The first step to integrating Google Analytics with the Bitmovin player is to create your Google Analytics (GA) account by navigating to https://analytics.google.com This is a simple process and you can use your existing Google/Gmail account.

After you have created your GA account, you’ll want to locate your analytics ID, e.g. UA-XXXXXXXX-X, and make note of it as the Bitmovin Player will use this ID when sending data to your GA account.

The next step is to add the Google Analytics tracking code to the header of your website. That will allow Google to start tracking user activity on your site. Simply copy the code below, replacing the UA-XXXXXXXX-X with your unique tracking code and paste this code snippet inside the HEAD tag of your website, or just before the tag at the bottom.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script>
        //Google Analytics Code
        (function(i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function() {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
        ga('create', 'UA-XXXXXXXX-X', 'auto');
        ga('send', 'pageview');
    </script>

Installing the Bitmovin Player

The Bitmovin Player is very easy to install and configure. The first step is to create a Bitmovin account, and sign into our backend portal. Once you are logged in, navigate to the Player / Overview page and add your URL (The domain on which the Player will be visible). On the same page, copy your license key.

Next navigate the the embed page, where you will find the code required to run the Bitmovin player on your own HTML pages.

Connecting the Player with Analytics

Once your player is installed, adding the event handlers to trigger analytics by incorporating the ga send command into the player.addEventHandler function. The ga send command can be formatted like this:

ga('send', {
  hitType: 'event',
  eventCategory: 'Video',
  eventAction: 'play',
  eventLabel: 'cats.mp4'
});

The following example shows how you can add a single event handler, in this case ON_PLAY. We have added our own type, category, action and label so we can identify the event when we look for it in Google Analytics.

player.addEventHandler(bitmovin.player.EVENT.ON_PLAY, function(data) {
    ga('send', 'event', 'GA Video test', ‘onPlay’, 'Bitmovin Player');
});

Catching Every Event

Another alternative is to instruct the player to send all of the available events to your google analytics account. The following code shows you the complete configuration that should sit inside the BODY tags of your website, including the analytics tracking code. (Note that in addition to this, a javascript call is required in the header of your page to call the player. See documentation.)

<div id="player"></div>
<script type="text/javascript">
    var getCurrentSource = function () {
        var streamType = player.getStreamType();
        var source = player.getConfig().source;
        switch (streamType) {
            case 'dash':
                return source.dash;
                break;
            case 'hls':
                return source.hls;
                break;
            case 'progressive':
                return source.progressive;
                break;
            default:
                return '';
        }
    };
    var conf = {
        key: "API-KEY",
        source: {
            dash: "//bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd",
            hls: "//bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8",
            progressive: "//bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4",
            poster: "//bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg"
        }
    };
    var eventCategory = 'GA Video test';
    var ignoredEvents = ['onReady', 'onTimeChanged'];
    var player = bitmovin.player("player");
    player.setup(conf).then(function (value) {
        ga('send', {
            hitType: 'event',
            eventCategory: eventCategory,
            eventAction: 'onReady',
            eventLabel: getCurrentSource()
        });
        console.log("Successfully created bitmovin player instance");
        for (event in player.EVENT) {
            if (JSON.stringify(ignoredEvents).indexOf(player.EVENT[event]) == -1) {
                player.addEventHandler(player.EVENT[event], function (data) {
                    ga('send', {
                        hitType: 'event',
                        eventCategory: eventCategory,
                        eventAction: data.type || player.EVENT[event],
                        eventLabel: JSON.stringify(data)
                    });
                });
            }
        }
    }, function (reason) {
        // Error!
        console.log("Error while creating bitmovin player instance", reason);
    });
</script>

Data Visualization

In the screenshot at the top of this blog post we show data coming into Google Analytics in real time, directly from our test player. In this case we are reporting on all available events, so there is a long list.

In addition to live metrics, your events will be captured and stored in the same way GA organizes all your other events, and you will be able to look back and analyse the results in relation to all of the usual segments and channels.

Conclusion

Google Analytics is a great tool for monitoring your website traffic and is certainly the best free offering on the internet. This tutorial has shown how you can also use it to deliver basic information about how your visitors are interacting with your video player. It should be remembered that GA is not designed specifically to integrate with video platforms, and while the data is useful, it is far from complete or easy to interpret.

To gain a better understanding in more complex video scenarios (e.g., ad-driven applications, adaptive streaming based offerings, etc.) Bitmovin offers a dedicated Analytics solution. This developer focussed solution can be customised to meet your specific business needs and aims to improve viewer experience and spot errors quickly. If you would like additional information regarding the Bitmovin analytics solution please feel free to reach out to our sales team.

• High End Video Analytics Straight out of the Box
• Bitmovin Analytics Datasheet

The post Simple User Tracking with Bitmovin’s Adaptive Streaming Player and Google Analytics appeared first on Bitmovin.

As an online video provider, your player is a huge part of your product. It facilitates and enhances the user experience, and like a good basketball referee, if it does a good job, no-one thinks about it. If it does a bad job, then the complaints will never end.

With the recent developments in HTML5 and a universal move away from Flash and other third party plugins, we have seen some big steps towards improving cross-browser compatibility. In fact, with these improvements, specifically in HTML5 video browser support, when it comes to simply playing a video, it has never been easier. In a few lines of code, the <video> tag will allow you to play a video in every major browser and across almost every platform.
The problem is that there is a lot more to playing a video than just,… well, making it play…
But at the same time video has become easier, the industry around it has become more complicated and the peripheral requirements for delivering video have increased both in number and in complexity. Consumers have come to expect higher and higher quality video, advertising has become more complex, content creators have demanded better protection and regulators have demanded better accessibility).

Minimum requirements and feature list for a modern HTML5 Video Player

With all of the demands on your video platform, the list of requirements that your player needs to meet is growing, and the solutions that need to be implemented can require a considerable investment in time and money, not only in development, but also in ongoing QA testing and maintenance. The following paragraphs will take you through anatomy of an HTML5 player, and discuss some of the challenges you will face as you build it.

Why HTML5?

As the title of this blog post suggests, HTML5 is not optional. The days of forcing the viewer to download plugins is well and truly over. HTML5 is the environment in which your video player will operate, and it will form the building blocks of your player.

Adaptive Streaming in an HTML5 Player

Arguably the largest contributing factor to the recent growth of online video has been the adoption of adaptive streaming technologies. Adaptive Streaming has greatly improved the online video experience by allowing each individual device to control the size and bitrate of the video it streams. The result has been videos that play smoothly without interruptions or “buffering”.
In 2012 the MPEG-DASH standard was published as ISO/IEC 23009-1:2012 by the Moving Pictures Expert Group. Many of the world’s leading experts in adaptive streaming technology contributed to the project, including Bitmovin, and it’s release has greatly accelerated the uptake of online video by making adaptive video much more accessible. Netflix and Youtube were amongst the first to exploit this new standard.

Adaptation logic

The technology that allows a website to play an adaptive video is broken into two parts. The first are the video files themselves, which are created by your encoding service. The second is the adaptive logic that is built into your video player. This adaptive logic can be written in a variety of different ways to achieve the same goal, but the basic function is as follows:

1. Monitor the rate at which the video is being downloaded to the player.
2. If the video is coming down too slowly, switch to a smaller video file to avoid buffering.
3. If the video is coming down too fast, switch to a larger video file to improve the quality.

A well coded player will keep the video playing regardless of the user’s internet connection or screen size. This can be achieved by monitoring the download speed or by monitoring the size of the buffer. The Bitmovin Player uses the latter because it has proven much more reliable.
The adaptation logic is also subject of extensive research and many scientific papers are available including these two from FESTIVE and PANDA.

Branding and styling the interface

Your video player is likely to be the most important touch point with your customer and as such, it needs to represent your brand. Furthermore it will need to have a skin that can be updated when required, either with a logo revision, or colour changes, or even a special promotion. These updates require control over the colours, icons, fonts, as well as the way the control panels behave as they are adjusted.
Over the last few years accessibility regulations have become tighter in many countries, and this has driven the need to create more comprehensive player skins, to provide more control to users. Multi-language, subtitles, Closed Captioning and 360° video settings are just a few of the functions that your player’s skin will need to accommodate to serve a US or international market.

Ad control

Advertising is a very important part of online video. Whether you are generating revenue by displaying ads, or just advertising your other videos, the ability to integrate a variety of advertising options is a must. Pre- roll, mid-roll, post roll and interactive ads with the option for a “skip ad” button are very common at the moment. In the future there are likely to be new trends that  your player will need to support to keep your business competitive.
Depending on your business model, your player might need to support a number of advertising standards such as VAST and VPAID. This will require both backend integration and front end design to display the various outputs and options that these systems can generate.

DRM and multi DRM

Digital Rights Management (DRM) has become a large part of the video landscape because it is required by just about every major content provider. One of the biggest challenges in DRM is that there is very little standardization between the different browsers.
To deliver MPEG-DASH and HLS adaptive video to every browser, you will need to encode your video with multi-DRM encryption using a combination of technologies such as; Google Widevine, Microsoft PlayReady, Adobe Primetime, AES-128 or Apple FairPlay. Before playback, your player will need to de-encrypt those files by exchanging license keys with your DRM provider.
Luckily this process has been somewhat simplified by a number of DRM providers who are offering services that combine multiple DRM technologies on the license server side, but your player will still need to be aware of the different DRM systems, check what’s supported in the current browser, choose the right system, communicate the license service in the DRM system-specific protocol, accept those keys and run the decryption for each technology.
The main challenge here will be maintenance. With so many DRM technologies required to deliver complete browser coverage, keeping them all up to date is a challenge, and will be a considerable part of the budget you will need allocate to your player team. (WEBINAR: DRM Basics with Irdeto & Bitmovin)

CC, Subtitles and languages (multi-audio)

Many online videos support closed captioning, subtitles or offer multiple languages. This is being driven in part by accessibility laws, and in part by user demand. In the vast majority of cases, a new online video player should support all three. The solutions behind achieving these important features revolve around your player having the ability to switch between audio tracks in the case of multiple languages, and for subtitle and closed captions, support for reading, synchronising with and switching between a data stream such as CEA-608/708 or other closed captioning standards.
These systems are already fairly well established and documented, so once they are set up, they will not require maintenance to the same level as DRM, but browser updates will always need monitoring and testing.

Analytics

As a commercial enterprise, or even as a well run community or volunteer organization, you need to give some thought to how you are going to guide your business, at least to some extend, by the feedback you get from your customers. One of the easiest ways to do this is to implement a good analytics system into your player, so you can see how and where your product is being viewed.
Analytics can be implemented via a number of third party systems, or you could attempt to build your own. As a minimum you should be able to see the browser and operating system that your visitors are using, and a good analytics system will provide geo location, average play times,information about the video profiles that are being played and more.
A comprehensive analytics system will become an invaluable part of your business planning. It will help you to keep your customers happy and also give you the information you need to optimize your encoding stack and reduce costs.  

API

To create a genuinely manageable solution, your player will need an API. Some of the benefits of an API include speeding up the implementation of front end features, simplifying your project by providing a framework for future development.

Cool features like thumbnail seeking

There are a number of other features that you should consider implementing just to keep up with modern standards. Thumbnail seeking is close to the top of this list because it provides such a visual and useful method for searching through a video files.
Some other features that you might consider include:

• Hotkeys
• Google ChromeCast and Apple AirPlay support
• Playlists
• Variable playback speeds

VR and 360° controls, and whatever comes next

VR and 360° video is a fast growing industry, so supporting the basic stereo and mono 360° settings are advisable, but it is still such a young technology that it is hard to tell which direction the industry might go. 360° video may well drive us down a new branch of encoding technology, which in turn could force us all the rebuild or at least modify our video players.
VR and 360° is the hot topic at the moment, but there are many facets behind the  technology of video, as outlined in the paragraphs above. Anyone of them could be revolutionized at any minute, so the future proofing of your video player will require constant monitoring of trends, and a team with the depth of knowledge to keep you cutting edge.

Browser support

As mentioned at the beginning of the article, browsers are generally getting better at supporting HTML5, so in some regards things are getting easier, but there are a lot of components in your player that are not built in HTML.
Every browser release poses a threat to your players ability to function, which in turn creates the potential to lose customers. Part of maintaining your own HTML5 player is constant testing. To make this easier, all of the major browsers provide pre-release beta versions that allow you to stay ahead of the game. By being vigilant it is possible to avoid train wrecks, but it requires a lot of regular work, and resources will need to be committed to this process.
Here are links to the pre-release browser versions for two of the major browsers. These packages can be used to test your player before the next release of each browser.
https://www.mozilla.org/en-US/firefox/channel/desktop/
https://www.chromium.org/getting-involved/dev-channel

Cross-browser streaming technologies

A player that can play MPEG-DASH and HLS can deliver complete browser support across all devices, so these two technologies are the two that I would suggest you plan to support.
Another recent announcement from Apple has made it possible to play fragmented MP4 in HLS. This opens up the possibility of encoding your videos into Fragmented MP4 and simply offering the two manifest files, DASH and HLS to achieve complete coverage. This option could theoretically half your encoding costs by removing the need to encode into HLS.

Using an Open Source HTML5 Player

Using an open source player can offer you a huge shortcut to getting your player up and running. In most cases you start with a working product, and in a best case scenario, you have a team of developers keeping it up to date for you. If you are a community organisation, or have a group of volunteers or students driving your development team, then it might be a perfect fit, as it will provide a central code base and help you to deal with the likelihood of needing to find new developers on a regular basis.
As a commercial enterprise, there are some major pitfalls, and I would strongly recommend against attempting to build a business on an open source player. I will explain my reasoning below.

Open source should be an all or nothing decision

Open source, all the way or not at all

If you are going down the open source path, then you need to go all the way, meaning that you become a contributor to the project. As you modify your player and add to the code base, you should feed your work back into the project. Apart from the good karma, this will hopefully ensure that your work will be supported by future updates in the open source player project.
On the other hand, if you take an open source project and work on it in isolation (I.e. do not feed your work back into the project), there is the likelihood that the open source project eventually creates an update leaves you with features, or even an entire player that is no longer compatible with the core project. This can leave you open to security vulnerabilities and errors that may be very difficult to troubleshoot.
If you decide to contribute your changes back, it is still possible that the community rejects your updates because it wants to move in a different direction. If this happens, it will result in rejected pull requests and you will be forced to choose between sticking with your code or reverting to a solution that works within the communities code. Depending on your choice at this point, you will either waste a lot of development time, or move to an unsupported situation and probably need to increase the size of your development team.

Maintaining the systems

Once the system is build, maintenance and enhancements are going to be the name of the game. Each of the components that I have mentioned above will require constant monitoring and regular updates, some much more often than others. The QA / testing process is a very resource intensive part of the process, and
DRM for example is one of the more complicated parts of the puzzle because it has a lot of different technologies, and to be completely cross-browser compatible, you need to be using several systems. Other components, such as ad servers tend to change when new ad technologies are developed. Interactive ads are all the rage at the moment, and when they hit the market, every commercial player on the market rushed to develop a solution to support it.
At this time in history, online video is one of the fastest moving industries on the web. We are a long way from settling into a standard set of technologies, so building a commercial online video player is an enormous endeavour, that will require a considerable investment.

Outsourcing your HTML5 Player – Fixed costs vs cost per sale

Development and maintenance of an HML5 player is significant investment, and will obviously create significant fixed costs for your business.  An alternative to managing your HTML5 Player inhouse is to use a player that is hosted externally. An example of this is the Bitmovin player that runs from a JavaScript library that is completely hosted and maintained by the Bitmovin Player team. Installing the player is easy, and all of the maintenance and development is taken care of for you.
For the majority of business models this is by far the most cost effective solution. An externally hosted player will charge on impressions. As your customer base grows, you will generate more revenue via ads or subscriptions. This aligns your expenditure with your revenue, so you can easily predict and manage your cash flow. It effectively replaces your fixed costs with a “cost per sale” equation.
Find out more about removing the costs of Player development and improving the quality of your HTML5 Player and Customer experience by contacting our team for a demonstration or by testing our player with a fully featured free plan.
You might be also interested in one of the following articles:

• HTML5 Guide for Broadcasters: DRM and Advertising in a Flash-Less World
• HTML5 Video Player – Build vs Open Source vs Hosted

The post HTML5 Video Player – Build vs Open Source Vs Hosted appeared first on Bitmovin.

The Video Player is one of the most important parts of your content delivery chain. It is critical that your player is ready to meet every single challenge that your users throw at it.

This is a list of 10 things you should check before deciding which player to integrate into your video infrastructure.

1. Is it cross-browser compatible?

Perhaps the most important item on this list is browser compatibility and HTML5 video browser support. There are many different browsers, running on a variety of operating systems and devices. The interface between your users and your content is the player. You need to be sure that you are using a player designed to work on every browser.
To achieve true cross browser compatibility the player will need to play more than just one type of adaptive stream. The two most popular formats are HLS and MPEG-DASH. By encoding your content to both of those standards you can cover all browsers, so it is very important that your player can play both.

2. Does it Rely on third party plugins?

Many video players rely on users to install third party plugins such as Flash or Silverlight to play their content. This is definitely to be avoided! As HTML5 becomes more widely supported, most of the major browsers are moving to a pure HTML5 solution, and your player should definitely be built with this in mind. However, because there are still some cases where Flash is the only option, the player should also provide a fallback solution for legacy devices.
It looks quite certain that the future of online video is HTML5, so it is highly recommended to use an HTML5 Video Player from the start.
Read this post to learn more about the movement towards a plugin free video industry and the replacement of Flash.

3. Which formats does the player support?

Playing video on any browser is more than just finding the right player. As mentioned in the first point, to play video in all browsers on all devices it is necessary to have at least two types of content ready. HLS for iOS devices and MPEG-DASH for pretty much everything else. But just playing the video is nowhere near enough. Every point that I have listed in this article needs to be supported across both formats to guarantee that you do not box yourself into a corner by choosing a player with limitations.
Supporting both of these formats requires a player that is kept up to date. As we have just seen with Apples recent announcement that HLS now supports fragmented MP4, things are constantly changing, so you need to ensure that your player not only supports the two major formats, but will continue to upgrade it’s support as standards change.
More information on encoding for MPEG DASH and HLS.

• Guide to MPEG-DASH & HLS encoding.
• This page explains MPEG-DASH browser support in more detail.

4. How well does it avoid buffering?

The main job of an adaptive streaming player is to ensure that the video plays at the highest possible quality. As bandwidth conditions change the player needs to adjust the stream to avoid the video pausing while the buffer is loaded (“buffering”). The “adaption logic” is the set of rules that the player uses to make these adjustments.
Read more about setting up an adaptive bitrate streaming workflow.
Different players use different logic, and some are much better than others. Some players measure the speed at which each segment is being downloaded, while others measure the size of the buffer (the video that has already downloaded and is ready to play), and adjusts the download rate to ensure an appropriate buffer size is maintained. The logic that the player uses to manage this is critical to ensure that the video is always playing at the highest possible quality.
Using a player with poor adaptation logic can lead to poor performance and buffering videos, which will inevitably lead to users switching off.

5. Easy to install and update?

Obviously installing your player is an important part of the job, and should be as easy as possible. Another very important consideration is the maintenance of the player. Because the industry is moving so fast, any player you use will need to be updated regularly if it is to continue playing video at a commercially competitive standard.
In most scenarios, a good solution to the challenge of upgrading is to use an externally hosted JavaScript player. This type of setup is very easy to install, and the player provider can upgrade the player automatically without you needing to do anything. However, in some cases it might be beneficial to stay at a fixed player version and test updates in a staging environment beforehand.
Obviously the best course of action is to use a player with both of these options available. The Bitmovin Player is just such a player. One can either use the CDN hosted player, or download the files to a in-house or third party server. Furthermore, updates can be received automatically, or you can opt to use a dedicated version.
More information about the available options, can be found in our online documentation.

6. Is it ready to handle subtitles, closed captions and multiple audio tracks?

Broadcast television has been offering assistance to help people who have difficulty seeing or hearing for years. These systems are also very important for online video.
Subtitles allow viewers to read the dialogue along with the voice track. Closed captions do the same, but include the entire audio track, and so provide the user more audio information in the form of descriptions. (E.g. “Dog barks”, “Door slams”).
As well as additional captions and text, many videos come with multiple soundtracks to accommodate different languages or to assist visually impaired users with more descriptive audio. (Often used in sports commentary tracks).
A correctly configured video manifest will contain the information regarding the various audio tracks available. (E.g. English, French or German). The player should detect this, and automatically add these options to the user interface. The player should also allow additional tracks to be added to its configuration so it can synchronize and enable captioning and subtitles.

7. How well does it support live streaming?

Every player on the market will allow you to play on demand as well as live streaming video, but when it comes to live streaming, all players are definitely not created equal. DVR support for example is a feature that is not available everywhere, but makes the video a lot more user friendly by allowing the viewer to move back and forth through the livestream.
You can see an example of Live-Streaming with enabled DVR in our Demo Area. The movie is being broadcast (as if it was on television) so you can watch it live, or scroll back and forth through the stream as you wish and pause the stream whenever desired.

8. Does it support DRM?

One of the big topics in online video is Digital Rights Management. If you are ever planning to stream a video provided to you from another publisher, or if you intent to protect your own content, then your player will need to support a variety of DRM systems.
This raises the browser compatibility issue again, as different browsers rely on different encryption methods. To be completely cross-browser compatible and to ensure you are covered for an
y future requirements your player should support Widevine, Playready, Fairplay, as well as Primetime. Furthermore, a good player will also -support multi-DRM options. (Download our DRM Whitepaper)
Learn more in our DRM Setup guide.

9. Is it ready to handle 360° playback?

360° videos are becoming hugely popular, and as 360° cameras become cheaper and easier to use 360° will continue to grow in popularity.
360° videos are by nature, much larger than normal videos, and therefore the adaptive logic behind the player becomes even more important. A player ready for 360° videos needs to be both MPEG-DASH and HLS compatible, and have sound adaptive logic allowing it to switch quickly and smoothly between different streams, to avoid buffering.

10. Can you customize the look and feel of the HTML5 web player?

Adjusting the skin of your player is a must for just about any video provider. To future proof your video portal you should be sure that your player can be completely customized, not just “re-branded”.
A good player will allow you to update the logo, play button, background colors, all of the icons, all of the controls. If fact every aspect of the player’s visual appearance should be completely editable. You can see an example of a fully customizable player in our player skinning tutorial, complete with skinning tool.

11. Can the player interact with your application and third party services, like analytics?

For the long term success of your online business, this may be the most important point of all. As your business grows, and more and more visitors watch your videos, your platform will inevitably need to grow with it. Your video player will need to work with your system, not the other way around, to ensure that you have complete control over the direction of this growth.

The player you use should have a well built API that is easy to set up, and is flexible enough that it fits to your business model.

Analytics and reporting, delivering player status to your back end application and allowing you to integrate video playback commands into side navigation are just some of the features you may need as you move forward. Predicting the future is always difficult, but whether you can foresee these needs or not, choosing a player with a flexible, well maintained and well documented API will give you the security of knowing that you will never run into a development dead end with your platform.
More information on video player APIs

• Read more about our HTML5 player API 
• Video player analytics example

A final thought on choosing the right player

As they say, “Failing to plan, is planning to fail”. For your online video system to be successful, you need to be ready for success, which means being ready to grow, ready to meet changing customer needs and ready to deal with a changing technology landscape.
Obviously the Bitmovin Player is one of the HTML5 adaptive streaming players that you should consider. Our player is truly state of the art, and our team is improving it every single day. Bitmovin’s founders were instrumental in helping the Moving Picture Experts Group (MPEG) to develop the MPEG-DASH standard, and they have a very clear vision, not only for Bitmovin, but also for adaptive streaming technology standards and the surrounding technologies in general.
You can install the Bitmovin Player and use it with all features for free by signing up to our FREE plan.
This account will also give you access to our cloud encoding service.

The post 11 Things Your HTML5 Web Player Must Have! appeared first on Bitmovin.

Thanks to MOZVR and their A-Frame JavaScript framework, you can now create a completely immersive web experience in standard web browsers.

Usually when you think Virtual Reality or 360° you expect to open a video or some sort of software application. Thanks to MozVR’s A-FRAME, the internet is now available in Virtual Reality format, which means you can enter a virtual reality environment simply by opening a normal website.

An HTML5/JavaScript VR Environment

Imagine creating a virtual cinema for your video portal. Allow users to “walk” through the foyer, browsing film posters and viewing trailers right on the wall. Once the user selects a film to watch, she can walk into the cinema, maybe even choose the best seat, before sitting down to watch the film on an enormous cinema screen.
Obviously this sort of immersive experience is easy enough to create (if you have the skills) in a host of Virtual Reality software environments and computer game frameworks, but up until now, not in a normal web browser.
MOZVR and their new A-FRAME framework is changing all that. It is now relatively simple to create a three dimensional environment that loads directly into the user’s browser without any interruption to their experience. A smooth transition from online browsing to VR.
Looking ahead a little further, the steady push towards HTML5 compliance from all the major browsers means that it is becoming relatively easy to embed an HTML5 VR player or an html5 360 video player within the HTML5 VR environment. Theoretically you could embed VR movies and experiences within your web based VR cinema environment and create a browser based “Virtual VR cinema.”

VR Browser Demo

We have created a very simple demonstration to show how easy it is to get started with Virtual Reality in HTML5 and JavaScript. This demo contains less than 40 lines of code in one HTML file. It links to the a-frame.js JavaScript file and to two images. You can enter the VR environment simply by following the link below. Control your position and view using your mouse and the W,A,S and D keys on your keyboard.

Getting Started with Browser Based Virtual Reality Technology

Aframe is a JavaScript framework for building 3 dimensional environments within the browser. It wraps three.js and WebGL into HTML elements, creating an insanely easy to use framework that allows you to create a three dimensional web space within minutes.
To create a scene like the demonstration above can be done in a few minutes. The first step is to create a basic HTML file, and include the JavaScript plugin in the head of your HTML document in the same way you would include JQuery or any other JavaScript file.

<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
Creating the 3D Scene
Once that is in place you can create the 3D scene using the a-scene tags. Within this tag, you can create elements, set up your camera positioning and define the way the background looks. In my simple demonstration I created a sky, four shapes, some simple animations and activated the cursor so that the user can trigger the animations using a hover event.

The first section of my code defines some assets, namely the Bitmovin logo (logo.jpg) and the background 3D image (image.jpg) I assign ID tags to these assets so that I can reference them later.
<a-assets>
<img id="logo" src="logo.png">
<img id="bg" src="image.jpg">
</a-assets>

With the assets in place, creating the background is as easy as using the a-sky tag.
<a-sky src="#bg"></a-sky>
There are also
Spheres, Boxes, Cones and Other Shapes
The logo shapes are slightly more complicated, but still very quick to set up. Each shape is treated as an element, with a range of configurable attributes. By using the “a-box” tag I can create square or rectangular shape and can control the appearance and behavior by adding various attributes, such as height and width. The “a-animation”, set within the “a-box” tag allows me to assign an animation to that particular element. The other three shapes are controlled in exactly the same way, but use the tags; a-sphere, a-cone and a-torus.
<a-box color="#ffffff" width="6" height="4" depth="4" position="0 0 -5" rotation="40 50 10" scale="0.5 0.5 0.5" src="#logo">
<a-animation attribute="rotation" begin="hovered" repeat="0" to="270 360 360"></a-animation>
</a-box>

You will notice that many of the attributes contain three attributes. Basically you can think of this as being one for each dimension. X-axis, Y-axis and Z-axis. Rather than thinking about it too much, I found that the best way to get most of the settings correct was to start with trial and error, especially when it comes to working out things like how the box should rotate or where each of the boxes should be positioned.

One of the really fun things about A-Frame is that the 3D environment is available by default. As soon as you have a scene up and running you will be able to “walk” around it and turn your viewer in all directions, controlling your scene in the same way you control a first person computer game. The primitives mentioned above allow one to start building the environment immediately. A-Frame also offers an impressive set of demos and a very well organised documentation section to help you get up and running quickly.
The Live Code
This is the final html page as it sits on the site. It pulls the A-Frame JavaScript directly from the aframe.io server, and the only extra files required are the two images.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bitmovin</title>
<meta name="description" content="Bitmovin 3D World Demo">
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="logo" src="logo.png">
<img id="bg" src="image.jpg">
</a-assets>
<a-sky src="#bg"></a-sky>
<a-box color="#ffffff" width="6" height="4" depth="4" position="0 0 -8" rotation="40 50 10" scale="0.5 0.5 0.5" src="#logo">
<a-animation attribute="rotation" begin="hovered" repeat="0" to="270 360 360"></a-animation>
</a-box>
<a-sphere color="#ffffff" width="6" height="4" depth="4" position="5 0 2" rotation="40 50 10" scale="0.5 0.5 0.5" src="#logo">
<a-animation attribute="rotation" begin="hovered" repeat="0" to="270 360 360"></a-animation>
</a-sphere>
<a-cone color="#ffffff" width="6" height="4" depth="4" position="-5 0 2" rotation="40 50 10" scale="0.5 0.5 0.5" src="#logo">
<a-animation attribute="rotation" begin="hovered" repeat="0" to="360 180 360"></a-animation>
</a-cone>
<a-torus color="#ffffff" width="6" height="4" depth="4" position="0 0 6" rotation="40 50 10" scale="0.5 0.5 0.5" src="#logo">
<a-animation attribute="rotation" begin="hovered" repeat="0" to="360 180 360"></a-animation>
</a-torus>
<a-camera position="0 0 0">
<a-cursor color="#ccc">
</a-camera>
</a-scene>
</body>
</html>

A good way to get an idea of what this framework is capable of is on the A-Frame blog, where you can see their weekly progress as well as some of the best virtual reality websites that have been produced using A-Frame. We have also created a short list of our favorites A-frame VR examples and listed them below.
5 of the Best VR Websites Built with A-Frame

Where is Piers Morgan disliked the most?
This is a humorous 3D environment that shows a map of the UK, with a three dimensional graph displaying the number of “dislikes” for Piers Morgan (a British television personality) per city. Fly over the country to get a visual impression of this celebrities popularity levels.


360 Syria – Fear of the Sky
This website, built for Amnesty International, uses A-Frame to present a confronting 360° view life as a Syrian, living in a city ravaged by war. The presentation and use of video in this example is very well done and creates a very powerful message. The video is delivered directly through standard HTML5 <video> tags in MP4 format.


Mars, an interactive journey
This is a fairly simple 360° view of mars, including a model of the Curiosity Rover and a series of informational images with accompanying audio.


VR Wiki Museum
This is a very interesting attempt to create a virtual museum version of Wikipedia. Walk through the halls of the Wiki Museum, see three dimensional statues, read information and look at photographs wall. Walking through doors takes you to new areas of the website.
Bitmovin and the HTML5 VR Player
Virtual Reality is a fast growing space. That is why Bitmovin is spending a lot of time to make sure that both our HTML5 Adaptive Streaming Player and our Cloud Encoding Service are completely ready to handle 360° video streaming and video within VR environments. We are constantly working on solutions to deliver video everywhere, browser based VR included. Our experiments with A-Frame and other browser based virtual reality technologies are just beginning. Look out for our follow up articles on VR in the browser and the HTML5 VR Player.

Get access to our 360° video enabled HTML5 Player or Encoding service with a free account today!
The post Build a Virtual Reality Website for HTML5 Browsers appeared first on Bitmovin.
]]>