当视频在页面上的 iframe 中完成时触发

Posted 2023-05-09

【中文标题】当视频在页面上的 iframe 中完成时触发

【英文标题】：Trigger when video completes in an iframe on a page

【发布时间】：2017-12-13 03:24:51

【问题描述】：

我在页面上的iframe 中有一个视频。我希望在视频结束时触发function，比如说alert("Finished");。

因此，我想做两件事：

显示警报() 视频结束时触发警报。

视频在 iframe 中。

html

<div class="h5p-iframe-wrapper">
<iframe id="h5p-iframe-3" class="h5p-iframe h5p-initialized" data-content-id="3" style="height: 761px;" src="about:blank" frameborder="0" scrolling="no">

<video src="http://techslides.com/demos/sample-videos/small.mp4" webkit-playsinline="" playsinline="" preload="metadata" class="h5p-video" style="display: block;"></video>

</iframe></div>

这是我尝试过的

$("iframe").each(function()  
        var src= $(this).attr('src');
        $(this).attr('src',src);  
);

这有点行不通。

知道我能做什么吗？

【问题讨论】：

我认为这不可能，除非 iframe 和包含它的页面位于同一个域中。

如果你能发布你的代码的 JSfiddle 链接那就太好了:)

嗨，Aakash，我希望我可以。那个页面乱七八糟。

@Steve 你不能像这样将 iframe 包裹在另一个元素周围。除非不支持 <iframe>，否则 <iframe src='...> 和 </frame> 之间的任何内容都不会呈现。 AFAIK 所有浏览器都支持<iframe>，所以在<frame> 中放置<video> 标签是没用的。

@Steve 除非您的视频与您的网页位于同一域中，否则您无法完全访问 <iframe> 中的视频。见Same Origin Policy

【参考方案1】：

如果 iframe 中没有任何内容，为什么还要在 iframe 中观看视频？

这只是在div 中使用video 标签。

 $(".h5p-iframe-wrapper > video").on('ended',function()  alert('Video has ended!');  );

或

 $("div > video",".h5p-iframe-wrapper").on('ended',function()  alert('Video has ended!');  );

或

$(".h5p-iframe-wrapper").contents().find('video').on('ended',function() alert("Video has ended!"););

【讨论】：

谢谢，它给出了一些语法错误。说，Uncaught SyntaxError: Invalid or unexpected token

对不起，史蒂夫！现在怎么样？