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

对不起，因为我不熟悉JQuery！我试图在以下条件的页面上上传2个视频：第一个视频在页面加载时自动播放，第二个视频在页面加载时隐藏，第一个视频播放时出现。这是我做了（知道，我甚至不能使第二视频消失：/）：JQuery：当页面加载时隐藏第二个视频，然后在第一个完成播放时显示第二个视频

<!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>

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

来源

2015-09-29 Lisa

你想在结束时隐藏第一个视频吗？ – Buzinas

看起来非常有效，你确定jQuery加载正确吗？我不确定它是否确实 – Saar

请检查浏览器控制台是否有错误？ –

我已经改变了你的代码了一下，我使用的是纯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>

正如你所看到的，它的工作你期望的方式，所以你只需要改变视频源到你的视频，它可能也适合你！ :)

来源

2015-09-29 04:11:52 Buzinas

你有语法错误在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()中事件委派的讨论。

来源

2015-09-29 04:12:00

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

回答

相关问题