使用位于iFrame内的jQuery播放视频

Question

我在页面设置上显示iFrame:none:

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

其中有一个display: none;标签:

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

在有<video>标签的页面上,我尝试在显示隐藏的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;
});