【问题标题】:Make YouTube Iframe Audio Of HTML5 Video制作 HTML5 视频的 YouTube iframe 音频
【发布时间】:2021-08-21 23:00:10
【问题描述】:

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

【问题讨论】:

    标签: javascript html video youtube youtube-api


    【解决方案1】:

    这应该为您指明正确的方向: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')
    }
    

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

    【讨论】:

    • 您好,我遇到了一些麻烦。我已经检查过了,但我仍然需要帮助。你能给我一些代码,当用户播放 HTML5 视频时,YouTube 视频会播放,当用户暂停 HTML5 视频时,YouTube 视频会暂停。谢谢。
    • 我已编辑以更好地解释。请参阅上面的更改。
    • 非常感谢,但您能否编辑 jsfiddle 以在视频播放和暂停时使用,而不是使用顶部的 START 链接?非常感谢,你救了我。
    • 当然可以。请参阅上面的更改。
    猜你喜欢
    • 1970-01-01
    • 2011-08-16
    • 2013-03-28
    • 2013-09-14
    • 2013-10-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多