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

Posted 2023-05-08

【中文标题】HTML5 视频：在视频和海报之间显示加载器/微调器

【英文标题】：HTML5 Video: Show Loader/Spinner between Video & Poster

【发布时间】：2015-12-21 01:45:52

【问题描述】：

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

我有一个 Video.js 播放器，它显示一个“播放”按钮，当单击此按钮时，播放器会显示黑屏，直到从 S3 存储桶加载视频。我怎样才能显示一个加载器来代替那个黑屏？

【问题讨论】：

而不是“想要”，如果您能解释到目前为止您已经尝试过什么，以及您面临的确切“问题”是什么，这将对这里的每个人都有帮助......

感谢您的建议，我想我已经在问题本身的第二段中解释了这个问题。

你试过poster属性github.com/videojs/video.js/blob/master/docs/guides/…吗？你能提供一些代码吗？

是的..我的海报属性工作正常，我想在点击播放图标后海报消失后有另一个图像。

【参考方案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;

【参考方案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 事件侦听器中的原因是，我注意到有时在多次触发事件时寻找该事件。 p>

【参考方案3】：

我迟到了 5 年，但一个可能性是做这个视频可见性 = 隐藏并抛出 async() 并等待 video.play()，在这一刻做另一个视频“可见”的可见性。

这是一个小技巧

【参考方案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;