Question

提前抱歉，因为我不熟悉JQuery！我尝试在这些条件的页面上上传2个视频：第一个视频在页面加载时自动播放，第二个视频在页面加载时隐藏，在第一个视频播放完毕时显示。这就是我所做的（知道我甚至不能让第二个视频消失：/）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet" />
<title>Coding Test 3</title>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {

    $('video#vid2').hide();

    $('video#vid1').bind('ended', function() {
       $('video#vid2').show()
       $('video#vid2').play();
        }
    })

});
</script>
</head>
<body>
    <div id="container">
        <header>    
            <h1>Backin' Up</h1>
        </header>
    <section>
            <p>The Backin' Up Song started with an interview on Kansas TV station KMBC in which a woman describes witnessing an attempted robbery at a Shell gas station.</p>
            <p>Autotune the News appropriated the video to produce "Backin' Up Song" which creates a song from the witness's description of events.</p>
            <div class="videoWrapper">
                <video id="vid1" controls autoplay>
                    <source src="videos/backinupsong.mp4">
                    <source src="videos/backinupsong.ogv">
                </video>
            </div>
            <p>"Backin' Up Song" was subsequently covered by Canadian indie band Walk Off the Earth. You can watch it below when the original has finished playing.</p>
            <div class="videoWrapper">
                <video id="vid2" controls autoplays>
                    <source src="videos/wotebackinupsong.mp4">
                    <source src="videos/wotebackinupsong.ogv">
                </video>
            </div>
        </section>

    </div>
</body>
</html>

欢迎任何帮助！非常感谢！

Answer 1

我已经改变了你的代码，我使用纯Javascript，而不是jQuery，看看：

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('vid1').addEventListener('ended', function() {
    var vid2 = document.getElementById('vid2');
    vid2.classList.remove('hidden');
    vid2.play();
  });
});

.hidden {
  display: none;
}

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Video</title>
</head>
<body>
  <div id="container">
    <header>
      <h1>Backin' Up</h1>
    </header>
    <section>
      <p>The Backin' Up Song started with an interview on Kansas TV station KMBC in which a woman describes witnessing an attempted robbery at a Shell gas station.</p>
      <p>Autotune the News appropriated the video to produce "Backin' Up Song" which creates a song from the witness's description of events.</p>
      <div class="videoWrapper">
        <video id="vid1" controls autoplay>
          <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
        </video>
      </div>
      <p>"Backin' Up Song" was subsequently covered by Canadian indie band Walk Off the Earth. You can watch it below when the original has finished playing.</p>
      <div class="videoWrapper">
        <video id="vid2" class="hidden" controls>
          <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
        </video>
      </div>
    </section>
  </div>
</body>
</html>

正如您所看到的，它正如您期望的那样工作，所以您只需要将视频源更改为您的视频，它也可能适合您！：）

Answer 2

您的code：

中有语法错误

$(document).ready(function() {

    $('video#vid2').hide();
    $('video#vid1').bind('ended', function() {
       $('video#vid2').show()
       $('video#vid2').play();
        }//this here is causing error which is invalid too. Remove this
    })

});

休息一切看起来很好。

我想补充的建议。来自 this source ，

从jQuery 1.7开始，.on()方法是首选方法将事件处理程序附加到文档。对于早期版本， .bind()方法用于直接将事件处理程序附加到元素。处理程序附加到当前选定的元素中 jQuery对象，因此这些元素必须存在于调用点发生.bind()。有关更灵活的事件绑定，请参阅讨论 .on()或.delegate()中的事件委托。

JQuery：在页面加载时隐藏第二个视频，然后在第一个完成播放时显示第二个视频

2 个答案: