如何在点击HTML中的按钮时弹出视频

问题描述：

这里我嵌入了我的代码。其实我想用弹出的方式播放视频，同时用java脚本点击html中的按钮。此代码正在工作，但视频仍在后台播放。如何在点击HTML中的按钮时弹出视频

function myFunction() { 
 
    var popup = document.getElementById("myPopup"); 
 
    popup.classList.toggle("show"); 
 
    popup.play(true) 
 
}

.popup .popuptext { 
 
    visibility: hidden; 
 
    background-color: #555; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 8px 0; 
 
    z-index: 1; 
 
    bottom: 125%; 
 
    left: 50%; 
 
    margin-left: -80px; 
 
} 
 

 
.popup .show { 
 
    visibility: visible; 
 
    -webkit-animation: fadeIn 1s; 
 
    animation: fadeIn 1s; 
 
} 
 

 
@-webkit-keyframes fadeIn { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 

 
@keyframes fadeIn { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
}

<body style="text-align:center"> 
 
    <div class="popup" onclick="myFunction()"><button>Preview</button> 
 
    <video class="popuptext" id="myPopup" style="width:800px;"> 
 
    <source src="dolby-atmos-intro.mp4" type="video/mp4"> 
 
    </video> 
 
    </div> 
 
</body>

你的意思是从一开始播放视频点击按钮之前？ –

你可以使用引导模式在这里..好教程http://www.tutorialrepublic.com/faq/how-to-embed-youtube-video-inside-bootstrap-modal.php和 – Jana

@Ridhik尝试引导模态弹出窗口。它非常优雅，需要更少的代码。 –

答

切换视频播放/暂停。

<html> 
 
<head> 
 
<style> 
 
.popup .popuptext { 
 
visibility: hidden; 
 
background-color: #555; 
 
color: #fff; 
 
text-align: center; 
 
border-radius: 6px; 
 
padding: 8px 0; 
 
z-index: 1; 
 
bottom: 125%; 
 
left: 50%; 
 
margin-left: -80px; 
 
} 
 
.popup .show { 
 
visibility: visible; 
 
-webkit-animation: fadeIn 1s; 
 
animation: fadeIn 1s; 
 
} 
 
@-webkit-keyframes fadeIn { 
 
from {opacity: 0;} 
 
to {opacity: 1;} 
 
} 
 
@keyframes fadeIn { 
 
from {opacity: 0;} 
 
to {opacity:1 ;} 
 
} 
 
</style> 
 
</head> 
 
<body style="text-align:center"> 
 
<div class="popup" onclick="myFunction()" ><button>Preview</button> 
 
<video class="popuptext" id="myPopup" style="width:800px;" > 
 
<source src="dolby-atmos-intro.mp4" type="video/mp4"> 
 
</video> 
 
</div> 
 
<script> 
 
function myFunction() { 
 
var popup = document.getElementById("myPopup"); 
 
popup.classList.toggle("show"); 
 

 
if (popup.paused){ 
 
    popup.play(); 
 
    } 
 
    else{ 
 
    popup.pause(); 
 
    } 
 
    
 
} 
 
</script> 
 
</body> 
 
</html>

这是工作，但它不会关闭时，我单击ESC键键盘 – Ridhik

为esc键写一个监听器，并检查弹出并关闭它打开 –

我试过了，但它没有工作。你可以在代码段中加入 – Ridhik

答

试试下面的代码

<!DOCTYPE html> 
<html> 
<body> 

<button onclick="openIt()">preview</button> 

<script> 
function openIt(){ 
    window.open("video Url"); 
} 
</script> 
</body> 
</html>

虽然这段代码可能回答这个问题，但提供关于如何解决问题和/或为什么解决问题的附加上下文会提高答案的长期价值。 – Badacadabra

如何在点击HTML中的按钮时弹出视频

相关推荐