Question

我正在创建一个播放视频的网站，但它也可以选择在不同的视频之间切换。新视频将在与旧的视频等相同的时间戳继续。但是当切换时，存在小的延迟/滞后。有没有办法缓冲或预取所有视频，所以没有滞后？

<video preload="auto" class="v1" src="video/v1.mp4"></video>
<video preload="auto" class="v2" src="video/v2.mp4"></video>
<video preload="auto" class="v3" src="video/v3.mp4"></video>

以下是一些在视频之间切换的jquery代码。（只是为了给你一个想法）

 $(document).ready(function(){

        $(".v1,.v2,.v3")[0].play();

        $(".v1,.v2,.v3")[0].muted = true;

        $(".v2,.v3").hide();
        $(".v3,.v2")[0].pause();

        var time = [];

        $(document).keydown(function(e) {

            time.push($(".v1")[0].currentTime);
            time.push($(".v2")[0].currentTime);
            time.push($(".v3")[0].currentTime);

            $(".v3")[0].muted = true;
            $(".v2")[0].muted = true;

            switch(e.which) {
                case 37: // left

                    if(!$(".v2")[0].paused){
                        break;
                    }

                    $(".v1")[0].pause();
                    $(".v2")[0].pause();
                    $(".v3").hide();
                    $(".v2").hide();

                    if(!$(".v3")[0].paused){
                        $(".v3")[0].pause();
                    }

                    $(".v2")[0].play();
                    $(".v2")[0].currentTime = Math.max.apply(Math,time);
                    $(".v2").fadeIn(100);

                    break;
            }

            e.preventDefault(); // prevent the default action (scroll / move caret)
        });
    });

Answer 1

你有一些可以执行你想要的jquery插件。

您可以查看BigVideo。

在他们的example中，他们有一个“播放列表”示例，您可以根据自己的要求更改视频。

如何缓存/预取网站上的多个视频？

1 个答案: