Chrome 视频自动播放

Question

以下 Chrome 和 Firefox 的最新更新不再支持自动播放视频 - 我尝试添加一些代码以在启动时播放它，但它似乎不起作用？

    var vid = document.getElementById("attractor"); 

    function playVid() { 
        vid.play(); 
    }

有没有人找到解决方法？

我们进行了大量的触摸屏互动，并依靠这种方法制作我们的吸引子视频。

Answer 1

我明白了....在地址栏中输入：

chrome://flags/#autoplay-policy

和select'No user gesture is required'

...这显然只会让它在您的计算机上运行！

Answer 2

根据我自己的观察和许多文章，例如 this one，Chrome 现在会阻止视频自动播放，除非它们被静音。启用声音的视频只能通过用户交互来播放，例如单击鼠标或轻触，无法通过 javascript 启动。

通过这样做，Google 想要“（使）自动播放更符合用户期望并 [...] 让用户更好地控制音频”[1]

Answer 3

autoplay 只有在默认情况下将其指定为 muted 才会起作用，就像这样。

    <video autoplay muted>
      <source src="video.mp4" type="video/mp4"></source>
   </video>

别担心，用户可以将视频取消静音作为 html5 视频元素的一部分。

Answer 4

我找到了自动播放视频并避免控制台出现 js 错误的好方法。

const myVideo = document.getElementById('my-video');

// Not all browsers return promise from .play().
const playPromise = myVideo.play() || Promise.reject('');
playPromise.then(() => {
  // Video could be autoplayed, do nothing.
}).catch(err => {
  // Video couldn't be autoplayed because of autoplay policy. Mute it and play.
  myVideo.muted = true;
  myVideo.play();
});

<video id="my-video" src="https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_2mb.mp4">

此代码会尝试启动有声自动播放，如果无法启动，它将使视频静音并自动无声播放视频。我认为这是防止 JS 错误的最佳方式。

Answer 5

像这样将 allow="autoplay;" 添加到您的 iframe <iframe allow="autoplay;" ... >
当使用 html5 video 标签时，我注意到视频必须静音才能自动播放。有声视频不想播放。下面是如何嵌入 html5 视频 https://www.w3schools.com/html/html5_video.asp. If using this method, you can download Miro Video Converter http://www.mirovideoconverter.com/ 使用它来编码您的视频。它在缩小视频尺寸方面做得非常出色！
嵌入 youtube 或 vimeo 时添加 ?autoplay=1，在 vimeo 中也将 autopause=0 添加到 url，如下所示：https://player.vimeo.com/video/{video_id}?autoplay=1&loop=1&autopause=0、
如果您在使用 youtube 时仍然遇到问题，请使用 iframe API https://developers.google.com/youtube/iframe_api_reference 并使用 javascript 播放视频：

function onPlayerReady(event) {
   event.target.playVideo();
}

使用 iframe 和 youtube 视频时，记得使用嵌入 url，而不是标准视频 url https://www.youtube.com/embed/{video_id}
Youtube 视频管理器在这里：https://www.youtube.com/my_videos（我在不断变化的界面中永远找不到 youtube 视频管理器！）

推荐方案：

在 vimeo 上注册，上传您的视频
转到视频设置，找到 "embed" 选项卡 https://vimeo.com/manage/{video_id}/embed 并设置您的嵌入视频
嵌入您的 iframe：

<iframe frameborder="0"
  height="100%"
  width="100%"
  id="background-video"
  src="https://player.vimeo.com/video/356828095?autoplay=1&loop=1&autopause=0"
  allow="autoplay; fullscreen">
</iframe>

这个会自动播放和循环播放。 4. 使用 css、f.e 设置您的视频大小。 width: 100%。 5. 现在您不希望视频周围有黑框，那么让我们调整 iframe 的大小，让我们让高度与宽度成正比。在我的例子中，视频是 1920x1080px:

<script type="text/javascript">
var width = window.innerWidth;
var height = (width * 1080) / 1920

document.getElementsByTagName('iframe')[0].style.height = height + 'px';
</script>

我的视频作为页面背景循环播放。我禁用了这样的鼠标事件（在你的 CSS 样式中）：

#background-video {
  pointer-events: none;
}

如果我遗漏了什么，请告诉我，我会更新这些说明！

Answer 6

我有两个不需要任何属性或iframe的解决方案，它还可以自动播放有声的音频/视频，请关注我：

1. WebRTC 解决方案：

navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
    vid.play(); // play your media here then stop the stream when done below...
    stream.getTracks().forEach(function (track) { track.stop(); });
});

它会要求用户提供他们的麦克风权限，他们必须点击允许一次然后你就可以播放任何有/没有的东西声音。它之所以有效，是因为只要您正在捕获任何东西，您就可以播放所有东西。资料来源：autoplay-restrictions-and-webrtc

2。手动解决方案： 如果出于某种原因用户不想授予他们的麦克风权限，那么只有您可以说服他们您只需要此权限即可自动为他们播放媒体，这与他们的麦克风无关，因为您正在停止它一旦媒体开始播放。否则，指示他们从您的站点设置中允许声音权限，这也将授予永久播放有声或无声媒体的权限。

经过两天的连续搜索，在放弃自动播放 audio/video with/without 声音的希望之前，我想出了这两个无需任何用户手势即可简单工作的解决方案。我希望它能解决 google 部署新的严格政策后发生的任何与自动播放相关的问题。阅读更多：autoplay-policy-changes

Chrome 视频自动播放

Chrome video autoplay

google-chrome

autoplay