Wie gehe ich mit „Uncaught (in versprochen) DOMException: play() fehlgeschlagen, weil der Benutzer nicht zuerst mit dem Dokument auf dem Desktop mit Chrome 66 interagiert hat?'

Question

Ich habe eine Fehlermeldung erhalten.

Nicht abgefangen (in Versprechen) DOMException: play() ist fehlgeschlagen, weil der Benutzer nicht zuerst mit dem Dokument interagiert hat.

..Beim Versuch, ein Video auf dem Desktop mit Chrome Version 66 abzuspielen.

Ich habe zwar eine Anzeige gefunden, die automatisch auf der Website abgespielt wurde, allerdings mit folgendem HTML:

<video
    title="Werbung"
    webkit-playsinline="true"
    gamesinline="true"
    style="Hintergrundfarbe: rgb(0, 0, 0); Position: absolut; Breite: 640px; Höhe: 360px;"
    src="http://ds.serving-sys.com/BurstingRes/Site-2500/Type-16/1ff26f6a-aa27-4b30-a264-df2173c79623.mp4"
    autoplay=""></video>

Das Umgehen des Autoplay-Blockers von Chrome v66 ist wirklich einfach. Fügen Sie einfach webkit-playsinline="true" und playsinline="true"autoplay=" hinzu. " Attribut des Codes> und der Elemente ? Wird dies negative Folgen haben?

Answer 1

要在 chrome 66 更新后使 html 5 元素自动播放，您只需将 muted 属性添加到 video 元素即可。

所以你当前的视频 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 更新正在尝试阻止选项卡在用户选项卡上产生随机噪音。这就是为什么静音属性使自动播放再次起作用的原因。