Video.js: Native HLS broken on android chrome 78

Created on 26 Oct 2019 · 18Comments · Source: videojs/video.js

Description

On android with the lastest chrome (78) hls stream freezes. Strangly if there is any event on the page (eg: scrolling, css animation), the video plays properly during the animation. Audio plays without an issue. Was working with chrome 76. Example: https://videojs.com/advanced/#sintel

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

open chrome 78 on android
open https://videojs.com/advanced/#sintel

Results

Expected

Stream plays properly.

Actual

Stream has huge lags or freezes completely. When scrolling down the stream plays properly, but only during scrolling.

Error output

No errors.

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

what version of videojs does this occur with?
we use 7.6.0, not sure what version the linked example runs

browsers

what browser are affected?
mobile chrome 78

OSes

android

plugins

not sure

Source

masterada

👍2

Most helpful comment

That's horrible. If you use the overrideNative option to play HLS with MSE rather than Android's native support. it plays normally: https://output.jsbin.com/haluqezehu

{
  html5: {
    hls: {
      overrideNative: !videojs.browser.IS_SAFARI
    }
  }
}

It's about time that was a default option but I think we've been waiting on a major version bump to change that.

mister-ben on 27 Oct 2019

👍6 🚀1 ❤1 🎉1

All 18 comments

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

welcome[bot] on 26 Oct 2019

Also tested successfully on Chrome 77 but seeing this issue on Chrome 78. Oddly if I scroll up and down and keep the video in frame, the video plays normally.

aaronsoulliere on 27 Oct 2019

That's horrible. If you use the overrideNative option to play HLS with MSE rather than Android's native support. it plays normally: https://output.jsbin.com/haluqezehu

{
  html5: {
    hls: {
      overrideNative: !videojs.browser.IS_SAFARI
    }
  }
}

It's about time that was a default option but I think we've been waiting on a major version bump to change that.

mister-ben on 27 Oct 2019

👍6 🚀1 ❤1 🎉1

Can confirm. Setting overrideNative: true for android devices, will get rid of freeze/lag.

latger on 27 Oct 2019

👍3

Can confirm I'm having the same issues. Does overrideNative work within the data-setup tag? I tried, but it didn't fix the problem for me.

Tralapo on 1 Nov 2019

It does but the catch is that if you're supplying the source in a src attribute or <source> element and the browser has already loaded the source, it's used as-is so won't be reloaded with MSE. Use a <video-js> element instead of <video> tho avoid that.

mister-ben on 1 Nov 2019

Thank you, didn't know about the video-js yet.

I tried to change it, but no result yet in Chrome Android. Am I doing something wrong? This is my tag now:

<video-js id="Webcam" class="vjs-16-9 vjs-default-skin vjs-big-play-centered" controls preload="none" poster="poster.jpg" data-setup='{"overrideNative":true,"controlBar":{"liveDisplay":true,"volumePanel":false,"currentTimeDisplay":false,"timeDivider":false,"durationDisplay":false,"remainingTimeDisplay":false,"progressControl":false, "audioTrackButton":false, "captionButton":false, "subtitlesButton":false, "descriptionsButton":false}}'><source src="stream.m3u8" type='application/x-mpegurl' /></video-js>

Tralapo on 1 Nov 2019

overrideNative shouldn't be a top level option.

data-setup='{"html5": {"hls": {"overrideNative":true}}, "controlBar": …

bcbclifford on 3 Nov 2019

// Create video.js player
this.player = videojs( 'player', {
  html5: {
    hls: {
      overrideNative: !videojs.browser.IS_SAFARI,
    },
  },
});

worked as well (though I'm not sure why the safari option is needed, or if it is needed).

DispatchCommit on 4 Nov 2019

I can confirm the problem and also the solution. Just want to add that it is not just only Chrome problem, but also Firefox showing the same behavior. Other browsers seems to work fine.

ccornybig2 on 8 Nov 2019

Cant reproduce now. On Chrome 78.0.3904.96, Android 9

Kogoruhn on 14 Nov 2019

They fixed it already, fortunately: https://bugs.chromium.org/p/chromium/issues/detail?id=1022417

herrernst on 14 Nov 2019

In chrome version 78 (mobile ) , when I used data-setup='{}' then this gives issue otherwise it worked well.

programmeratl on 14 Nov 2019

I can still reproduce the issue, worked on this problem from time to time the last two month but need your help to go deeper. All my LiVE stream problems started when I switched from HTTP to HTTPS LiVE stream.
See below fault findings so far and give me your thoughts since I am not sure if this is only Android/Chrome related and/or VideoJS in a mix. Plyr.js and hls.js works well as default.

HLS (.m3u8) LiVE stream test no VOD.
VideoJS v7.6.x

Android devices:
Samsung Tab 4 (Android v5.0.2) (Chrome v78.0.3904.108)
Sony Xperia Z3 (Android v6.0.1) (Chrome v78.0.3904.96)
Huawei honor 8 (Android v7.0) (Chrome v78.0.3904.96)
Samsung Galaxy A8 (Android v9.0) (Chrome v78.0.3904.108)

Ipad device:
iOS 13.1.2 (Chrome v78.0.3904.84)

PC device:
Windows 10 Pro v1903 (Chrome v78.0.3904.108)

Summary of fault finding tests
HTTPS stream link
Windows 10 Pro web browser Chrome and Edge = Works good.
Macbook Pro web browser Safari = Works good.
Ipad web browser Safari = Works good.
Ipad web browser Chrome = Works good.
Samsung Tab 4 Android = Stream freeze repeatedly.
Sony Xperia Z3 = Works good.
Huawei honor 8 = Works good.
Samsung Galaxy A8 = Stream freeze repeatedly.

HTTPS stream link + overrideNative: !videojs.browser.IS_SAFARI
Samsung Tab 4 Android = Works good.
Samsung Galaxy A8 = Works good.
Ipad Chrome = Stream freeze extremely repeatedly, turns off after a while (worked well in v75).
Ipad Safari = Works good.

HTTP stream link
All good, no freezing so far on any of above mention devices.

VideoJS config
`

DJ-PD on 21 Nov 2019

Yeah, the solution is to use overrideNative. Glad that Chrome is fixing the issue on their end. Please track https://github.com/videojs/http-streaming/issues/505 for when we change this default.

@DispatchCommit the !IS_SAFARI check is useful because Safari has good HLS support, and we prefer using the native implementation when possible.

gkatsev on 21 Nov 2019

👍2

How about the still existing issue...
HTTPS stream link + overrideNative: !videojs.browser.IS_SAFARI
Ipad Chrome = Stream freeze extremely repeatedly, turns off after a while (worked well in v75)
Is this a 100% Chrome issue?

DJ-PD on 22 Nov 2019

👍1

This is a separate issue because it isn't android chrome. However, it does sound like it's best not to enable overrideNative on iOS devices.

gkatsev on 22 Nov 2019

For anybody who runs into this issue. Code for exception should be
html: { hls: { overrideNative: !videojs.browser.IS_ANY_SAFARI } }
IS_SAFARI flag mentioned above would make vidoejs override native on mobile. IS_ANY_SAFARI would make this exception work on iPad, iPhone and desktop as author of original snippet intended.