HTML5 视频：在视频和海报之间显示加载器/旋转器

Question

我想在从 S3 存储桶加载我的视频时在 Video.js 播放器中显示加载程序。

我有一个 Video.js 播放器，它显示一个“播放”按钮，单击此按钮时播放器会显示黑屏，直到从 S3 存储桶加载视频为止。如何显示加载程序来代替黑屏？

Answer 1

我遇到了同样的问题，我通过使用 HTML5 媒体事件的事件侦听器并相应地显示\隐藏我的微调器来解决它。

我收听的媒体活动（来源：w3.org）：

waiting- 由于下一帧不可用，播放已停止，但用户代理期望该帧在适当的时候变得可用。

canplaythrough- 用户代理估计，如果现在开始播放，媒体资源可以以当前播放速率一直渲染到结束，而不必停止进一步缓冲。

var video = videojs(#id); //Videojs object
var videoEl = $('video'); //Video element

video.on('waiting', function(event) {
    //Check another spinner element doesn't exist before adding a new one
    if(!videoEl.next('.spinner').length)
        videoEl.after(<div class="spinner"></div>);
});

video.on('canplaythrough', function(event) {
    //Fade spinner out and remove it.
    videoEl.next('.spinner')
        .fadeOut(200, function() {
            $(this).remove();
        });
});

注意：我检查微调器是否已存在于事件侦听器中的原因waiting是因为我注意到有时在查找事件时如果多次触发。