制作 HTML5 视频的 YouTube iframe 音频

Question

我希望能够将视频作为视觉对象，并且我希望将视频静音并使用 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 视频应该只是静音并且只是可视的。

Answer 1

这应该为您指明正确的方向：YouTube iframe API: how do I control an iframe player that's already in the HTML? -- 特别是所选答案的 JSFiddle。

通过获得 iframe youtube 播放器的控制权，您可以简单地使 iframe 不可见，并link您的视频和 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')
}

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

制作 HTML5 视频的 YouTube iframe 音频

Make YouTube Iframe Audio Of HTML5 Video

javascript

html

video

youtube

youtube-api