Question

我收到了错误消息..

未捕获（在承诺中）DOMException：play（）失败，因为用户没有首先与文档交互。

..尝试使用Chrome版本66在桌面上播放视频时。

我找到的广告在网站上自动开始播放，但使用以下HTML：

<video
    title="Advertisement"
    webkit-playsinline="true"
    playsinline="true"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://ds.serving-sys.com/BurstingRes/Site-2500/Type-16/1ff26f6a-aa27-4b30-a264-df2173c79623.mp4"
    autoplay=""></video>

绕过Chrome v66的自动播放拦截器非常简单，只需将webkit-playsinline="true"，playsinline="true"和autoplay=""属性添加到<video>元素即可？对此有任何负面影响吗？

Answer 1

要在chrome 66更新后使html 5元素的自动播放工作，您只需将muted属性添加到视频元素。

所以你当前的视频HTML

<video
    title="Advertisement"
    webkit-playsinline="true"
    playsinline="true"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    autoplay=""></video>

只需要muted="muted"

<video
    title="Advertisement"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    autoplay="true"
    muted="muted"></video>

我相信chrome 66更新试图阻止标签在用户标签上创建随机噪音。这就是为什么静音属性使自动播放再次起作用。

Answer 2

打开this.frame_0 = function() { var _second = this.second; this.addEventListener("tick", res.bind(this)); function res() { _second.y = window.innerHeight/2 + 120; } }
设置无需用户手势
重新启动Chrome

Answer 3

我发现的最佳解决方案是将视频静音

HTML

<video loop muted autoplay id="videomain">
  <source src="videoname.mp4" type="video/mp4">
</video>

Answer 4

回答手头的问题...... 不能拥有这些属性，能够自动播放具有音频的媒体，您需要在文档上注册用户手势。

但是，这种限制非常弱：如果您确实在父文档上收到了此用户手势，并且您的视频是从iframe加载的，那么您可以播放它...

所以请以this fiddle为例，这只是

<video src="myvidwithsound.webm" autoplay=""></video>

首次加载时，如果您不点击任何地方，它将无法运行，因为我们尚未注册任何活动。
但是一旦你点击＆＃34;运行＆＃34; 按钮，那么父文档（jsfiddle.net）确实会收到一个用户手势，现在视频播放，即使它是技术上加载的在另一份文件中。

但是以下代码段，因为它要求您实际点击运行代码段按钮，将自动播放。

＆＃13;

<video src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" autoplay=""></video>

＆＃13;

这意味着您的广告可能可以播放，因为您确实为主页提供了用户手势。

现在，请注意Safari和移动Chrome有比这更严格的规则，并且要求您至少在play()或<video>元素上以编程方式触发<audio>方法用户事件处理程序本身。

＆＃13;

btn.onclick = e => {
  // mark our MediaElement as user-approved
  vid.play().then(()=>vid.pause());
  // now we can do whatever we want at any time with this MediaElement
  setTimeout(()=> vid.play(), 3000);
};

＆＃13;

<button id="btn">play in 3s</button>
<video
  src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" id="vid"></video>

＆＃13;

如果您不需要音频，那么只是不将其附加到您的媒体上，只允许视频轨道的视频也可以自动播放，并且会降低您的用户数量带宽使用情况。

Answer 5

尝试使用mousemove事件lisentner

var audio = document.createElement("AUDIO")
document.body.appendChild(audio);
audio.src = "./audio/rain.m4a"

document.body.addEventListener("mousemove", function () {
    audio.play()
})

Answer 6

对于我（在Angular项目中），此代码有所帮助：

在HTML中，您应该添加autoplay muted

在JS / TS中

playVideo() {
    const media = this.videoplayer.nativeElement;
    media.muted = true; // without this line it's not working although I have "muted" in HTML
    media.play();
}

Answer 7

更新

如果该技术不再起作用-还有另一种选择。您可以包括一小段非常安静的（-60db）音频，然后在隐藏按钮的单击处理程序中播放它。此后，将允许所有其他音频/视频文件播放，而无需用户直接交互。您可以从http://adventure.land/sounds/loops/empty_loop_for_js_performance.wav处获取无声音频，并将其缩短到半秒（或更短）。

有一个非常简单的解决方案-只需在页面上添加按钮，将其设置为不可见，然后在button.click()之前调用play()方法

在Chromium版本70.0.3538.67（官方内部版本）（64位）中像魅力一样运行

var btn = document.getElementById('btn');
document.addEventListener(btn,myPlay,false);
btn.click();

function myPlay()
{
  document.getElementById('movie').play();
}

<video
    title="Advertisement" id="movie"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm"
    ></video>
    <button type="button" style="z-index:-1;opacity:0;position: absolute;left:-1000px;" id="btn"></button>

Answer 8

我在Android手机上玩时遇到一些问题。经过几次尝试，我发现打开Data Saver时没有自动播放：

如果启用了Data Saver模式，则不会自动播放。如果启用了“数据保护程序”模式，则会在“媒体设置”中禁用自动播放。

Source

Answer 9

Chrome需要用户互动，视频才能通过js（video.play（））自动播放或播放。但是，互动可以随时随地进行。如果您仅在页面上单击随机，视频将自动播放。然后我解决了，添加了一个按钮（仅在Chrome浏览器上），该按钮显示“启用视频自动播放”。该按钮不执行任何操作，仅单击它便是任何其他视频所需的用户交互。

Answer 10

我在尝试播放音频文件时遇到类似的错误。最初，它正在工作，然后当我开始在同一函数中使用ChangeDetector的check_eligibility方法以在承诺解决时触发重新渲染（我对视图渲染有问题）时，它停止工作。

当我将markForCheck更改为markForCheck时，它又开始工作了。我真的无法解释发生了什么，我只是想把它放到这里，也许会帮助别人。

Answer 11

扩展DOM元素，处理错误并正常降级

下面，我使用原型函数包装本机DOM播放函数，抓住其诺言，然后在浏览器抛出异常时降级为播放按钮。该扩展程序解决了浏览器的缺点，并且可以在知道目标元素的情况下在任何页面中进行即插即用。

// JavaScript
// Wrap the native DOM audio element play function and handle any autoplay errors
Audio.prototype.play = (function(play) {
return function () {
  var audio = this,
      args = arguments,
      promise = play.apply(audio, args);
  if (promise !== undefined) {
    promise.catch(_ => {
      // Autoplay was prevented. This is optional, but add a button to start playing.
      var el = document.createElement("button");
      el.innerHTML = "Play";
      el.addEventListener("click", function(){play.apply(audio, args);});
      this.parentNode.insertBefore(el, this.nextSibling)
    });
  }
};
})(Audio.prototype.play);

// Try automatically playing our audio via script. This would normally trigger and error.
document.getElementById('MyAudioElement').play()

<!-- HTML -->
<audio id="MyAudioElement" autoplay>
  <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Answer 12

您应该在muted内添加videoElement属性，以使代码正常工作。瞧瞧..

<video id="IPcamerastream" muted="muted" autoplay src="videoplayback%20(1).mp4" width="960" height="540"></video>

别忘了添加有效的视频链接作为来源

Answer 13

就我而言，我必须这样做

 // Initialization in the dom
 // Consider the muted attribute
 <audio id="notification" src="path/to/sound.mp3" muted></audio>


 // in the js code unmute the audio once the event happened
 document.getElementById('notification').muted = false;
 document.getElementById('notification').play();

Answer 14

根据新的浏览器策略，用户必须在播放Audio元素之前先与DOM交互。

如果要在页面加载时播放媒体，则可以像这样在HTML的音频元素中添加自动播放属性

<video id="video" src="./music.mp4" autoplay>

，或者如果您不想执行自动播放，则可以使用Javascript处理。由于autoplay属性设置为true，将播放媒体，因此我们只需将媒体静音即可。

document.getElementById('video').autoplay = true;
document.getElementById('video').muted = true;

提示：现在，无论何时播放媒体，都不要忘记将静音属性设置为false。像这样

document.getElementById('video').muted = false; 
document.getElementById('video').play();

或者，您也可以显示一个简单的弹出窗口，用户将在其中单击模式中的允许按钮。因此，他首先与DOM交互，然后您不需要做任何事情

Answer 15

在地址栏中输入Chrome://flags

搜索：自动播放

自动播放政策

决定是否允许音频或视频时使用的策略   自动播放。

- Mac，Windows，Linux，Chrome操作系统，Android

将此设置为＆＃34; 无需用户手势＆＃34;

重新启动Chrome，您不必更改任何代码

如何处理＆＃34; Uncaught（在promise中）DOMException：play（）失败，因为用户没有先与文档交互。＆＃34;在桌面上使用Chrome 66？

15 个答案:

更新

自动播放政策