我希望我的视频在点击时切换到另一个视频，我该怎么做？

Question

我希望我的视频在您点击某个分区时切换到另一个视频。有点像在 youtube 中，但没有使用 youtube 视频。请帮我。这是我的代码：

 <!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){

            setTimeout(function() {
                // Do something after 5 seconds
                document.getElementById("show").style.visibility = "visible";
            }, 5000);
        });

    </script>
</head>
    <div class="item">
    <div class="video">
        <div id="show" style="visibility: hidden"> Klik hier voor een andere video</div>
        <video width="600" controls autoplay>

            <source src="video/test.MP4" type="video/mp4">
            Your browser does not support HTML5 video.
        </video>
    </div>

 </body>
 </html>

Answer 1

像这样的东西应该有用。首先在 source 元素中添加一个 ID，然后在 setTimeout

之后添加这个

$('#show').on('click', function() {

    $('#sourceID').attr('src', 'video/test2.mp4');

});

明确一点 - “#sourceID”应替换为您为 source 元素提供的 ID，而 'test2' 应替换为新视频的名称。

Answer 2

像这样？

var buttons = document.getElementsByTagName('button');

var myFrame = document.getElementById('myFrame');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function(e) {
    myFrame.src = this.dataset.src;
  });
}

<button data-src="https://www.youtube.com/embed/GtUVQei3nX4">Video 2</button>
<button data-src="https://www.youtube.com/embed/wsfEMBZQQ0k">Video 3</button>

<iframe id="myFrame" width="560" height="315" src="//www.youtube.com/embed/ScMzIvxBSi4" frameborder="0" allowfullscreen></iframe>

我希望我的视频在点击时切换到另一个视频，我该怎么做？

I want my video to change on click to another video, how can I do that?

html

javascript

video