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

Posted 2023-05-09

【中文标题】从父级的播放按钮在 iframe 中播放 html5 视频

【英文标题】：play html5 video inside iframe from play button in parent

【发布时间】：2015-12-03 23:50:21

【问题描述】：

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

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

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

function playVid()  
    VIDEO.play(); 
 

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

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

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

【参考方案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>

【讨论】：

非常感谢，效果很好。你不知道我尝试了多少不同的方法。我的大错误是试图将所有脚本放在父级中。拍拍自己的后背；）

Uncaught TypeError: VIDEO.play is not a function 我在运行时遇到此错误