Question

关注Chrome＆amp;不再支持Firefox的最新更新自动播放视频 - 我试图在启动时添加一些代码来播放它但它似乎不起作用？

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

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

有没有人找到解决方法？

我们做了很多触摸屏互动，并依赖这种方法为我们的吸引者视频。

Answer 1

自动播放只有在默认情况下将其指定为静音时才能起作用。

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

请放心，用户可以将视频取消静音，并将其作为html5视频元素的一部分。

Answer 2

根据我自己的观察以及例如this one之类的许多文章，Chrome现在会阻止视频的自动播放，除非将其静音。启用了声音的视频只能通过用户互动来播放，例如鼠标单击或轻触，并且无法通过javascript启动。

通过这种方式，Google希望“（自动）播放使用户的期望更加一致，并让用户更好地控制音频” [1]

Answer 3

我找到了一种很好的方法来自动播放视频并避免在控制台中出现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 4

像这样allow="autoplay;"将<iframe allow="autoplay;" ... >添加到您的iframe中
使用html5 video标签时，我注意到视频必须静音才能自动播放。带有声音的视频不想播放。嵌入html5视频https://www.w3schools.com/html/html5_video.asp的方法如下。如果使用此方法，则可以下载Miro Video Converter http://www.mirovideoconverter.com/，用它对视频进行编码。在缩小视频尺寸方面做得很棒！
嵌入youtube或vimeo时，在网址中添加?autoplay=1，并在autopause=0中添加https://player.vimeo.com/video/{video_id}?autoplay=1&loop=1&autopause=0，如下所示：function onPlayerReady(event) { event.target.playVideo(); }，
如果您使用的是youtube仍存在问题，请使用iframe API https://developers.google.com/youtube/iframe_api_reference并使用javascript播放视频：

https://www.youtube.com/embed/{video_id}

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

推荐的解决方案：

在vimeo上注册，上传视频
转到视频设置，找到“嵌入”标签<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>并设置您的嵌入视频
嵌入您的iframe：

width: 100%

这会自动播放并循环播放。 4.使用CSS设置视频大小，然后按<script type="text/javascript"> var width = window.innerWidth; var height = (width * 1080) / 1920 document.getElementsByTagName('iframe')[0].style.height = height + 'px'; </script>。 5.现在，您不想在视频周围出现黑框，因此让我们调整iframe的大小，让高度与宽度成比例。在我的情况下，视频为1920x1080px：

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

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

type MyRoute string    
const LOGIN MyRoute = "login"
func (mr MyRoute) Name() string {
    return strings.ToUpper(mr)
}

func (mr MyRoute) HTML() string {
    return fmt.Sprintf("%s.html", mr)
}
e.GET("/", Sources.Login).Name = LOGIN.Name()

func Login(c echo.Context) error {
    return c.Render(http.StatusOK, LOGIN.HTML(), "OK")
}

如果我错过了什么，请告诉我，我将更新这些说明！

Answer 5

我有两个不需要任何属性或 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.手动解决方案： 如果由于某种原因用户不想授予他们的麦克风权限，那么只有您可以说服他们您只需要此权限来为他们自动播放媒体，这与他们的麦克风无关，因为您正在停止它一旦媒体开始播放。否则，请指示他们从您的站点设置中允许声音权限，这也将授予永久播放有声或无声媒体的权限。

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

Answer 6

我想通了......把它输入地址栏：

chrome://flags/#autoplay-policy

选择＆＃39;不需要用户手势＆＃39;

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

Chrome视频自动播放

6 个答案: