• Background and the “old” MSE
• New Managed Media Source in Safari 17
• Airplay with MMS
• Migration from MSE to MMS
• Next Steps

Background and the “old” MSE

The first internet videos of the early 2000s were powered by plugins like Flash and Quicktime, separate software that needed to be installed and maintained in addition to the web browser. In 2010, HTML5 was introduced, with its <video> tag that made it possible to embed video without plugins. This was a much simpler and more flexible approach to adding video to websites, but had some limitations. Apple’s HTTP Live Streaming (HLS) made adaptive streaming possible, but developers wanted more control and flexibility than native HLS offered, like the ability to select media or play DRM-protected content. In 2013, the Media Source Extension (MSE) was published by the W3C body, providing a low-level toolkit that gave more control for managing buffering and resolution for adaptive streaming. MSE was quickly adopted by all major browsers and is now the most widely used web video technology…except for on iPhones. MSE has some inefficiencies that lead to greater power use than native HLS and Apple’s testing found that adding MSE support would have meant reducing the battery life, so all the benefits of MSE have been unavailable on iPhone…until now.

New Managed Media Source in Safari 17

With MSE, it can be difficult to achieve the same quality of playback possible with HLS, especially with lower power devices and spotty network conditions. This is partly because MSE transfers most control over the streaming of media data from the User Agent to the application running in the page. But the page doesn’t have the same level of knowledge or even goals as the User Agent, and may request media data at any time, often at the expense of higher power usage. To address those drawbacks and combine the flexibility provided by MSE with the efficiency of HLS, Apple created a new Managed Media Source API (MMS).

The new “managed” MediaSource gives the browser more control over the MediaSource and its associated objects. It makes it easier to support streaming media playback on mobile devices, while allowing User Agents to react to changes in memory usage and networking capabilities. MMS can reduce power usage by telling the webpage when it’s a good time to load more media data from the network. When nothing is requested, the cellular modem can go into a low power state for longer periods of time, increasing battery life. When the system gets into a low memory state, MMS may clear out buffered data as needed to reduce memory consumption and keep operations of the system and the app stable. MMS also tracks when buffering should start and stop, so the browser can detect low buffer and full buffer states for you. Using MMS will save your viewers bandwidth and battery life, allowing them to enjoy your videos for even longer. 

Airplay with MMS

One of the great things about native HLS support in Safari is the automatic support for AirPlay that lets viewers stream video from their phone to compatible Smart TVs and set top boxes. Airplay requires a URL that you can send, but that doesn’t exist in MSE, making them incompatible. But now with MMS, you can add an HLS playlist to a child source element for the video, and when the user AirPlays your content, Safari will switch away from your Managed Media Source and play the HLS stream on the AirPlay device. It’s a slick way to get the best of both worlds.

Migration from MSE to MMS

The Managed Media Source is designed in a backwards compatible way. This means that changing the code from creating a MediaSource object to creating a ManagedMediaSource object after checking if the API is available is the first step:

function getMediaSource() {
    if (window.ManagedMediaSource) {
        return new window.ManagedMediaSource();
    }
    if (window.MediaSource) {
        return new window.MediaSource();
    }

    throw “No MediaSource API available”;
}
const mediaSource = getMediaSource();

As the MMS supports all methods the “old” MSE does, this is all to get you started, but doesn’t unleash the full power of this new API. For that, you need to handle different new events:

mediaSource.addEventListener(“startstreaming”, onStartStreamingHandler);

The startstreaming event indicates that more media data should now be loaded from the network.

mediaSource.addEventListener(“endstreaming”, onStopStreamingHandler);

The endstreaming event is the counterpart of startstreaming and signals that for now no more media data should be requested from the network. This status can also be checked via the streaming attribute on the MMS instance. On devices like iPhones (once fully available) and iPad, requests that follow these two hints benefit from the fast 5G network and allows the device to get into low power mode in between request batches.

In addition, the current implementation also offers hints about a preferred, suggested quality to download. The browser suggests if a high, medium, or low quality should be requested. The user agent may base this on facts like network speed, but also additional details like user settings about enabled data saver modes. This can be read from the MMS instance’s quality property and any change is signaled via an qualitychange event:

mediaSource.addEventListener(“qualitychange”, onQualityChangeHandler);

It remains to be seen if the quality hint will still be available in the future as it offers some risk of fingerprinting.

As the MMS may remove any date range at any given time (as opposed to the MSE’s behavior where this could only happen during the process of appending data), it is strongly recommended to check if the data needed next is still present or needs to be re-downloaded.

Next Steps

Managed Media Source is already available in the current Safari Tech Preview on macOS and Safari 17 on iPadOS 17 beta and can be enabled as an experimental feature on iOS 17 beta. Once generally available on iOS, without being an experimental feature, this will finally bring lots of flexibility and choices to Safari, other browsers, and Apps with WebViews on iOS. It would even be possible to finally support DASH streams on iOS, while keeping web apps power efficient. 

Apple has already submitted the proposal of the Managed Media Source API to the World Wide Web Consortium (W3C), which is under discussion and might lead to an open standard other browser vendors could adopt.

Bitmovin will be running technical evaluations to fully explore and understand the benefits of MMS, including how it performs in various real-world environments. We will closely follow the progress from Apple and consider introducing support for MMS into our Web Player SDK once it advances from being an experimental feature on iOS. Stay tuned!

If you’re interested in more detail, you can watch the replay of the media formats section from WWDC23 here and read the release notes for Safari 17 beta and iOS & iPadOS 17 beta. You can also check out our MSE demo code and our blog about developing a video player with structured concurrency.

The post Everything you need to know about Apple’s new Managed Media Source appeared first on Bitmovin.

Quickly and easily check your video streams in our Native SDKs with the Bitmovin mobile apps using your own streams, DRM licenses and Ad servers

If you are considering using the Bitmovin Player in your native app then the first thing you should do is download the Android and/or the iOS Bitmovin app to get a feeling for what you can expect from the Bitmovin Player when you integrate it into your own app. Our freshly redesigned apps are built specifically to help you to quickly and easily assess and test the Bitmovin Player before you invest time into integration.
Answer questions like: Will your streams play in the Bitmovin Player on Android and iOS? How does DRM work? What are the advertising capabilities and how are they configured? Can you style the UI to fit your brand? All of these questions can be answered in a few minutes using your own streams, DRM licenses and ad sources so you can be sure that the Bitmovin Player is the right player to integrate into your project.

Download the App now:

 

      

and follow along on our brief product tour.

Product Tour: How to Test Video in your Mobile App with Bitmovin SDKs

When you enter the app, one of the easiest ways to get started is to test your video stream in the Bitmovin Mobile Player, seeing if our mobile SDKs will support your stream. Hit “Own Stream” and copy and paste your file URL in the Stream Section at the top. After you hit “Play” you’ll see your video instantly play in the Bitmovin Player.
You can also check your stream for your web version here: Stream Test for DASH, HLS and Progressive

UI Styling

A unified user interface ensures that your player will look the same across devices while maintaining brand standards. When you try our streaming video demos, you’ll see a customization option on the “Video Details” screen labeled, “Theme.” Select this option on the bottom left, and you’ll be able to apply a skin that changes the color of the user interface. An added benefit? This styling is enabled via CSS, meaning your developers won’t or devote additional time to custom projects.
Please note, our app is an easily customizable with fully maintained code that you can build your mobile video experience on, but if you’d like to vary the look, feel, and functionality of your mobile app, we do offer sample open-source code. Developers can completely customize apps using our open source video projects.

DRM Stream Test

Back in the streaming test area, labeled “Own Stream” there are other options for you to try. Security is paramount to many of our customers, so we’ve made it easy to test an encrypted DRM stream live. Simply copy and paste your license or certificate URL to see if your DRM system and codecs are supported. Integrating DRM into your mobile video app workflow is much easier than you think, and you’re always protected. (Download our DRM Whitepaper or watch our Webinar: DRM Basics with Irdeto & Bitmovin)

Ad Scheduling

Also within the area of the app labeled “Own Stream” is our mobile ad scheduling demo. Test our seamless ad insertion and see how our app easily integrates with different advertising standards (VAST, VPAID, IMA, and VMAP). At the bottom of your screen, hit the “+” next to “Schedule Ad” and you’ll be able to set the position and location of your video advertisement. Then, paste the URL and then hit “Play” to see your ad inserted into our standard demo video at the time and location you requested. Push the test to the limits and schedule up to three ads at any time.

Chromecast and iOS Airplay

On the “Video Details” screen where you previously analyzed the essential properties of your files and played around with different themes, there is another Bitmovin application to try out! More users are discovering and watching videos on their phones, but sometimes going fullscreen isn’t enough- they want to share these experiences with those around them. This is where video casting and mirroring services like Chromecast and Airplay come in handy. When testing our mobile video app, throw your video stream up on a connected TV in your workplace by simply hitting the “Cast” or “Airplay” button. After confirming the TV name and network, your content will play on a larger screen with quality and resolution intact.

Which Video App Demos Should You Try First?

Testing functionality is a vital part of the development process. But when figuring out how to add video capabilities, you’ll want to “try before you buy” so that you and your team see results before investing. If you’re in Marketing, make sure to try our UI styling demo. If you’re in Media, the Ad Scheduler and AirPlay functionalities may be attractive. Don’t be shy, get in there and play around! Make it a collaborative group activity at your next stand-up. We’ll be here to answer any questions you may have along the way.
Remember, mobile app development can already be a costly undertaking. And now, to stay competitive, your business needs video too. Giving your developers the best tools is a no-brainer, but project delays are inevitable when you develop everything in-house. Using video SDKs, your business becomes more efficient and can better service customers long-term. When customers have a fantastic experience (and spend more time in your app,) advertisers and investors are happy too!

See It For Yourself:

      

The post Test Your Streams in Our Player on iOS and Android with the Bitmovin Mobile Apps appeared first on Bitmovin.

At WWDC17 Apple presented updates and new features that will be available to their products soon including HEVC in HLS

This year Apple announced support for HEVC/H.265 for macOS High Sierra and iOS11. The release of iOS 11 is expected to happen soon after Apple’s iPhone 8 launch event on September 12th. Considering the fact that iOS users usually upgrade their system pretty fast, HEVC playback will soon be available on hundreds of million devices. This is evident, as only five months after iOS 10 was released to the public, it was installed on about 80% of active iOS devices. In January 2016 Apple announced it had over 1 billion active iOS devices. There was no updated number after that, however, when considering Apple is selling tens of millions of iOS devices each quarter, it’s reasonable to assume the total is above 1 billion by now.
That are numbers too large to be ignored considering the fact that HEVC/H.265 can reach up to 50% bitrate savings compared to AVC/H.264 according to Netflix’s experiments. This will allow to stream better quality to customers and saves storage and CDN costs for content providers.
The following image shows a quality comparison between HEVC/H.265 and AVC/H.264 encoded at 1000kbps. The quality improvement is clearly visible as there are multiple encoding artifacts visible in the AVC/H.264 version. Also if you look at the details of the coat or the lines in the background one can clearly see how HEVC/H.265 manages to preserve more details.

Multi Codec Streaming

With Bitmovin you can encode content with different codecs like AVC/H.264, HEVC/H.265, VP9, and recently also AV1. This allows to use the best codec for the platform when streaming content to your users. HEVC/H.265 and VP9 are more efficient than AVC/H.264 allowing to deliver higher quality with the same bitrate, or save costs by delivering similar quality to less bandwidth. VP9 is supported on Google Chrome, Firefox and Android devices which allows you to stream VP9 to about 70% of your users. For Safari there was still the need to use AVC/H.264 until now. Having the fast adoption rates for new iOS versions in mind, it is expected for iOS 11 to be installed on the vast majority of iOS devices soon, allowing to save bandwidth, storage and CDN costs by utilizing its HEVC/H.265 support.
Generating HEVC/H.265 content with fMP4 segments works out-of-the-box for HLS with Bitmovin as we do that today for HEVC MPEG-DASH content already. The trick to make it available as an HLS asset is just to reference the segments in the HLS playlist files in the same way as we do it today with fMP4 in HLS.

Playback of HLS with HEVC

With the Bitmovin Player you can deliver HEVC based HLS streams to a wide range of supported devices, enabling you to provide a better video quality to your customers, or to save storage and CDN costs by delivering the same video quality at significantly lower bitrates.
No matter if you build native iOS applications using our iOS SDK, or if you want to enable HLS HEVC playback in the browser, the Bitmovin Player provides you broad device and platform coverage for HLS content encoded with HEVC. Besides playback of HEVC based HLS streams in Safari on macOS High Sierra and iOS, the web-based Bitmovin Player is also able to play those streams on any browser which comes with built in HEVC support like the Microsoft Edge Browser.
If you have iOS 11 already installed on your device, you can test any HLS HEVC stream in our iOS SDK demo application available in the App Store. With macOS High Sierra or iOS 11 installed, you can also test your streams in Safari using our online demo section.

Test Vectors

There are a few ways to deliver HEVC content to users:

1. HEVC in HLS using MPEG-2 Transport Stream chunks, which Apple doesn’t support,
2. HEVC in HLS using fMP4 segments, which is what Apple announced on WWDC17 and our player supports,
3. HEVC in MPEG-DASH using fMP4 segments.

All of these options can already be created using the Bitmovin Encoder. For playback, it depends on the HEVC support in the browser. Obviously, Apple added this for Safari on macOS 11 and High Sierra, but also Edge on Windows 10 already supports it. HEVC can be streamed using HLS or MPEG-DASH to Edge with the Bitmovin Player.
We provide test vectors for the three above mentioned types for public testing:

• HEVC HLS with fMP4
• HEVC MPEG-DASH

Beside HEVC/H.265 we can also encode the same asset to AVC/H.264 and VP9 which we introduced earlier this year. With this configuration you can deliver the best codec to every device, improving quality and save costs. VP9 is supported on multiple platforms including Google Chrome, Firefox and Android devices and thus by about 70% of your users. Take in consideration that with VP9 you can save up to 50% on bitrate delivering similar quality you could save about 35% on CDN costs.
Here are some more test vectors including the VP9 codec:

• Multi-Codec (AVC/H.264, HEVC/H.265, VP9)
• VP9

Demo for HEVC HLS:

The post How the iOS 11 Release with HLS/HEVC Support will Help to Save Storage & CDN Costs appeared first on Bitmovin.