解决三星等设备video标签播放hls视频时候只有声音没有视频。。。

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:

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?

share | improve this question
 

2 Answers

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.

share | improve this answer
 

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 srcis 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.

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值