我在设置为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
可见后(即在完成淡入淡出之后)执行此操作。原因是当包含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;
});
关于jquery - 使用iFrame内的jQuery播放视频,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/7296815/