Question

<iframe id="show" src="activity/heading.html" class="object_adjust" controls frameborder="0" allowfullscreen></iframe>

heading.html

     <video  id="myVideo" controls autoplay>
      <source src="a.mp4" type="video/mp4">
    </video>

如何检索iframe视频ID并在视频停止时执行某些操作？

Answer 1

执行此操作的一种方法是首先获取iframe的文档，然后访问标记名为video的该文档的元素。然后在循环中，您可以访问这些视频元素，并在基于每个视频元素完成视频时执行某些操作。代码看起来像这样：

<html>
<head>
</head>
<body onload="myFunction()">
<iframe id="show" src="activity/heading.html" class="object_adjust" 
controls frameborder="0" allowfullscreen>
</iframe>
<script>
function myFunction() {
    var current_frame = document.getElementById("show");

    //used to grab document from frame
    var video_frame = (current_frame.contentWindow || current_frame.contentDocument);

    if (video_frame.document) {
        //will be used to access elements within iframe
        var frame_doc = video_frame.document;
        var vid_elems = frame_doc.getElementsByTagName('video');

        //access video elements in iframe
        for(var i = 0; i < vid_elems.length; i++) {
            vid_elems[i].onended = function(e) {
                //do something when video ends, alert in this case
                alert('it worked!');
            };
        }
    }
}
</script>
</body>
</html>

如何检索iframe视频ID并在视频停止时执行某些操作？

1 个答案: