これを行う方法の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>