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

Question

我在页面的 iframe 中有一个视频。我希望在视频结束时触发一个函数，比如说一个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);  
});

这有点行不通。

知道我能做什么吗？

Answer 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!");});