HLS Stream Android 4.4.2 Samsung Galaxy S5上没有视频

Question

The HLS streams do not play video, but they do play audio.

Device information:

Samsung Galaxy S5

Android 4.4.2 / Build KOT49H

Chrome 36.0.1985.131

HLS Streams that play on other Android builds and devices:

• JWPlayer test videos do not play video:
  • http://www.jwplayer.com/html5/hls/
• These Apple HLS streams also do not play video (but do play audio)
  • http://devimages.apple.com/iphone/samples/bipbopgear1.html
  • http://devimages.apple.com/iphone/samples/bipbopgear2.html
  • http://devimages.apple.com/iphone/samples/bipbopgear3.html
  • http://devimages.apple.com/iphone/samples/bipbopgear4.html
  • http://devimages.apple.com/iphone/samples/bipbopall.html

Using the browser application "Internet" on the Samsung S5, it will play the video for an HLS stream, which made me think this could possibly be an issue with Chrome, however, when tested on a Nexus 5 device with the exact same Chrome build (except Android 4.4.4) and the video plays fine.

Android Issue Queue has Issue 63810: No video in HLS live streaming on Android KitKat and I have contributed what I can.

What can I do to get more information about the nature of the problem?

Is this a legitimate bug with the Android 4.4.2 Samsung S5?

Answer 1

I've noticed this behavior among other issues on 4.4.2 with issues seeming to vary by device and manufacturer. Through experimentation I've noticed the following:

1. Entering or exiting full screen seems to reset the renderer. I suspect this forces the browser to create a new View or something
2. Reloading the video seems to help the renderer
3. Changing sources seems to make things worse

Our product works essentially on a playlist -- when the ended event triggers for one video we change the video src and call .load() and .play() to go to the next one. On some devices if the first src is HLS video plays fine, but if the first src is mp4 or webm then switching to HLS causes you to lose video. On other devices it's the opposite behavior -- starting in HLS fails but switching to it succeeds. On some devices HLS has video if you enter full screen before it starts to play, on others it only has video if you enter full screen after it starts to play. On some devices the full screen button disappears after you start to play.

It's not ideal and it's honestly very hacky, but I've come up with this ugly solution:

// 1.
video.addEventListener('click', requestFullScreen);
// 2.
function requestFullScreen() {
    video.removeEventListener('click', requestFullScreen);
    video.webkitRequestFullScreen();
}
// 3.
function reloadVideo() {
    var ext = video.src.substr( video.src.lastIndexOf('.') ).toLowerCase();
    if( ext == '.m3u8' ) {
        video.load();
        video.play();
    }
}
// 4.
video.addEventListener('webkitbeginfullscreen', reloadVideo, false);
video.addEventListener('webkitendfullscreen', reloadVideo, false);
// 5.
video.addEventListener('webkitfullscreenchange', reloadVideo, false);

1. This is to fix the "full screen button disappears after you start playing on some devices" bug
2. We give this function a name so we can remove it later. If they request to exit fullscreen then they will not blame your player if the full screen button disappears. At this point they'll blame the phone and they'll refresh the page. This way people don't get pissed off if they accidentally fullscreen it again while trying to scroll
3. A helper function. We don't want to restart videos when going fullscreen unless we have to
4. The stock Internet browser throws these two events
5. Chrome throws this event

There are a number of other hacks I've had to implement, as well. For instance, the stock Internet browser on the Galaxy S4 does not always throw an ended event when reaching the end of a video. For this reason I have a setInterval checking every 1 second. If the video has moved less than 0.5 seconds in the last 1 seconds and it was never paused (I have a flag that's set in the resume and pause events) then assume you've hit the end.

Answer 2

I've had success using preload="none" . Switching to auto will only play audio, using none will play both video and audio properly. This was tested on a Samsung S3, Android 4.4.2.

EDIT: autoplay also contributes to the problem. Removing it appears necessary.