Question

我遇到了问题，我想通过带按钮的按钮添加视频到播放列表。类似的东西......在第一次播放视频时，有3个带有mp4源的按钮。当我点击那些按钮时，它们就会开始播放。一切正常，但我不想要那件事。当我点击按钮时，我想要创建一个功能，视频在第一个视频后开始播放。像流媒体一样的东西 - http://flash.flowplayer.org/demos/plugins/javascript/playlist/dynamic.html 功能添加到位置2。

<body>

    <div style="overflow: hidden;">
        <video id="video" width="80%" autoplay controls >
            <source id="videoSource" src="video/0.mp4" type="video/mp4">

        </video>

        <a class="btn blue" onclick="changevideo0()">0</a>
        <a class="btn blue" onclick="changevideo1()">1</a>
        <a class="btn blue" onclick="changevideo2()">2</a>
    </div>



    <script>

        function changevideo0() {
        document.getElementById('video').src = "video/0.mp4";}

        function changevideo1() {
        document.getElementById('video').src = "video/1.mp4";}

        function changevideo2() {
        document.getElementById('video').src = "video/2.mp4";}


    </script>


</body>

Answer 1

我稍微改变了你的功能，因为添加许多功能只是为了改变它的一部分效率不高。

你的代码非常好，只是指向错误的元素。

＆＃13;

        function changevideo(source) {
          document.getElementById('videoSource').src = source;
        }

＆＃13;

<body>

    <div style="overflow: hidden;">
        <video id="video" width="80%" autoplay controls >
            <source id="videoSource" src="video/0.mp4" type="video/mp4">

        </video>

        <a class="btn blue" onclick="changevideo('video/0.mp4')">0</a>
        <a class="btn blue" onclick="changevideo('video/1.mp4')">1</a>
        <a class="btn blue" onclick="changevideo('video/2.mp4')">2</a>
    </div>

</body>

＆＃13;

Answer 2

您应该将以下示例视为逻辑代码，因为我没有测试过，检查过语法错误，而且我从头顶知道我是否应该从源头或播放器元素中获取视频的长度HTML。

<body>
    <script>
        var player = document.getElementById("video");

        var videolist = {
          'video/0.mp4',
          'video/1.mp4',
          'video/2.mp4'
        };

        var queuelist = {};

        function changevideo() {
          if(!queuelist.length == 0){
            document.getElementById('videoSource').src = queuelist.shift();
            setTimeout(changevideo, player.length * 1000);
          } else {
            alert("no more video's in queue");
          }
        }

        player.play();
        setTimeout('changevideo', player.length * 1000);
    </script>

    <div style="overflow: hidden;">
        <video id="video" width="80%" autoplay controls >
            <source id="videoSource" src="video/0.mp4" type="video/mp4">
        </video>

        <a class="btn blue" onclick="queuelist.append(0)">0</a>
        <a class="btn blue" onclick="queuelist.append(1)">1</a>
        <a class="btn blue" onclick="queuelist.append(2)">2</a>
    </div>
</body>

如何通过单击带有源的按钮将视频添加到播放列表

2 个答案: