制作 HTML5 视频的 YouTube iframe 音频

编程问答 2022-04-28

问题描述

我希望能够将视频作为视觉效果，并且希望将视频静音，并使用 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>

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

解决方法

这应该为您指明正确的方向：YouTube iframe API: how do I control an iframe player that's already in the HTML? -- 特别是所选答案的 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')
}

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

htmljavascriptvideovideoyoutubeyoutubeyoutube-api