如何使视频仅在单击 javascript 中的按钮时播放

Question

我有一个 div，它里面有一个<video autoplay> <source src='myvid'> </video>，默认情况下 divdisplay ='none'在 css 上有一个。我正在添加一个单击 div 的事件侦听器，一旦单击它，我就会将不显示更改为显示块。

问题是视频会在网站重新加载时自动播放，而不是在单击按钮时自动播放。基本上我希望视频仅在 div 显示 ='block' 时播放。我怎么能用 Javascript 做到这一点？

Answer 1

删除autoplay属性使用 JavaScript 使用自定义按钮和.play()方法播放视频<video id="video"> <source src='myvid'></video> <button id="play">PLAY</button>document.querySelector("#play").addEventListener("click", () => {   document.querySelector("#video").play(); });如果您不想要自定义按钮（您的问题不清楚），则可以使用属性提供浏览器默认controls值const EL_video = document.querySelector("#video");const EL_play = document.querySelector("#play");EL_play.addEventListener("click", () => {  const isPaused = EL_video.paused;  EL_video[isPaused ? "play" : "pause"]();  EL_video.classList.toggle("u-none", !isPaused);});#video {width: 300px;}/* Utility classes: */.u-none {display: none;}<button id="play">Toggle &amp; play</button><br><video id="video" class="u-none">  <source src='http://vjs.zencdn.net/v/oceans.mp4' type='video/mp4'></video>

Answer 2

尝试onclick向 div 添加一个属性，如下所示：<div&nbsp;onclick="play_video();">或者您可以创建一个按钮：<button&nbsp;onclick="play_video();">play&nbsp;the&nbsp;video</button>然后，像这样创建 javascript 函数：function&nbsp;play_video() {&nbsp;&nbsp;document.getElementById("id_of_the_video").play(); }