javascript - 从父级中的播放按钮在 iframe 内播放 html5 视频

Question

我有一个网页，其中包含 iframe 中的视频。可以通过按页面上的链接来更改 iframe 中的视频。我在父页面上有一个播放和暂停按钮，我想用它来开始和停止 iframe 中视频的播放。

在没有 iframe 的页面上，我使用此代码来播放和暂停视频

    <script> 
var vid = document.getElementById("VIDEO"); 

function playVid() { 
    VIDEO.play(); 
} 

function pauseVid() { 
    VIDEO.pause(); 
} 
</script>

我需要获取此脚本来引用 iframe 中的视频。我有什么想法可以让它发挥作用吗？

注意:iframe 中出现的视频都嵌入在自己的页面上，因此我可以将它们设置为不显示播放控件并循环播放。

Answer 1

您的 iframe 文档应与原始文档位于同一域中，否则您将属于 same-origin policy限制。

如果没问题，那么这里是一个例子:

index.html

<iframe src="frame.html" style="width: 200px;height: 200px;" id="video_frame"></iframe>
<br/><button type="button" onclick="play_video()">Play</button>
<script>
function play_video()
{
    document.getElementById('video_frame').contentWindow.playVid();
}
</script>

frame.html

<embed id="VIDEO" ... />
<script> 
var vid = document.getElementById("VIDEO"); 

function playVid() { 
    VIDEO.play(); 
} 

function pauseVid() { 
    VIDEO.pause(); 
} 
</script>