Question

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

某些视频包含部分，这些部分需要在视频中的特定时间开始播放。例如，我有一个包含2个部分的视频，第1部分从0:00开始，但是当我点击侧边栏中的“第2部分”时，视频应该在1:30秒开始播放到视频中。

现在我使用以下代码进行了此操作，但是当我点击第2节时，海报图像仍在播放视频，该第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);

Answer 1

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

一种临时的解决方法，但它运作良好。

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

1 个答案: