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');

});

只是要清楚 - ＆＃39; #sourceIDID＆＃39;应该替换为您提供source元素的ID，以及＆＃39; test2＆＃39;应该用新视频的名称替换。

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>

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

2 个答案: