Воспроизвести видео с помощью jQuery, расположенного внутри iFrame

Question

У меня есть iFrame на странице, установленной для отображения: нет:

<div id="the-stage" style="display:none;">
<iframe src="index.html" scrolling="no">
</iframe>
</div><!--end the-stage-->

, в которой есть тег <video>:

<video id="video1" width="345" height="264" controls poster="poster.jpg">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

На странице, на которой естьТег <iframe>, я пытаюсь воспроизвести видео при обнаружении скрытого div:

jQuery("a.launch").click(function(){
jQuery("#the-stage").fadeIn();
jQuery("#video1").get(0).play();
return false;
});

В консоли появляется следующая ошибка:

"невозможно вызвать воспроизведение метода из неопределенного"

Есть идеи?Спасибо.

Answer 1

Вам нужно использовать contents(), чтобы получить содержимое iframe, а затем найти элемент video.Также вы должны сделать это после того, как div станет видимым, т.е. когда исчезновение завершено.Причина в том, что когда div, содержащий iframe, скрыто, video не будет воспроизводиться.

jQuery("a.launch").click(function(){
   jQuery("#the-stage").fadeIn(function(){
       jQuery("#the-stage").find("iframe").contents().find("#video1").get(0).play();
   });
   return false;
});

Answer 2

Вам необходимо получить доступ к document из iframe с contents().

jQuery('#the-stage').contents().find('#video1').get(0).play();