我正在设置一个 javascript，它在播放视频后弹出一个 iframe，它在点击播放按钮 11 秒后出现。
我的代码显然是正确的，但由于某些原因根本不起作用。
function myiframe() {
setTimeout(function(){ video.play(), 11000); }
document.getElementById("popup").style.display="block";
document.getElementById("popupstyle").style.display="inline";
var video=document.getElementById("myvid");
var playButton=document.getElementById("play-pause");
playButton.addEventListener("click",function(){
if(video.paused==true){
video.play();
playButton.innerHTML=" ";
} else {
video.pause();
playButton.innerHTML=" ";
}
});
}
<div class="controls"><button type="button" id="play-pause" class="play"><img src="img/play.png"></button></div>
<iframe id="popup" class="whiterussian" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" src="pages/myframe.php"></iframe>
<div id="popupstyle"></div>
也许这样的事情是意图？问题中没有视频元素，所以我在这里添加了一个来测试 - 按钮播放视频 OK，然后在 11 秒后显示 iframe 和 div。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>popups and videos</title>
<style>
#popup{display:none;}
#popupstyle{display:none;}
</style>
</head>
<body>
<video width=400 height=300 id='myvid' autoplay=false controls=true loop=true src='/images/video/bubbles_xtrails.mp4' type='video/mp4'></video>
<div class='controls'>
<button type='button' id='play-pause' class='play'>
<img src='img/play.png'>
</button>
</div>
<iframe id='popup' class='whiterussian' scrolling='no' marginwidth='0' marginheight='0' frameborder='0' src='pages/myframe.php'></iframe>
<div id='popupstyle'></div>
<script>
document.getElementById('play-pause').addEventListener('click',(e)=>{
e.target.innerHTML=' ';
var video=document.getElementById('myvid');
setTimeout( ()=>{
document.getElementById('popup').style.display='block';
document.getElementById('popupstyle').style.display='inline';
}, 11000 );
if( video.paused==true ){
video.play();
}else{
video.pause();
}
});
</script>
</body>
</html>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句