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：當頁面加載時隱藏第二個視頻，然後在第一個完成播放時顯示第二個視頻

回答

相關問題