Question

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

我有一个Video.js播放器，显示＆＃34; Play＆＃34;按钮，当单击此按钮时，播放器显示黑屏，直到视频从S3存储桶加载。如何显示装载机代替黑屏？

Answer 1

我也遇到了同样的问题添加自定义“等待”事件并在“播放”事件中将其删除

player.on("waiting", function ()
{
    this.addClass("vjs-custom-waiting");
});
player.on("playing", function ()
{
    this.removeClass("vjs-custom-waiting");
});

CSS 值

.vjs-custom-waiting .vjs-loading-spinner
{
    display: block;
}
.video-js.vjs-custom-waiting .vjs-loading-spinner:before,
.video-js.vjs-custom-waiting .vjs-loading-spinner:after
{
    /* I just copied the same animation as in the default css file */
    -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
    animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
}

Answer 2

我遇到了同样的问题，我通过使用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事件监听器中的原因是因为我注意到有时在搜索事件时如果触发超过一次。

Answer 3

我已经晚了5年，但一个可能的方法是将这种视频可见性=隐藏并扔到async（）上并等待video.play（），此刻又使视频可见性再次出现。

这是一个小把戏

Answer 4

嘲笑@nizam 的回答：

.video-js.vjs-paused:not(.vjs-has-started) .vjs-loading-spinner {
    display: block;
    visibility: visible;
}

.video-js.vjs-paused:not(.vjs-has-started) .vjs-loading-spinner,
.video-js.vjs-paused:not(.vjs-has-started) .vjs-loading-spinner {
    -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
    animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
}

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

4 个答案: