使用 Javascript 在特定时间后停止播放

Question

我正在使用 Twine（一种使用 html、css 和 javascript 的叙事引擎）开发手机游戏，并希望开始播放背景视频按下按钮 5 秒。 5 秒后视频应该暂停。如果我再次按下按钮，视频应该会继续播放 5 秒（时间轴进一步向下移动），然后再次暂停。

这是我目前所拥有的。

<video id="myVideo">
  <source src="./video.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<script> 
var vid = document.getElementById("myVideo");
    
function playVid() { 
  vid.play(); 
} 

</script> 

<button onclick="playVid()" type="button">Play Video</button>

有人可以帮忙吗？

非常感谢

Answer 1

您可能正在寻找 setTimeout 函数 - 在 vid.play().

之后

它在指定的时间后安排一个函数到运行，returns 对计时器的引用，因此您可以通过调用 clearTimeout.[=13= 来取消它]

您可能需要考虑如果有人在视频播放时也单击了按钮，您希望发生什么。

Answer 2

不要使用 on* 内联属性处理程序。使用 addEventListener 代替
以非 render-blocking 方式放置您的 <script> 标签，就在结束 </body> 标签之前。
使用 setTimeout 来安排函数调用，或执行一些代码 — 在 N 毫秒后

// DOM utility functions:

const el = (sel, par) => (par||document).querySelector(sel);


// Task:

const elVideo = el("#myVideo");
const elPlayVideo = el("#playVideo");
const timePause = 5000; // ms time to pause
let playTimeout;

const playVideo = () => { 
  clearTimeout(playTimeout);   // Clear any occurring timeouts
  elVideo.play();              // Play video
  elPlayVideo.disabled = true; // Disable click

  playTimeout = setTimeout(() => {
    elVideo.pause();              // Pause video
    elPlayVideo.disabled = false; // Enable button click
  }, timePause);                  // Wait N milliseconds
};

elPlayVideo.addEventListener("click", playVideo);

video {
  height: 150px;
}

<video id="myVideo" src="https://raw.githubusercontent.com/Ahmetaksungur/aksvideoplayer/main/videos/video-360.mp4"></video>
<button id="playVideo" type="button">Play Video</button>
<!-- Stop using inline on* handlers attributes. -->

<!-- <script> should go here, right before the closing `</body>` tag. -->

使用 Javascript 在特定时间后停止播放

Stop playback after a specific time using Javascript

javascript

video