Android Chrome: overrideNative has no effect

[wrasmann]

Description

The option "overrideNative" seems to have no effect when videos are played in Android Chrome. This leads to following issues:

1. Native playback can't be disabled on Android

2. It's impossible to use an own playlist selector (different from those defined in playlist-selectors.js), because "overrideNative" doesn't work on Android and thus the video playback behaviour differs from the behaviour on other platforms.

Being able to change the playlist selector can be very important, when you are dealing with a large media library that you can't re-encode and you need to improve quality of the playback by choosing the right streams according to own rules.

3. Playback seems to break for some streams, when Android's native playback is used.

Testcase: https://output.jsbin.com/gusawaqora

Sources

https://jsbin.com/gusawaqora/edit?html,output

Steps to reproduce

1. enable usb debugging on an android device and set up remote debugging with chrome (https://developers.google.com/web/tools/chrome-devtools/remote-debugging/)

2. enter the URLs https://output.jsbin.com/gusawaqora

3. press F5 to record network activity

4. during playback the loading of TS segments can't be observed in the network tab, because native playback is always used

5. the source URL https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8 can't be played back properly using Android native playback (Hit the load button on the page to load it). The playback usually gets stuck.

Results

Expected

"overrideNative" should work on Android and the playback behaviour should be the same on all platforms. I should be able to see the TS segments load on Android.

Error output

I get 2 warnings on the console that are probably not important for this issue: video.js:128 VIDEOJS: WARN: A plugin named "reloadSourceOnError" already exists. You may want to avoid re-registering plugins! gusawaqora:1 The SSL certificate used to load resources from https://devstreaming-cdn.apple.com will be distrusted in M70. Once distrusted, users will be prevented from loading these resources. See https://g.co/chrome/symantecpkicerts for more information.

Additional Information

videojs-contrib-hls version

videojs-contrib-hls 5.14.1

videojs version

video.js 7.0.5

Browsers

Chrome (67.0.3396.87)

Platforms

Android 8 and possibly all other Android versions

Other Plugins

none

Other JavaScript

none

[forbesjo]

To override native HLS playback you'll want this as your player constructor options:

var options = {
  html5: {
    hls: {
      overrideNative: true
    },
    nativeAudioTracks: false,
    nativeVideoTracks: false,
  }
};

[wrasmann]

Thanks a lot for your reply. I have corrected my test case.

I have tested it with the two URLs again:

URL 1: https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_4x3/bipbop_4x3_variant.m3u8 URL 2: https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8

Unfortunately the problem still persists. The result now seems to be that the video is played back natively in case of the first URL despite the "overrideNative" and is played back correctly in case of the second URL.

When I play back the second URL I can see the video and audio segments loading (ts and aac) in the network view of DevTools. When I play back the first URL I can't see the ts segments load.

When I was testing before I had set the overrideNative, nativeAudioTracks and nativeVideoTracks options in all the possible places, because I didn't understand from the documentation that the full path of the overrideNative option was videojs.options.html5.hls.overrideNative.

Here is the new test case URL: https://output.jsbin.com/rojecoyiwu and the source: https://jsbin.com/rojecoyiwu/edit?html,output

[forbesjo]

You may want to try loading the source with player.src(sourceObj), perhaps the native video element is picking up the source element and bypassing this project

[wrasmann]

Hi forbesjo, thanks a lot for your help! Setting "overrideNative" in the proper way AND loading the video source with "player.src(sourceObj)" fixed the problem.