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

Question

我在一个页面上的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);  
});

它有点不起作用。

知道我能做什么吗？

Answer 1

如果iframe中没有任何内容，为什么要在iframe中播放视频？

这只是使用video内的div标记。

 $(".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!");});