视频不能一直在桌面浏览器上播放

Question

出于某种原因大部分时间无法在桌面设备上播放的视频。

<video autoplay loop id="video-background" class="video-bg" poster="assets/images/home-vid.jpg">
  <source  src="/assets/videos/home.mp4" type="video/mp4">
</video>

打开页面时视频应该自动循环播放..

我在 FF 上试过，Chrome 它以私人浏览模式播放了一次，然后又停止播放了..

 $(document).ready(function () {
        $('#fullpage').fullpage({
            verticalCentered: true,
            //sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
            afterRender: function () {
                //playing the video
                $('video').get(0).play();
            }
        });


   });

Answer 1

您必须添加 playsinline 自动播放静音循环，Chrome 如果视频未静音则不允许自动启动你可以试试这个：

<video src="{{ asset('/assets/videos/home.mp4' )}}" muted autoplay loop playsinline></video>
And put this js after that:

window.addEventListener('load', async () => {
  let video = document.querySelector('video[muted][autoplay]');
  try {
    await video.play();
  } catch (err) {
    video.controls = true;
  }
});

视频不能一直在桌面浏览器上播放

Video doesnt play on desktop browsers all the time

html

video

autoplay