播放视频作为背景视频并且不在新窗口中打开

Question

我有一个带有背景视频的部分，默认情况下视频已暂停。 当用户单击“播放视频”按钮时，视频会在我不想要的新窗口中打开。

我想在同一个浏览器中播放视频，就像我的示例中的宝马视频一样。

这是我网站的视频：

streamable.com/6of5h9

这是视频，我想复制效果到我的网站：

streamable.com/xiq97z

如何才能将视频作为背景图片播放？

用于播放和暂停视频的代码：

const vidBtn = document.querySelectorAll('.kb-video-btn')
    if (vidBtn.length !== 0)
        Array.prototype.forEach.call(vidBtn, function (el) {
            if (el.classList.contains('play')) {
                el.addEventListener('click', function () {
                    let p = el.parentNode.parentNode.parentNode.parentNode
                    let v = p.querySelector('video')
                    if (v.playing) {
                        v.pause() // v.currentTime = 0;
                        return
                    }
                    v.autoplay = true
                    v.play()
                })
            }
        })

Answer 1

确保 html 中的视频标签具有

playsinline

属性。

<video id="bg-video" playsinline>
    <source src="your-video.mp4" type="video/mp4">
</video>

这应该告诉浏览器在当前文档中内嵌播放视频，而不是在单独的窗口中启动视频或以全屏模式播放。这对于移动浏览器来说也是一个很好的做法。