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 
    }) 

});

Rest все выглядит нормально.

Предложение, которое я хотел бы добавить. От this source,

По JQuery 1.7, метод .on() является предпочтительным способом для прикрепления обработчиков событий к документу. Для более ранних версий метод .bind() используется для привязки обработчика событий непосредственно к элементам . Обработчики привязаны к выбранным в данный момент элементам в объекте jQuery, поэтому эти элементы должны существовать в точке, где происходит вызов - .bind(). Для более гибкой привязки событий см. Обсуждение делегирования события в .on() или .delegate().

источник

2015-09-29 04:12:00

JQuery: скрыть второе видео при загрузке страницы, затем отобразить второе видео при первом окончании, чтобы сыграть

ответ

Смежные вопросы