Question

我有视频标记：

<video id="test" autobuffer style="width:100%;" onClick="this.play(); controls>
        <source src="some file" type="video/mp4">

    </video>

还有一些Javascript：

    <script type='text/javascript'>
    var video = document.getElementsByTagName('test')[0];
        video.onended = function(e) {
        document.getElementById('test').innerHTML= '<iframe src="http://www.example.com/myframe" width="100" height="100"></iframe>';
        };
</script>

想法是，当视频结束时（video.onended）只显示视频标签中的iframe或div。广告信息......

我试试，但没有成功..

TNX，

Answer 1

您需要替换整个视频元素，而不是尝试替换其中的子项。因此，请使用parentNode将视频元素设为父级

document.getElementById('test').parentNode.innerHTML= '<iframe src="http://www.example.com/myframe" width="100" height="100"></iframe>';

Answer 2

也许你可以这样做：demo

<div id="test">  
    <video id="v" controls>
        <source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4'>
    </video>
    <iframe id="overlay" src="http://www.w3schools.com"></iframe>
</div>

并添加一些风格

#test {
    position: relative;
}

#overlay {
    position: absolute;
    ... 
}

你只需要添加JavaScript代码，以便在视频结束时隐藏，它将使我认为的工作^^

视频结束后在视频标签内显示iframe或div

2 个答案: