我在设置为display: none;的页面上有一个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;
});

但是随后在控制台中出现以下错误:



有任何想法吗?
先感谢您。

最佳答案

您需要使用contents()来获取iframe内容,然后找到video元素。另外,您还应确保在div可见后(即在完成淡入淡出之后)执行此操作。原因是当包含diviframe隐藏时,该video将不会播放。

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

关于jquery - 使用iFrame内的jQuery播放视频,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/7296815/

10-09 08:40
查看更多