วิธีจัดการกับ“ Uncaught (ตามสัญญา) DOMException: play () ล้มเหลวเนื่องจากผู้ใช้ไม่ได้โต้ตอบกับเอกสารก่อน” บนเดสก์ท็อปด้วย Chrome 66?

ฉันได้รับข้อความแสดงข้อผิดพลาด ..

Uncaught (ตามสัญญา) 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>องค์ประกอบ? มีผลเสียต่อสิ่งนี้หรือไม่?

ในการทำให้การเล่นอัตโนมัติในองค์ประกอบ html 5 ทำงานหลังจากการอัปเดต chrome 66 คุณเพียงแค่เพิ่ม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 กำลังพยายามหยุดแท็บที่สร้างเสียงรบกวนแบบสุ่มบนแท็บผู้ใช้ นั่นเป็นเหตุผลที่คุณสมบัติปิดเสียงทำให้การเล่นอัตโนมัติทำงานอีกครั้ง

ทางออกที่ดีที่สุดที่ฉันพบคือปิดเสียงวิดีโอ

HTML

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

1. เปิด chrome://settings/content/sound
2. การตั้งค่าไม่จำเป็นต้องใช้ท่าทางสัมผัสของผู้ใช้
3. เปิด Chrome ขึ้นมาใหม่

กำลังตอบคำถามอยู่ ...
ไม่เพียงพอที่จะมีคุณสมบัติเหล่านี้เพื่อให้สามารถเล่นสื่ออัตโนมัติพร้อมเสียงได้คุณต้องมีท่าทางผู้ใช้ที่ลงทะเบียนในเอกสารของคุณ

แต่ข้อ จำกัด นี้อ่อนแอมาก: หากคุณได้รับท่าทางสัมผัสของผู้ใช้ในเอกสารหลักและวิดีโอของคุณโหลดจาก iframe คุณก็สามารถเล่นได้ ...

ยกตัวอย่างเช่นซอนี้ซึ่งเป็นเพียง

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

ในการโหลดครั้งแรกและหากคุณไม่คลิกที่ใดก็ตามมันจะไม่ทำงานเนื่องจากเรายังไม่มีเหตุการณ์ใด ๆ ที่ลงทะเบียน
แต่เมื่อคุณคลิกปุ่ม"เรียกใช้"เอกสารหลัก (jsfiddle.net) จะได้รับท่าทางสัมผัสของผู้ใช้และตอนนี้วิดีโอจะเล่นแม้ว่าจะโหลดในทางเทคนิคในเอกสารอื่นก็ตาม

แต่ข้อมูลโค้ดต่อไปนี้ต้องให้คุณคลิกปุ่มเรียกใช้ข้อมูลโค้ดจริงๆจึงจะเล่นอัตโนมัติ

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

ซึ่งหมายความว่าโฆษณาของคุณน่าจะสามารถเล่นได้เนื่องจากคุณให้ท่าทางสัมผัสของผู้ใช้ในหน้าหลัก

ตอนนี้โปรดทราบว่า Safari และ Mobile Chrome มีกฎที่เข้มงวดกว่านั้นและจะกำหนดให้คุณต้องทริกเกอร์อย่างน้อยหนึ่งครั้งplay()วิธีการทางโปรแกรมบนองค์ประกอบ<video>หรือ<audio>จากตัวจัดการเหตุการณ์ของผู้ใช้เอง

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);
};

<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>

และหากคุณไม่ต้องการเสียงก็ไม่ต้องแนบไปกับสื่อของคุณวิดีโอที่มีเพียงแทร็กวิดีโอจะได้รับอนุญาตให้เล่นอัตโนมัติและจะลดการใช้แบนด์วิดท์ของผู้ใช้

สำหรับฉัน (ในโครงการเชิงมุม) รหัสนี้ช่วย:

ใน 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();
}

ลองใช้ mousemove event lisentner

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

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

ขยายองค์ประกอบ DOM จัดการข้อผิดพลาดและลดระดับอย่างสง่างาม

ด้านล่างฉันใช้ฟังก์ชันต้นแบบเพื่อรวมฟังก์ชันการเล่น DOM ดั้งเดิมคว้าสัญญาจากนั้นลดระดับเป็นปุ่มเล่นหากเบราว์เซอร์แสดงข้อยกเว้น ส่วนขยายนี้กล่าวถึงข้อบกพร่องของเบราว์เซอร์และเป็น Plug-n-play ในหน้าใด ๆ ที่มีความรู้เกี่ยวกับองค์ประกอบเป้าหมาย

// 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>

ในกรณีของฉันฉันต้องทำสิ่งนี้

 // 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();

Chrome ต้องการการโต้ตอบของผู้ใช้เพื่อให้วิดีโอเล่นอัตโนมัติหรือเล่นผ่าน js (video.play ()) แต่การโต้ตอบอาจเป็นแบบใดก็ได้ในทุกขณะ หากคุณคลิกแบบสุ่มบนหน้าวิดีโอจะเล่นอัตโนมัติ ฉันแก้ไขแล้วเพิ่มปุ่ม (เฉพาะในเบราว์เซอร์ Chrome) ที่ระบุว่า "เปิดใช้งานการเล่นวิดีโออัตโนมัติ" ปุ่มนี้ไม่ได้ทำอะไรเลยนอกจากการคลิกที่ปุ่มนั้นเป็นการโต้ตอบของผู้ใช้ที่จำเป็นสำหรับวิดีโออื่น ๆ

ฉันพบข้อผิดพลาดที่คล้ายกันขณะพยายามเล่นไฟล์เสียง ในตอนแรกมันใช้งานได้จากนั้นก็หยุดทำงานเมื่อฉันเริ่มใช้markForCheckเมธอดของ ChangeDetector ในฟังก์ชันเดียวกันเพื่อทริกเกอร์การเรนเดอร์ซ้ำเมื่อคำสัญญาได้รับการแก้ไข (ฉันมีปัญหากับการแสดงผลการดู)

เมื่อฉันเปลี่ยนmarkForCheckไปdetectChangesมันก็เริ่มทำงานอีกครั้ง ฉันอธิบายไม่ได้จริงๆว่าเกิดอะไรขึ้นฉันแค่คิดว่าจะทิ้งมันไว้ที่นี่บางทีมันอาจจะช่วยใครสักคน

คุณควรเพิ่มmutedแอตทริบิวต์ภายในของคุณvideoElementเพื่อให้โค้ดของคุณทำงานได้ตามที่คาดไว้ ร้องเสียงหลง ..

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

อย่าลืมเพิ่มลิงค์วิดีโอที่ถูกต้องเป็นแหล่งที่มา

ฉันมีปัญหาในการเล่นบนโทรศัพท์ Android หลังจากลองไม่กี่ครั้งฉันพบว่าเมื่อเปิดโปรแกรมประหยัดอินเทอร์เน็ตจะไม่มีการเล่นอัตโนมัติ:

ไม่มีการเล่นอัตโนมัติหากเปิดใช้งานโหมดประหยัดอินเทอร์เน็ต หากเปิดใช้โหมดประหยัดอินเทอร์เน็ตการเล่นอัตโนมัติจะปิดใช้งานในการตั้งค่าสื่อ

แหล่ง

พิมพ์Chrome: // แฟล็กในแถบที่อยู่

ค้นหา: เล่นอัตโนมัติ

นโยบายการเล่นอัตโนมัติ

นโยบายที่ใช้ในการตัดสินใจว่าเสียงหรือวิดีโอได้รับอนุญาตให้เล่นอัตโนมัติหรือไม่

- Mac, Windows, Linux, Chrome OS, Android

ตั้งค่านี้เป็น " ไม่ต้องใช้ท่าทางสัมผัสของผู้ใช้ "

เปิด Chrome ขึ้นมาใหม่และคุณไม่จำเป็นต้องเปลี่ยนรหัสใด ๆ