时间戳

首页 > 解决方案 > 制作 HTML5 视频的 YouTube iframe 音频

javascript - 制作 HTML5 视频的 YouTube iframe 音频

问题描述

我希望能够将视频作为视觉对象，并且我希望将视频静音并让 YouTube 视频成为它的音频。这就是我所拥有的：

<video width="320" height="240" controls muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

这只是使静音视频播放。现在我想添加这样的 YouTube 视频：

<iframe width="1" height="1"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

我希望当用户播放 HTML5 视频时播放这个 YouTube 视频，当用户暂停视频时，YouTube 视频音频停止。基本上我希望 YouTube 视频成为 HTML5 视频的音频，而其他 HTML5 视频应该只是静音并且只是可视的。

标签： javascripthtmlvideoyoutubeyoutube-api

解决方案

这应该为您指明正确的方向：YouTube iframe API：如何控制 HTML 中已经存在的 iframe 播放器？- 特别是所选答案的 JSFiddle。

通过控制 iframe youtube 播放器，您可以简单地使 iframe 不可见并将暂停按钮链接到您的视频和 youtube 视频。

编辑：根据要求，我已经澄清了......再次:)

https://jsfiddle.net/ericpool/yrkpem4a/11/

这是编辑后的 ​​JSFiddle，它应该向您展示这是如何实现的。即，我在播放器的播放暂停函数中添加了事件监听器，以连接 callPlayer 函数：

var vid = document.getElementById('myVideo')
vid.play() //play video on start
vid.onpause = (event) => {
    callPlayer('whateverID', 'pauseVideo')
    console.log('paused')
}
vid.onplay = (event) => {
    callPlayer('whateverID', 'playVideo')
  console.log('played')
}

我不确定您为什么需要这样做，但请注意，由于音频和视频是分开的，您可能会遇到同步问题。

推荐阅读