当观察者切换浏览器选项卡或最小化浏览器窗口时播放/暂停Vimeo Video

问题描述 投票：0回答：1

我正在使用Vimeo Pro在Wordpress Webiste上上传视频课程，然后使用H5P向视频添加交互。

为了将这些vimeo视频插入H5P交互式视频中，我需要使用Vimeo Pro的.mp4发行版（而不是Vimeo Iframe）。这是一个示例：

https://player.vimeo.com/external/376040732.sd.mp4?s=a88abddb83ad31962643b6c4dd8270323d80874e&profile_id=165

在网站上如果我检查自己的网站，则代码是：

<div class="h5p-video-wrapper h5p-video hardware-accelerated">

<video src="https://player.vimeo.com/external/376040732.sd.mp4?s=a88abddb83ad31962643b6c4dd8270323d80874e&amp;profile_id=165" webkit-playsinline="" playsinline="" preload="metadata" disableremoteplayback="" class="h5p-video" style="display: block;">
</video>
<div class="h5p-overlay h5p-ie-transparent-background"></div>

</div>

我的请求我不是开发人员。当学生切换浏览器标签或最小化浏览器窗口时，最简单的暂停视频的方法是什么？感谢您的帮助！

javascript html css video vimeo
1个回答
0
投票

您可以在blur上使用focus和window事件。

尽管，但要指出要点，it's easier to 'experience' here

let videoEl = document.getElementById("vid");
window.addEventListener('focus', () => videoEl.play());
window.addEventListener('blur', () => videoEl.pause());
<!DOCTYPE html>
<html>

<body>
  <video width="320" height="240" controls id="vid">
  <source src="https://player.vimeo.com/external/376040732.sd.mp4?s=a88abddb83ad31962643b6c4dd8270323d80874e&profile_id=165">
  Your browser does not support the video tag.
</video>

</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.