Mario Graf – Bitmovin https://bitmovin.com Bitmovin provides adaptive streaming infrastructure for video publishers and integrators. Fastest cloud encoding and HTML5 Player. Play Video Anywhere. Tue, 25 Jul 2023 09:04:32 +0000 en-GB hourly 1 https://bitmovin.com/wp-content/uploads/2023/11/bitmovin_favicon.svg Mario Graf – Bitmovin https://bitmovin.com 32 32 5 Ways React Native & Flutter Can Simplify Video Streaming Workflows https://bitmovin.com/blog/react-native-flutter-streaming-workflows/ https://bitmovin.com/blog/react-native-flutter-streaming-workflows/#respond Tue, 25 Jul 2023 08:01:06 +0000 https://bitmovin.com/?p=264456 Developing an application built to stream video can take a lot of work, especially for smaller development teams or those with minimal video technical expertise. Normally, to build on platforms such as iOS and Android, an experienced developer for each would be needed, but with frameworks such as React Native and Flutter, it’s gotten much...

The post 5 Ways React Native & Flutter Can Simplify Video Streaming Workflows appeared first on Bitmovin.

]]>
Developing an application built to stream video can take a lot of work, especially for smaller development teams or those with minimal video technical expertise. Normally, to build on platforms such as iOS and Android, an experienced developer for each would be needed, but with frameworks such as React Native and Flutter, it’s gotten much easier to support more platforms with less. There are many benefits to utilizing these frameworks within a streaming workflow, especially the fact that with React Native, you’re able to use the code you’ve deployed for your web platform across multiple device types. Additionally, with dedicated SDKs, developers can deploy faster and enable a consistent user experience across all devices.

In this blog post, we’ll explore the benefits and drawbacks of utilizing React Native or Flutter for video streaming workflows. Additionally, we’ll examine how Bitmovin’s SDKs further enhance the development process.

1. Simplifying Cross-Platform Development

React Native and Flutter have been made specifically for cross-platform development, allowing developers to create video streaming apps that seamlessly run on multiple platforms without engaging with native frameworks. The benefit of React Native is that it uses a single codebase written in JavaScript to deliver consistent experiences across iOS and Android devices. It leverages platform-specific rendering APIs, resulting in a near-native user interface and performance. Similarly, Flutter enables the development of visually rich and performant video streaming apps for iOS, Android, and web platforms. With Flutter, teams can write code once and deploy it across various devices.

However, while both React Native and Flutter allow you to implement a consistent view across platforms, there are still slight differences in UI and behavior due to variations in native components and rendering approaches that may require additional effort to get right. Also, with Flutter being programmed in DART and their widget approach, there is a learning curve that needs to be tackled as it is a newer language compared to Javascript. To ensure the process is fluid, Developers must carefully test to ensure a seamless experience on different devices.

2. Native-like Performance

Both React Native and Flutter offer native-like performance for video streaming apps. React Native utilizes native components, which allows it to leverage the device’s GPU for optimized video playback. This results in smooth and efficient streaming, ensuring that users enjoy their content without any performance hiccups.

React Native,Flutter - Bitmovin

React Native UI Development View

Flutter, on the other hand, takes a different approach. Flutter has its implementations of each UI control rather than deferring to those provided by the system. Content is drawn to a texture, and Flutter’s widget tree is kept entirely internal. This means there’s no place for an Android view to exist within Flutter’s internal model or to render them interleaved with Flutter widgets. If native UI components are needed, Flutter’s PlatformView comes in handy. This component maps to the native View and UIView components on Android and iOS, allowing development teams to utilize these Native UI components that would usually be used when building the apps natively on these operating systems.

React Native,Flutter - Bitmovin

Flutte Development UI workflow

On the contrary, it’s important to acknowledge that achieving true native performance can be challenging due to the additional abstraction layers introduced by these frameworks. While React Native and Flutter are built to optimize performance, there may be scenarios where fully native apps outperform them. In complex video streaming applications with intensive processing requirements, teams may need to implement platform-specific optimizations or utilize native code for performance-critical tasks. However, this won’t be as crucial for development teams where the priority is to optimize their process and time to launch quickly on more devices.

3. Quicker Feedback and Updates

React Native’s hot reloading and Flutter’s hot reload features greatly enhance the development process for video streaming workflows. With hot reloading, React Native developers can instantly see code changes as they modify their app. This provides quick feedback and allows for rapid adjustments, leading to efficient iterations. Similarly, Flutter’s updating feature enables developers to view real-time updates to the app’s UI and behavior, making it easier to experiment with different video streaming features and refine the app’s functionality. These features streamline the development process for small teams, allowing them to iterate more efficiently and fine-tune their video streaming workflows.

Aside from this, managing the app’s versions and current state is important, as this approach could also lead to issues when making an update, as it can unintentionally cause bugs within the application environment and disrupt the app’s functionality if not maintained properly.

4. Robust Features and Customizable UI

React Native and Flutter provide extensive UI components and customization options, enabling teams to create visually appealing and tailored user interfaces for their video streaming apps. React Native offers a wide range of community-driven components and libraries that can be easily integrated into the app. This allows developers to utilize existing solutions and deliver a better user experience.

On the other hand, Flutter has a widget-based approach with a robust set of pre-built UI components that enable developers to customize them extensively. This simplifies the process and helps save time and effort when designing and implementing elements. Along with ease-of-use, teams will be able to develop a unique setup and incorporate branding aspects within the application. 

The negative here is that even though teams can thoroughly customize features and elements, they should avoid overdoing it as it can lead to performance issues if the customizations are heavy and, in turn, affect the streaming experience for viewers.

5. Extensive Open-Source Ecosystem

React Native and Flutter have large developer communities, providing access to plenty of libraries, tools, and resources. This allows small teams to leverage existing options and tap into community knowledge to overcome video streaming challenges. The communities provide ongoing support, ensuring platform updates, bug fixes, and performance optimizations. Support and guidance from a passionate developer network can make a huge difference, and this factor alone is why both of these frameworks have such widespread adoption.

Regarding developer communities, check out Bitmovin’s developer community, which focuses on video streaming workflow aspects and questions on deploying Bitmovin’s solutions.

Bitmovin’s Dedicated React Native and Flutter SDK

With our focus on simplifying the streaming process and enabling developers to stream on more platforms, our team has released our React Native SDK and is currently working on a Flutter SDK. The React Native SDK offers a comprehensive suite of features specifically designed for integrating advanced video streaming functionalities into React Native applications. It handles critical aspects such as UI customization, video playback, adaptive streaming, content protection, and analytics, reducing the need for teams to build these components from scratch. The upcoming Flutter SDK will extend Bitmovin’s support to the Flutter framework, providing a powerful toolkit for building high-quality video streaming applications. These SDKs make it easier for development teams to deploy essential aspects and focus on building their app’s unique features.

Wrapping It Up (Pun Intended)

React Native and Flutter provide powerful solutions for simplifying video streaming workflows. The cross-platform capabilities, native-like performance, hot reloading for rapid iterations, customizable UI options, and extensive ecosystems make React Native and Flutter ideal for small teams or ones with limited video streaming workflow knowledge. Bitmovin’s React Native SDK and upcoming Flutter SDK further enhance and optimize the video streaming development process. By leveraging these frameworks and SDKs, teams can streamline their video streaming workflows, reduce development time, and deliver the highest quality of experience to their users.

Also, if you’d like to see how Bitmovin’s solution stack can benefit your streaming workflow – sign up for our 30-day free trial.

The post 5 Ways React Native & Flutter Can Simplify Video Streaming Workflows appeared first on Bitmovin.

]]>
https://bitmovin.com/blog/react-native-flutter-streaming-workflows/feed/ 0
Test Your Streams in Our Player on iOS and Android with the Bitmovin Mobile Apps https://bitmovin.com/blog/test-streams-player-ios-android-bitmovin-mobile-apps/ Fri, 24 Aug 2018 11:20:47 +0000 http://bitmovin.com/?p=24116 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...

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

]]>
React Native,Flutter - 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:

 

React Native,Flutter - Bitmovin      React Native,Flutter - Bitmovin

and follow along on our brief product tour.

 

React Native,Flutter - Bitmovin

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

React Native,Flutter - Bitmovin

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.

React Native,Flutter - Bitmovin

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)

React Native,Flutter - 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.

React Native,Flutter - Bitmovin

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:

 

React Native,Flutter - Bitmovin      React Native,Flutter - Bitmovin

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

]]>
Adjust to Viewers as They Watch (and as They Don’t) with User Aware Adaptation https://bitmovin.com/blog/user-aware-video-player/ Fri, 01 Jun 2018 10:56:22 +0000 http://bitmovin.com/?p=23592 The Bitmovin Player is now equipped with facial recognition software that allows the player logic to adapt to viewers behavior. A Little About User Interfaces Ever since the world’s first computer, ENIAC (Electronic Numerical Integrator and Computer), went online in 1946, computers have been designed to respond to human input. ENIAC’s human interface was a...

The post Adjust to Viewers as They Watch (and as They Don’t) with User Aware Adaptation appeared first on Bitmovin.

]]>
User aware adaptation in Bitmovin Player

The Bitmovin Player is now equipped with facial recognition software that allows the player logic to adapt to viewers behavior.

A Little About User Interfaces

Ever since the world’s first computer, ENIAC (Electronic Numerical Integrator and Computer), went online in 1946, computers have been designed to respond to human input. ENIAC’s human interface was a set of large plugboards that resembled a telephone exchange. Soon after that the keyboard became the standard input mechanism, and then with the invention of the GUI more intuitive devices were developed such as the mouse, the trackball, the stylus and then later the touch screen. In the last decade the development and scope of human interface technology has expanded beyond hand controlled input devices to include movement sensors, voice control and video recognition. This last point, video recognition, has been the focus of some exciting feature development in the Bitmovin Player, opening up new opportunities for video content providers to interact with their audience.

What is Video Recognition Software?

To explain it simply, video recognition software can analyse a video and identify specific objects within the video and then track them as they move through the frame. The word “object” for these purposes could be anything that the software has been taught how to recognize. This could include people, letters or numbers, cars or animals or any number of other visually elements within the video. Facial recognition (sometimes called face detection) is a related technology that has has it’s development accelerated with the help of artificial intelligence and can be used, not just for identifying people, but also for detecting specific facial expressions or facial movements. This level of recognition can be very important for the context of your video content and create significant opportunities to increase your viewers QoE.
Camera and video detection software

How we used this in the Bitmovin Player

User Aware Adaptation is a feature that we have built (patent pending) by collecting data about the user itself and how the user is interacting with the video application. This data which is collected from the devices sensors is processed and used to build a realtime-updated model of the user and the users environment. With that system in place, the video player can use rule-based or machine learning mechanisms to drive decisions in a wide variety of modules and functions including: analytics, playback, advertising and adaptive logic.
React Native,Flutter - Bitmovin

Optimizing Your Video Delivery for Each User

Video delivery optimization is one of the first practical applications that we have implemented with Bitmovin’s User Aware Video Delivery feature. This feature takes the user’s physical behaviour into account and adds that to the Bitmovin Player’s adaptation logic. This means that the player can make smart bandwidth saving decisions when opportunities arise. For example it can reduce the video quality (bitrate) and save bandwidth when it detects that the viewer is further away form the screen, or when the user is involved in a secondary activity and probably only listing to the audio, such as cooking while they watch a cooking show.

Increasing Quality of Experience

Another opportunity created by this feature is to improve your QoE score. Assuming your audience is comfortable with this level of communication and they agree to, or enable the features, then there is a huge range of creative possibilities in this category. You could increase the bitrate when you see the user is coming closer to the screen. You could pause the video if you see that the user has left the room, or fallen asleep and then resume when he or she returns their attention to the screen. You could reduce the volume when you see that the user has answered a telephone call and then return to normal volume when the call ends. You could even start to analyse the emotional reactions of your viewers and make content suggestions based on whether they laughed harder at Steve Martin or Robin Williams. Another possibility would be to build gesture controls into your player. This technology would theoretically allow you to create a video player that is driven by hand or even head gestures.

Optimizing Your Advertising Revenue

Obviously the potential for increasing ad revenue is another draw card for this new technology. By intelligently controlling the timing of your advertising, you can ensure that your ads are shown at times when they will have maximum impact. An obvious rule you could build into your workflow would be not to show ads if the viewer is out of the room or asleep. Other examples could be to show ads when the viewer has shown a positive facial reaction to a product placement within the video, or not to show specific advertising if the user is showing signs of distress or discomfort.

What’s Next for User Aware Video?

Bitmovin is a very customer driven company and our development roadmap is often guided by customer needs. User Aware Video is one of the exceptions. We have built this feature because we can see the huge number of practical applications and optimizations that is enables. The Bitmovin team is excited to see how our customers will put it to use, and what the results will be. If you are interested in finding out more about User Aware Video, contact the sales team for a demonstration.

Video technology guides and articles

The post Adjust to Viewers as They Watch (and as They Don’t) with User Aware Adaptation appeared first on Bitmovin.

]]>
Delivering high quality video with HTML5, Android, iOS & Smart TV SDKs https://bitmovin.com/blog/delivering-high-quality-video-ios-android-sdks/ Tue, 12 Dec 2017 09:02:15 +0000 http://bitmovin.com/?p=21969 Delivering video to every device, every platform and every browser has become one of the biggest challenges in video. OTT, TVE and SVOD Traditional video entertainment continues to be disrupted by Subscription Video On Demand (SVOD) services in major markets worldwide and Pay TV service operators and broadcasters fully understand that OTT and TVE are...

The post Delivering high quality video with HTML5, Android, iOS & Smart TV SDKs appeared first on Bitmovin.

]]>
React Native,Flutter - Bitmovin

Delivering video to every device, every platform and every browser has become one of the biggest challenges in video.

OTT, TVE and SVOD

Traditional video entertainment continues to be disrupted by Subscription Video On Demand (SVOD) services in major markets worldwide and Pay TV service operators and broadcasters fully understand that OTT and TVE are the keys to sustaining user engagement and revenue growth.
Frost & Sullivan forecasts that SVOD subscriptions will double from more than 500 million accounts in 2015 to over 1 billion by 2021. While OTT- capable consumer device sales is projected to grow from 2.9 billion units in 2016 to 3.5 billion units by 2021. Smartphones account for 72% of video-enabled consumer electronic devices sold in 2016, compared to 7% Smart TVs and 2% Media Streaming Devices.
Mobile device usage clearly dominates the devices space and these are some of the most finicky devices to target, especially as fragmented platforms dominate the space.
Video player devices shipped in 2016
 
VR and 360 video is another growth area that further complicates the issue. Sales for high end headsets such as Samsung Gear VR, Oculus Rift and Google Daydream boomed in 2016. But most analysts are estimating over 95% of immersive device sales in 2017 will be for mobile based headsets, with Google Cardboard being by far the most popular. Most of these lower end devices will support almost any modern mobile device.

Meeting viewer expectations everywhere

The implication of these surging numbers for content providers, is that viewers, who are increasingly more comfortable with “TV anywhere”, expect the viewing experiences to seamlessly transfer across devices – not only with respect to the content awareness, but also the look & feel and functionality of the playback solution.
Delivering a high quality video experience to users across multiple screens means dealing with multiple devices, multiple operating systems and multiple browsers. A comprehensive solution that maximizes quality and minimizes your costs will require a combination of multiple standards and codecs at the encoding stage, a versatile and universally compatible playback solution and a workflow that can scale to your needs, with enough redundancy to ensure a consistent service.

Adaptive Bitrate Streaming

Playback screen sizes and bitrates

Adaptive Bitrate Streaming (ABR) was created specifically to deal with serving video to a variety of different screens and these days is a fairly well understood concept. The actual “adaptation” is performed on the user’s device, as the adaptive player recognizes changes to its environment (e.g., bandwidth drops) and downloads video chunks that best fits the situation. The most significant factors in this process are screen size and bandwidth. As bandwidth changes, so too can the bitrate (and the quality) of the video. As the screen size changes, the player will switch to a resolution and bitrate that delivers the best possible quality without the risk of buffering.

Adaptation logic and custom logic

The logic that controls the adaptation lives within the software that drives your video player. There are several factors to be considered such as startup quality and buffer controls as well as specific characteristics that may be unique to your users.
Generally speaking users expect streamed videos to start playback instantly, or within a fraction of a second. In fact research shows that if the startup time is longer than just 2 seconds, around 50% of users will switched to other content or services. A state of the art video player will allow this adaptation logic to be customized to best serve your users. By customizing your adaptation logic to the data you collected on your user’s behaviour and environment (i.e. device or screen), you can ensure that your video will start at the best possible quality but at a bitrate that is low enough to ensure an instant start up.

The User Interface

Unifying the look and feel of your player across all devices

The presentation of your interface should also be consistent across all devices and for many this will include native mobile applications, both Android and iOS. Everything from the color and style of your buttons, to the menu options in the advanced config to the size and position of your logo. Furthermore, as screens get smaller it is likely that your player will need to display fewer controls, or hide them in menus.

Web HTML5, Android, iOS, Smart TVs and a unified config

Although this challenge seems quite trivial on the surface, as you look at the practical side of building the user interface, and updating it across all devices each time there is a change, the UI can become a potential block and tie up a lot of resources. To solve this problem, some high end video players now offer unified configurations for their UI which streamlines the process of implementing and maintaining the look and feel through a central file. This type of solution saves resources and elso ensures a completely consistent presentation without the risks involved with maintaining multiple files.
Unified API, config and UI for every platform

Which Files Play On Which Devices

HLS and MPEG-DASH to cover all scenarios economically

At the beginning of this article we started with the playback and adaptation required to deliver a quality experience on all devices. With each adaptation the player makes, a different file needs to be downloaded and played, and this is where your encoding workflow needs to be prepared to cover all the necessary browsers and devices, both to ensure complete coverage, but also to minimize costs.
The two most common ABR standards in use today are MPEG-DASH and HLS. HLS is a widely supported format developed by Apple, but shows no likelihood of becoming an official standard. On the otherside MPEG-DASH is an official standard, and so is seeing a steady growth in support and is currently supported everywhere other than iOS. By using these two standards in combination you can deliver video to every device and browser, and at the same time optimize your costs, and user QoE scores.

Using advanced codecs to improve quality and reduce CDN costs

The choice of codec (which is essentially the way you compress your video file), will impact your workflow in a variety of ways. As the industry pushes the envelope in terms of user experience with 360 video and Super HD formats, compression has become a hot topic. Recent uncertainty around HEVC royalties have arisen at around the same time as the release of the new VP9 codec which offers an attractive alternative. Although VP9 is not 100% cross compatible, it covers a surprisingly large slice of the pie (see figure 3), and should be considered both for it’s ability to deliver a better picture quality, and it’s potential to save up to 50% of your bandwidth usage compared to H.264/AVC.
Codec compatibility by browser

Solving The Big Problems

Bigger and bigger file sizes

As discussed above, VP9 and other advanced codecs are a big part of the solution when we start looking at the growing problem of large resolution video files. Another development on the horizon in the field of 360 & VR video is tile based streaming. The nature of 360 video creates much larger files sizes simply due to the extra pixels required for a spherical image. Many of these pixels are outside of the viewport and never seen. This causes unnecessarily high bandwidth requirements and CDN costs.
Tile based streaming is a revolutionary technique that solves this problem by breaking a 360° video into “tiles” and streams the highest quality only to visible sections of the video, and uses lower quality (smaller) files for unseen tiles. By saving significant amounts of bandwidth, tile based streaming promised the potential to stream 360 with a much higher QoE to all devices, particularly mobile devices which usually have slower connection speed. At the same time these bandwidth savings can dramatically reduce bandwidth costs.

DRM and content protection across multiple device/OS

Digital Rights Management (DRM) is a mandatory requirement for most content providers and creates another set of challenges to delivering a completely cross browser/device solution. DRM is a digital license system that allows content creators and distributors to control who can use their content, and how they can use it. To protect content with DRM, each video is encrypted with media keys during the encoding stage.
There are a variety of different DRM technologies available, and each one has limitations which forces content providers to incorporate a “multi-DRM” solution to achieve complete coverage. For a comprehensive explanation of DRM we recommend the Streaming Media DRM Superguide, or the Bitmovin DRM Whitepaper which can be downloaded at: bitmovin.com/DRM

Analytics will light the path

As technology and content offerings continue to develop, so will user behaviour. New devices will become more popular, browsers will update and improve user behaviour will change accordingly. As these new trends develop, successful content providers will adapt both their techniques and technologies to keep the users happy.
The importance of analytics will become more and more important as these changes occur, and the content providers who are able to read the trends and adapt quickly will come out on top. Analytics software for video needs to measure the performance and behaviour of just about everything mentioned in these article. Everything from the rise in popularity of a new device, to a particular section in a video that seems to buffer more often that average. Analytics will deliver the actionable advice that will allow providers to achieve and maintain complete cross browser and device compatibility.

Summary of the Bitmovin solution

As part of the team that developed the MPEG-DASH standard, Bitmovin understands adaptive streaming better than anyone in the world. We were the first to market with a commercial MPEG-DASH player, the first to encode video at 100x realtime making our encoder the fastest in the world, the first to release a completely cross browser 360 video player and more recently we delivered the world’s first live streaming AV1 demonstration, winning the Streaming Media “Best in Show” award for 2017.
As a genuine innovator in the field of adaptive streaming, Bitmovin has always considered cross browser and device compatibility as a requirement for every product we have developed. This has driven us to create a complete range of solutions for online video that includes encoding, playback, analytics, DRM, advertising, API, mobile SDKs and incorporates technologies such as HLS, MPEG-DASH, HEVC, VP9 and many more.
For more information, contact us to arrange a meeting with one of our product experts.

The post Delivering high quality video with HTML5, Android, iOS & Smart TV SDKs appeared first on Bitmovin.

]]>
How the iOS 11 Release with HLS/HEVC Support will Help to Save Storage & CDN Costs https://bitmovin.com/blog/ios-11-release-hlshevc-support-will-help-save-storage-cdn-costs/ Tue, 12 Sep 2017 09:40:33 +0000 http://bitmovin.com/?p=21463 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...

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

]]>

React Native,Flutter - 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.
React Native,Flutter - Bitmovin

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:

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:

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.

]]>
Bitmovin Android and iOS SDKs: Unified API, UI & Config https://bitmovin.com/blog/introducing-bitmovins-android-ios-sdks/ Thu, 13 Apr 2017 10:53:16 +0000 https://bitmovin.com/?p=19380 Bitmovin’s native mobile SDKs provide a unified UI and configuration which ensures a consistent presentation and user experience across all devices. As more and more users are watching video using apps, we at Bitmovin focus on developing native SDKs for our customers to make it easier to provide a unified video experience across all platforms...

The post Bitmovin Android and iOS SDKs: Unified API, UI & Config appeared first on Bitmovin.

]]>
React Native,Flutter - Bitmovin

Bitmovin’s native mobile SDKs provide a unified UI and configuration which ensures a consistent presentation and user experience across all devices.

As more and more users are watching video using apps, we at Bitmovin focus on developing native SDKs for our customers to make it easier to provide a unified video experience across all platforms and devices. With our new mobile SDKs we bring a first class video experience to your native applications. Our native player libraries enable you to expand your audience with a feature-rich video player. We enable developers to easily integrate an adaptive streaming player for HLS and MPEG-DASH, with the outstanding quality of our HTML5 player.
Integrating different frameworks for different platforms and devices can be challenging and often requires lots of resources. Our native SDKs extend Bitmovin’s existing player framework allowing you to deploy our player to platforms such as Android, iOS and the web using just one unified configuration and UI. Maintaining different player configurations and UI definitions is no longer required. (Download the Mobile SDK Datasheet)
Besides the comprehensive feature set of our player, like Multi-DRM, Ads, VR and 360 video, etc., we have also developed an additional component, enabling offline DRM playback, making Bitmovin’s native player framework suitable for use-cases in a mobile environment.

Unified Experience Across All Platforms

One main design goal for our SDKs was to provide a unified experience for integrating our player framework into your projects across all supported platforms. With our native SDKs, a homogenous configuration can be used across all platforms and one player can be deployed everywhere.
Unified config to the mobile SDK video player

Unified Player Configuration

Our HTML5 Adaptive Streaming Player offers the possibility to configure the player using a simple JSON configuration object. This configuration object lets you define and store all the custom settings you want to use to deploy our player. With the introduction of our native SDKs for Android and iOS you can use the same configuration to deploy your native mobile applications. As with the HTML5 player, you just have to pass this configuration object to the setup() API call of the native player. In contrast to other solutions, there is no need to maintain different player configurations across different platforms. In addition to that, it is also possible to alter and modify the standard player configuration to your needs before passing it to the native player.

Universal User Interface

With the release of Player Version 7, we introduced an open-source user interface based on TypeScript and SCSS that compiles to JavaScript and CSS. The interface allows you to customize the look of the player to your needs, whether you just want to make some minor changes, like modifying colors or changing image assets, or you want to build an entire custom UI based on the provided UI framework.
This customizable UI capability can be applied to both, our adaptive HTML5 player, as well as our native Android and iOS Player SDKs, enabling the same look and feel presented to your users across all platforms. Since this UI is implemented using web technologies, it runs inside a small web-component which is layered on top of the video surface in the native player. You benefit from implementing the UI only once, which saves resources and enables easy modification across all players.

Unified Player API

The possibility of providing a universal user interface, which also works in common with our adaptive HTML5 player, was enabled by implementing the same player API across all platforms. All API calls and events you are already familiar with from our HTML5 player are also present in the native player frameworks. This comprehensive and powerful API enables an easy and straightforward integration and lets you tailor the SDKs to fit any use case.
Bitmovin native SDKs

Simple But Powerful

We focused on building a simple-to-use API for setting up the native players. For enabling basic adaptive video playback using our SDKs, you just have to add a few lines of code to your project, as showcased in an example below.
Our SDKs come with everything you need to get started. For simpler use cases without special requirements you can use the SDK’s built-in components without further modifications, to make your streaming project a success. However, we developed our native player framework to provide the flexibility to customize and adapt to all of your current and future use cases.
For instance you can use the customizable Bitmovin UI, introduced with version 7 of our HTML5 player, to build a fully customized UI for the native player as described before. This UI is based on JavaScript and CSS and runs inside a Web View component on top of the video surface. In addition to that, we also provide the possibility to implement a new player UI completely on your own, using the player API provided by the internal player object as can be seen in the above graphic.

Features

Our SDKs come with an extensive set of features, which is continuously expanded:

  • MPEG-DASH, HLS and Progressive Video
  • Live and VoD
  • DRM (Widevine, FairPlay)
  • Offline playback (including with DRM)
  • Timed metadata (ID3 & EMSG)
  • IMA Ad SDK
  • Highly customizable skin
  • Subtitles and Closed Captions
  • Multi-audio/language support
  • Chromecast and Apple TV compatible
  • Bitmovin Analytics integration

In addition to the capabilities we provide with our adaptive HTML5 player, we added some features which are especially important for mobile platforms like Android and iOS. One of them is the offline playback and DRM support. With our SDKs we provide the possibility to download and store multimedia content locally on the mobile device. When these assets are DRM protected, a special offline license can be acquired to enable the playback of this stored content without the need for an active internet connection.

Version support

At the moment following platform versions are supported:
Android:
Android 4.1+ (API level 16+)
DRM support, including offline DRM: 4.4+ (API level 19+)
iOS:
iOS 8+
Offline DRM support: iOS 10+

Examples

To show how easy our SDKs can be used to integrate our powerful adaptive video player into your applications, we have prepared two small examples. For the sake of simplicity we decided to present these examples for our Android SDK, but they can be easily implemented likewise using our iOS SDK.

Basic Adaptive Video Playback

The following example shows how our Android SDK can be used to set up the player for basic adaptive video playback using a default configuration.
The Android SDK comes with the BitmovinPlayerView which can be embedded into the layout of your activity. In the code you just have to get a reference to that view element, which also provides access to the underlying player object.

// get a reference to the player view which is defined in the activity layout
bitmovinPlayerView = (BitmovinPlayerView) findViewById(R.id.bitmovinPlayerView);
// get a reference to the player
bitmovinPlayer = bitmovinPlayerView.getPlayer();

In the next step you need to create a player configuration. You can use the default configuration which you get by just creating a new PlayerConfiguration object. The only thing we need to set on this configuration is the media asset you want to play back. This could be a DASH stream, like in this example, HLS or progressive MP4 asset.

// Create a new player configuration
PlayerConfiguration playerConfig = new PlayerConfiguration();
// Add a new source item
playerConfig.setSourceItem("http://www.example.com/stream.mpd");

As described before, you could also use an existing JSON configuration, as used for our HTML5 adaptive player to create this PlayerConfiguration object:

// Create a new player configuration from a JSON configuration
PlayerConfiguration playerConfig = PlayerConfiguration.fromJSON(“http://www.example.com/config.json”);

In the final step you pass the player configuration object to the player instance by calling its setup method, and the player is ready to use.

// setup player using the created player configuration
bitmovinPlayer.setup(playerConfig);

Playing DRM Protected Content

Playing back DRM protected content is also just as easy as you would expect from our SDKs. At first, you need to embed the BitmovinPlayerView into your activity as described before. Alternatively, we provide the BitmovinPlayerFragment, which includes the BitmovinPlayerView and already implements the handling of it’s lifecycle. This approach is easier to handle and recommended for less experienced developers.

// get a reference to the player view which is defined in the activity layout
bitmovinPlayerView = (BitmovinPlayerView) findViewById(R.id.bitmovinPlayerView);
// get a reference to the player
bitmovinPlayer = bitmovinPlayerView.getPlayer();

After creating the default configuration, we now create the SourceItem which will contain all informations about the video stream and the content protection.

// Create a new player configuration
PlayerConfiguration playerConfiguration = new PlayerConfiguration();
// Create a new source item
SourceItem sourceItem = new SourceItem("http://www.example.com/stream.mpd");

In addition to the URL of the video stream to be played, we now need to provide the DRM license URL and set it on the SourceItem along with an identifier for the DRM scheme used. The source item then has to be passed to the player configuration object created before.

// setup DRM handling
String drmLicenseUrl = "https://www.example.com?param1=value1&param2=value2";
sourceItem.addDRMConfiguration(DRMSystems.WIDEVINE_UUID, drmLicenseUrl);
// Add source item including DRM configuration to player configuration
playerConfiguration.setSourceItem(sourceItem);

In the final step you again have to pass the prepared player configuration object to the setup method of the player and we are ready for playback!

// setup player using the created player configuration
bitmovinPlayer.setup(playerConfiguration);

Conclusion

With the development of our native Android and iOS SDKs we offer you a unified video experience across all devices to our customers. With the concept of a homogenous player configuration and a unified UI framework you are able to deploy our player to Android, iOS, and the web using the same resources. Our SDKs hide all the complexity of streaming media and enables our customers to get started easily. Our SDKs are highly customizable and configurable to any use case.

React Native,Flutter - Bitmovin

The post Bitmovin Android and iOS SDKs: Unified API, UI & Config appeared first on Bitmovin.

]]>