问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

原文由 Ridhik 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtmlcss
阅读 1.2k
2 个回答
得票最新
社区维基
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>

原文由 Dinesh undefined 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1
 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>

原文由 Kumar Bollaboina 发布，翻译遵循 CC BY-SA 4.0 许可协议

查看全部 2 个回答
推荐问题