Geekly Articles each Day
📜 ⬆️ ⬇️

Embed premium media content with HTML5



The commercial media industry is undergoing a major transformation as content providers move away from content delivery models using closed web plugins (such as Flash or Silverlight) and replace them with single, pluginless video players based on HTML5 specifications and features. playing commercial content. Browsers are also moving away from the use of plug-ins, so Chrome refuses NPAPI and Microsoft Edge from ActiveX in favor of more secure extension models.

The transition to the model of playing media content without the use of plug-ins is possible thanks to the newly developed new specifications:

')
These specifications are designed and developed to make streaming compatible on multiple media platforms and devices. By focusing on compatible solutions, content providers can reduce costs, while users can access content from the devices they prefer, and using the applications or web browsers that they have chosen for themselves. At Microsoft, we believe that this is a huge advantage for both content providers and viewers, and we are happy to support companies that implement this transformation.

This is a long article, and we would not want you to miss the topic that interests you. Here is a summary:




Microsoft Edge and Silverlight


ActiveX support was excluded during the development of Microsoft Edge and this includes the removal of Silverlight support. The reasons for this were discussed in one of the past articles and include the evolution of accessible and secure media solutions based on HTML5 extensions. Microsoft continues to support Silverlight, non-browser applications on Silverlight continue to work. Silverlight will also continue to be supported in Internet Explorer 11, so Silverlight websites can work in Windows 10. At the same time, we encourage companies using Silverlight for media content to switch to engines using DASH / MSE / CENC / EME. and implement a uniform content protection process based on CENC. This opens the way to the widest compatibility between browsers, platforms, content and devices.

Media compatibility between browsers


Plug-ins like Silverlight should have ensured compatibility of playing media content by having a version of the plug-in for different browsers. This greatly complicated as the number of devices and platforms with browsers increased. Today, since the old model with plug-ins is leaving the scene, it needs a replacement. For media content, a suitable change may be a solution based on DASH, MSE, EME and CENC.

Windows 10 and Microsoft Edge support DASH, MSE, EME and CENC natively, other browsers also introduce support for MSE and EME, compatible with CENC. This allows developers to create video applications without plug-ins, running on a wide range of devices and platforms in which the MSE / EME implementation can be made on top of different chains of video playback and content protection.


DRM providers may vary across browsers.

Nowadays, when DRM systems use proprietary file formats and encryption methods, such variability in DRM providers in browsers can be a critical issue. Thanks to the development and implementation of common encryption (Common Encryption, CENC), the problem is significantly smoothed, as the files are compressed in standard formats and encrypted using global industry standards. Service providers issue the keys and licenses necessary to consume content in a particular browser, but the website code, content, and encryption keys are common between them, regardless of the DRM tool used . An example of such an implementation is DASH.js, an open source reference industrial player that is used to demonstrate these technologies and serves as the basis for many players being introduced on the web today.

As follows from the diagram above, Microsoft's PlayReady DRM supports two DRM protection models: “software DRM”, using the traditional software way of protecting media content, and “hardware DRM”, which uses hardware capabilities for protection, if the corresponding option is supported by the device. Hardware DRM has been designed to meet the requirements of protecting commercial media content and enable streaming of content in the highest available quality. Not all devices will support hardware protection, but sites using MSE / EME can adjust to the difference and deliver content in the best available quality depending on the browser or device.

Microsoft support


As with any other new technology, the transition to the DASH / MSE / EME / CENC stack can be difficult. Possible difficulties include:

In an effort to help the industry create compatible media delivery solutions, we are investing in technologies that address these issues.

DASH Type 1: MSE just got easier


DASH content typically consists of media files encoded at different quality levels and a manifest that provides information about the files to the media application. The MSE player is then responsible for parsing such files, loading the most appropriate content and sending the media element to the sourceBuffer (s). This is a very flexible solution, which, however, requires investment in the development of the MSE implementation on the site or the use of a ready-made MSE implementation, for example, the mentioned DASH.js library.

There is also another simpler option: native DASH streaming, in which the site code simply says that the manifest is the source for the media element, and the player is automatically controlled by the streaming engine built into the browser. This approach allows web developers to benefit from the experience and investment made by browser developers, and to easily provide premium content on their sites. We added native support for DASH streaming in Windows 10 and Microsoft Edge, additional details are available in a previous article: " Simplified Adaptive Video Streaming: Announcing support for HLS and DASH in Windows 10. "

DASH-library on JavaScript, which plays Smooth-content


Some websites have large libraries of media content encoded in Smooth Stream, and are looking for ways to move to a compatible HTML5 solution. One possible way is to use a js library that would support current content via MSE / EME without the need for transcoding. Today, such libraries are available, for example, there is a version of the library “hasplayer.js”, which does exactly that and is posted on GitHub .

This library is based on dash.js and allows you to play both pure and protected Smooth-content using PlayReady in Microsoft Edge. This is a client-side JavaScript library that broadcasts the necessary content and manifest and is compatible with other browsers. Thanks to the inclusion of a polyfil to support EME, it can be easily extended to support DRM solutions from other browsers.

Below is a sample JavaScript code that uses hasplayer.js to request and play a DASH or Smooth media file:

function setupVideo(url) { var context = new Custom.di.CustomContext(); var player = new MediaPlayer(context); player.startup(); player.attachView(document.querySelector('#videoplayer')); player.setAutoPlay(true); player.attachSource(url); }


This greatly facilitates the support of streaming Smooth-content on the site. We made an example of “Contoso Video” in the GitHub repository using this library for playing videos. You can try it yourself on the Contoso Video demo site .


• Rendering in Microsoft Edge
• Chakra JavaScript Engine
• HTML / CSS / JS from server

The library for broadcasting client-side Smooth Streaming content is possible because the PIFF (Protected Interoperable File Format) format, which is the basis of the Smooth Streaming protocol, was the basis of the ISOBMFF (ISO Base Media File Format) specification used in DASH, and also because PIFF offers a multi-DRM protocol that has been standardized as ISO MPEG Common Encryption (CENC).

Today, widespread today: PIFF 1.1 and PIFF 1.3 - and the hasplayer.js library for Smooth streaming in MSE / EME supports both formats. The library converts on the fly from PIFF format to CMF (Common Media Format) format used with DASH. This allows you to be sure that all content played by the library in the browser corresponds to DASH CMF and can play in all browsers that support MSE.

Media Services


Some content owners prefer to focus on producing quality material rather than technical details of delivering content to viewers. These companies can take advantage of media content hosting services that prepare it for web delivery, manage the streaming logic and player UI, and also manage the servers with DRM licenses. Azure Media Services offers such capabilities today , including support for both PlayReady and Widevine DRM systems. This service provides support for video on demand (Video on Demand, VoD) and live streaming (live streaming). Azure serves a single file / stream in high quality, and then it takes on dynamic compression and encryption into CENC-protected content that can be transmitted to end devices. Also available for developers is a turnkey solution with a player for inserting into your site. Some details of this service were recently announced in the article “ Azure Media Services delivers Widevine .”

Hosting Web Applications


Another great advantage of switching to streaming using DASH / MSE / EME / CENC is that the same code that runs on your site can be packaged into a universal Windows platform (UWP) application. UWP applications can run on all Windows 10 devices. In other words, a website developer can create a player on a website compatible with different browsers and a Windows application using the same code. The common code will control the UI and deal with the details of media streaming and (!) Will also be able to use the features available only to applications through the WinRT API:

Such hosted web applications:

We talked about the capabilities of hosted applications in our report “ Hosted web apps and web platform innovations ” at the Microsoft Edge Web Summit 2015 . You can also find the details in the MSDN documentation .

Demonstration of a hosted application


We took the demo site Contoso Video, mentioned above, and packed it in the form of a UWP application that uses the API capabilities of the Windows platform. This demo shows how easy it is to take a basic video player and integrate voice commands through Cortana into it. The example also customizes the colors of the panel with the title of the application. All JavaScript code is part of an HTML site that is deployed using standard web developer procedures.


• Microsoft Edge rendering is preserved.
• Saved Chakra - JavaScript engine
• HTML / CSS / JS code is downloaded from the server or locally
• Added access to native Windows APIs
• Available through the Windows Store catalog

To integrate Cortana into a hosted web application (Hosted Web App, HWA), three files are needed: a Voice Command Definition (VCD) file and one JS and HTML file each.

Voice Command Definition (VCD) file


The VCD file defines the actions you want to support through voice commands. The code below informs Cortana about the name of the application (Contoso Video), the support for the “play” command, and how the “playing” state should be displayed in the application's UI.

 <?xml version="1.0" encoding="utf-8"?> <VoiceCommands xmlns="http://schemas.microsoft.com/voicecommands/1.2"> <CommandSet xml:lang="en-us" Name="ContosoVideo"> <CommandPrefix>Contoso Video</CommandPrefix> <!-- Example text displayed in Cortana UI --> <Example>Contoso video play elephants</Example> <!-- Command name --> <Command Name="play"> <Example>play {message} using contoso video</Example> <!-- Tell Cortana what to listen for --> <ListenFor RequireAppName="BeforeOrAfterPhrase">please play {streamSubject}</ListenFor> <!-- Tell Cortana what to display in the UI --> <Feedback>playing {streamSubject} with Contoso Video</Feedback> <Navigate Target="/playStream.htm"/> </Command> <!-- Specifies a topic for large vocabulary recognition --> <PhraseTopic Label="streamSubject" Scenario="Dictation"></PhraseTopic> </CommandSet> </VoiceCommands>


Javascript file


JavaScript code should listen to the activation event and check VoiceCommand voice commands.

 // Handle Cortana activation adding the event listener before DOM // Content Loaded parse out the command type and call the // respective game APIs if (typeof Windows !== 'undefined') { console.log("Windows exists!"); // Subscribe to the Windows Activation Event Windows.UI.WebUI.WebUIApplication.addEventListener("activated", function (args) { var activation = Windows.ApplicationModel.Activation; // Check to see if the app was activated by a voice command if (args.kind === activation.ActivationKind.voiceCommand) { var speechRecognitionResult = args.result; var textSpoken = speechRecognitionResult.text; // Determine the command type {play} defined in vcd if (speechRecognitionResult.rulePath[0] === "play") { // Determine the stream name specified if (textSpoken.includes('elephants') || textSpoken.includes('Elephants')) { // Movie selected is Elephants Dream setupVideo("http://amssamples.streaming.mediaservices.windows.net/b6822ec8-5c2b-4ae0-a851-fd46a78294e9/ElephantsDream.ism/manifest(filtername=FirstFilter)"); } else if (textSpoken.includes('Steel') || textSpoken.includes('steel')) { // Stream selected is Tears of Steel setupVideo("http://amssamples.streaming.mediaservices.windows.net/bc57e088-27ec-44e0-ac20-a85ccbcd50da/TearsOfSteel.ism/manifest"); } else { // No stream specified by user console.log("No valid stream specified"); } } else { // No valid command specified console.log("No valid command specified"); } } }); }


HTML file


In the HTML file you need to add a meta element pointing to the VCD file on your server.
 <!DOCTYPE html> <html> <head> <title>Adaptive Streaming in HTML5</title> <meta name="msapplication-cortanavcd" content="http://localhost:3000/VCD/vcd.xml" /> <link href="./styles.css" rel="stylesheet" /> </head> <body> <!-- Create centered Video player with controls --> <div class="center videoPlayer"> <h1>Contoso Video</h1> <video id="videoplayer" controls></video> </div> <!-- Scripts: load last --> <script src="./js/hasplayer.min.js"></script> <script src="./js/windows.js"></script> <script src="./js/player.js"></script> <script src="./js/cortana.js"></script> </body> </html>


With the addition of a VCD file and updates of HTML and JS files on the site, our example Contoso Video can now be packaged as a UWP application that will work on all devices with Windows 10. And users can run the application to play video, saying, for example “Contoso, play Tears of Steel”. Cortana recognizes the command, launches the Contoso Video application and starts playing the “Tears of Steel” video.


Contoso Video in Cortana


Contoso Video in the application menu

The complete source code for the site examples and Contoso Video applications are available in the Contoso Video Sample repository on GitHub .

Conclusion


The aggregate of DASH / MSE / EME / CENC offers a replacement for plug-in-based solutions. We are rapidly moving towards broad compatibility in playing media content. This transformation will benefit both content providers and viewers. Although the adaptation of technologies may be difficult in the short term, the possibilities and solutions that we discussed in this article are designed to help companies overcome these difficulties.

We will be glad to hear your feedback so that we can continue to improve streaming solutions for media content and the tools and approaches we talked about. Email us on @MSEdgeDev .

Source: https://habr.com/ru/post/265259/

More articles:


All Articles