ios - Mobile Safari - 等到 完全下载后再播放

Question

我正在构建一个非常复杂的网站 <video>涉及在视频的时间轴上跳来跳去的体验。为了让它尽可能流畅地工作，最好在视频完全缓冲之前不要开始播放它。

我在桌面浏览器中进行了设置和工作(`preload="auto"让我主要到达我需要去的地方)但是当然移动浏览器不会预加载内容并且需要用户交互来启动视频缓冲。

我的问题:在 Mobile Safari 中，是否有可能在用户点击“播放”后不让视频开始播放直到它完全下载？

我正在使用 Popcorn HTML5 媒体框架(如果有帮助的话)。

Answer 1

有一个名为 canplaythrough 的 DOM 事件您可以在 JavaScript 中订阅。当浏览器估计它可以播放整个视频而无需暂停缓冲时，将调用此事件。

编辑:同样，您可以使用progress 事件来确定缓冲了多少视频:

var player = document.getElementById('video_player'); // The <video> element
player.addEventListener('progress', onVideoProgressUpdate, false);

function onVideoProgressUpdate(e) {
    var percentageBuffered = 0;

    if (player.buffered.length > 0 && player.buffered.end && player.duration) {
        percentageBuffered = player.buffered.end(0) / player.duration;
    } else if (player.bytesTotal != undefined && player.bytesTotal > 0 && player.bufferedBytes != undefined) {
        percentageBuffered = player.bufferedBytes / player.bytesTotal;
    }

    if (percentageBuffered == 1) { // 100% of the video has been buffered
        player.Play();
    }
}