我希望我的视频在点击时更改为另一个视频，我该怎么做

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

本文关键字：另一个 视频 我该怎么做 的视频 我的 我希望      更新时间：2023-09-26

我希望我的视频在你点击某个分区时变成另一个视频。有点像在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>

像这样吗？

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>

这样的东西应该可以工作。首先在source elemnt 中添加一个 ID，然后在setTimeout之后添加此 

$('#show').on('click', function() {
    $('#sourceID').attr('src', 'video/test2.mp4');
});

需要明确的是 - "#sourceID"应替换为您为source元素提供的 ID，"test2"应替换为新视频的名称。

相关文章：