video .js在视频开始前使用currentTime删除海报

Video.js remove poster when using currentTime before video starts

本文关键字:currentTime 删除 海报 js 视频 开始 video      更新时间:2023-09-26

我有一个视频播放列表,在侧边栏中有每个视频的列表。当我在侧边栏中点击我想要加载的视频名称时,播放器会将当前视频切换到我刚刚点击的视频。

一些视频有部分,这些部分需要在视频的特定时间开始播放。例如,我有一个有两个部分的视频,第一部分从0点开始,但是当我点击侧边栏中的"第2部分"时,视频应该在1点30分开始播放。

现在我用下面的代码得到了这个工作,但是当我点击应该在视频中间开始播放的第2节时,海报图像仍然在播放视频。我怎么能摆脱海报图像时,开始与currentTime偏移视频?

(function($) {
    var current, gototime;
    var istime = false;
    // video.js object
    var $player = videojs('ppi-video');
    $('a').on('click', function(e) {
        e.preventDefault();
        var attr = $(this).attr('data-video');
        var time = $(this).attr('data-time');
        if(typeof time !== 'undefined' && time !== false) {
            istime = true;
            gototime = time;
        }else {
            istime = false;
            gototime = undefined;
        }
        // If link has data-video attribute... continue
        if(typeof attr !== 'undefined' && attr !== false) {
            if( current == attr ) return;
            var image_path = "images/screens/";
            var content_path = "source/";
            // Wait till player is ready
            $player.ready(function() {
                // Hide the player?
                $("#ppi-video_html5_api").fadeOut(400, function() {
                        // Change poster
                        $("#ppi-video_html5_api").attr('poster', image_path + attr + ".jpg");
                        $player.poster(image_path + attr + ".jpg");
                });
                $player.src([
                    { type: "video/mp4", src: content_path + attr + ".mp4" },
                    { type: "video/webm", src: content_path + attr + ".webm" },
                ]);
                // Set the currently playing variable
                current = attr;
                $("#ppi-video_html5_api").fadeIn();
            });
        }
    });
    function updateVideo() {
        if( istime ) {
            $player.currentTime(gototime);
            $player.ready(function() {
                    /**
                     * Trying to get rid of poster here, but not working
                     */
                $("#ppi-video_html5_api").attr('poster', '');
                $player.poster('');
                $player.play();
            });
        }else {
            $player.currentTime(0);
        }
    }
    // update video when metadata has loaded
    $player.on('loadedmetadata', updateVideo);

})(jQuery);

我发现自己处于同样的情况,我需要通过编程隐藏海报图像。(我想让海报图片隐藏在自定义洗涤器的拖动)

我发现了两种方法可以帮助处于相同情况的其他人(我知道这是一个旧帖子,但我偶然发现它正在寻找答案)。首先,你可以使用css:

隐藏海报图片
.vjs-poster.vjs-poster.vjs-poster {
  display: none;
}
// specificity bumped for default css, your mileage may vary.

然而,因为我想这是在拖动事件,我想我不妨只是使用js:

  player.posterImage.hide();

看起来在Chrome和Firefox上,设置currentTime()需要延迟一点。我所做的是在视频开始前调用play()pause()来移除海报。然后我设置了一个200毫秒的超时,它有一个回调,然后调用currentTime()

是一种权宜之计,但是效果很好。