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:
- Entering or exiting full screen seems to reset the renderer. I suspect this forces the browser to create a new View or something
- Reloading the video seems to help the renderer
- 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);
- This is to fix the "full screen button disappears after you start playing on some devices" bug
- 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
- A helper function. We don't want to restart videos when going fullscreen unless we have to
- The stock Internet browser throws these two events
- 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.