单击html中的按钮时如何将视频播放为弹出窗口

Posted

技术标签:

【中文标题】单击html中的按钮时如何将视频播放为弹出窗口【英文标题】：How to play video as popup while clicking on a button in html 【发布时间】：2017-11-13 19:26:34 【问题描述】：

在这里我嵌入了我的代码。实际上，我想在使用 java 脚本单击 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>

【问题讨论】：

您的意思是视频在点击按钮之前从头开始播放吗？ 你可以在这里使用引导模式..好教程tutorialrepublic.com/faq/…和 @Ridhik 尝试引导模式弹出窗口。它非常优雅，需要更少的代码。 参考***.com/questions/5958132/… 【参考方案1】：

切换视频播放/暂停。 

<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 键时它不会关闭 为 esc 键写一个监听器并检查 pop 并关闭它是打开的 我试过了，但它不起作用。你能在sn-p中添加它吗【参考方案2】：

试试下面的代码

<!DOCTYPE html> 
<html> 
<body> 

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

<script>
function openIt()
    window.open("video Url");

</script>
</body>
</html>

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。

以上是关于单击html中的按钮时如何将视频播放为弹出窗口的主要内容，如果未能解决你的问题，请参考以下文章

将图像显示为弹出框

如何在cros-s-rider的浏览器操作中将html页面设置为弹出窗口

即使关闭后如何停止弹出视频的视频播放背景

如何在单击链接时触发另存为弹出窗口？具体来说，我如何触发 MIME 类型的变化？

将 ViewController 呈现为弹出框

将UserControl显示为弹出窗口