如何使视频仅在单击 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 onclick="play_video();">

或者您可以创建一个按钮：

<button onclick="play_video();">play the video</button>

然后，像这样创建 javascript 函数：

function play_video()
{  document.getElementById("id_of_the_video").play();
}