Cách xử lý “Uncaught (trong lời hứa) DOMException: play () không thành công vì người dùng không tương tác với tài liệu trước.” trên Máy tính để bàn với Chrome 66?

Tôi nhận được thông báo lỗi ..

Uncaught (trong lời hứa) DOMException: play () không thành công vì người dùng không tương tác với tài liệu trước.

..khi cố gắng phát video trên máy tính để bàn bằng Chrome phiên bản 66.

Tuy nhiên, tôi đã tìm thấy một quảng cáo bắt đầu phát lại tự động trên một trang web bằng cách sử dụng HTML sau:

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

Vì vậy, là bằng cách đi qua chặn autoplay Chrome v66 thực sự dễ dàng như chỉ thêm webkit-playsinline="true", playsinline="true"và autoplay=""thuộc tính đến <video>yếu tố? Có bất kỳ hậu quả tiêu cực nào cho việc này không?

Để tính năng tự động phát trên phần tử html 5 hoạt động sau khi cập nhật chrome 66, bạn chỉ cần thêm thuộc mutedtính vào phần tử video.

Vì vậy, HTML video hiện tại của bạn

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

Chỉ cần 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>

Tôi tin rằng bản cập nhật chrome 66 đang cố gắng ngăn các tab tạo nhiễu ngẫu nhiên trên các tab của người dùng. Đó là lý do tại sao thuộc tính tắt tiếng làm cho tính năng tự động phát hoạt động trở lại.

Giải pháp tốt nhất mà tôi tìm ra là tắt tiếng video

HTML

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

1. Mở chrome://settings/content/sound
2. Cài đặt Không cần cử chỉ của người dùng
3. Khởi chạy lại Chrome

Đang trả lời câu hỏi ...
Không, có những thuộc tính này là chưa đủ, để có thể tự động phát một phương tiện có âm thanh, bạn cần phải đăng ký cử chỉ người dùng trên tài liệu của mình.

Tuy nhiên, hạn chế này rất yếu: nếu bạn đã nhận được cử chỉ người dùng này trên tài liệu gốc và video của bạn được tải từ iframe, thì bạn có thể phát ...

Vì vậy, hãy lấy ví dụ như trò đùa này , chỉ

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

Lúc đầu tải, và nếu bạn không nhấp vào bất kỳ đâu, nó sẽ không chạy, vì chúng tôi chưa có bất kỳ sự kiện nào được đăng ký.
Nhưng khi bạn nhấp vào nút "Chạy" , thì tài liệu gốc (jsfiddle.net) đã nhận được cử chỉ của người dùng và bây giờ video sẽ phát, mặc dù về mặt kỹ thuật nó được tải trong một tài liệu khác.

Nhưng đoạn mã sau, vì nó yêu cầu bạn thực sự nhấp vào nút Chạy đoạn mã , sẽ tự động phát.

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

Điều này có nghĩa là quảng cáo của bạn có thể phát vì bạn đã cung cấp một cử chỉ người dùng cho trang chính.

Bây giờ, hãy lưu ý rằng Safari và Chrome dành cho thiết bị di động có các quy tắc nghiêm ngặt hơn thế và sẽ yêu cầu bạn thực sự kích hoạt ít nhất một lần play()phương thức theo chương trình trên <video>hoặc <audio>phần tử từ chính trình xử lý sự kiện người dùng.

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>

Và nếu bạn không cần âm thanh, thì chỉ cần không đính kèm nó vào phương tiện của bạn, video chỉ có một đoạn video cũng được phép tự động phát và sẽ làm giảm mức sử dụng băng thông của người dùng.

Đối với tôi (trong dự án Angular) mã này đã giúp:

Trong HTML, bạn nên thêm autoplay muted

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

Cố gắng sử dụng lót sự kiện mousemove

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

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

Mở rộng Phần tử DOM, Xử lý lỗi và Nâng cấp một cách duyên dáng

Dưới đây, tôi sử dụng hàm nguyên mẫu để gói chức năng phát DOM gốc, lấy lời hứa của nó, sau đó chuyển thành nút phát nếu trình duyệt ném ra ngoại lệ. Tiện ích mở rộng này giải quyết sự thiếu sót của trình duyệt và plug-n-play trong bất kỳ trang nào có kiến ​​thức về (các) phần tử đích.

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

Trong trường hợp của tôi, tôi phải làm điều này

 // 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 cần sự tương tác của người dùng để video được tự động phát hoặc phát qua js (video.play ()). Nhưng sự tương tác có thể thuộc bất kỳ loại nào, trong bất kỳ thời điểm nào. Nếu bạn chỉ cần nhấp vào ngẫu nhiên trên trang, video sẽ tự động phát. Sau đó, tôi đã giải quyết bằng cách thêm một nút (chỉ trên trình duyệt chrome) có nội dung "bật tự động phát video". Nút không làm gì cả, nhưng chỉ cần nhấp vào nó, là tương tác người dùng cần thiết cho bất kỳ video nào khác.

Tôi gặp phải lỗi tương tự khi cố phát tệp âm thanh. Lúc đầu, nó hoạt động, sau đó nó ngừng hoạt động khi tôi bắt đầu sử dụng markForCheckphương thức của ChangeDetector trong cùng một chức năng để kích hoạt kết xuất lại khi một lời hứa được giải quyết (tôi gặp sự cố với kết xuất chế độ xem).

Khi tôi thay đổi markForCheckthành detectChangesnó bắt đầu hoạt động trở lại. Tôi thực sự không thể giải thích được chuyện gì đã xảy ra, tôi chỉ nghĩ thả cái này xuống đây, có lẽ nó sẽ giúp ích cho ai đó.

Bạn nên thêm mutedthuộc tính bên trong videoElementđể mã của bạn hoạt động như mong đợi. Nhìn dưới đây ..

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

Đừng quên thêm một liên kết video hợp lệ làm nguồn

Tôi gặp một số sự cố khi chơi trên Điện thoại Android. Sau vài lần thử, tôi phát hiện ra rằng khi bật Trình tiết kiệm dữ liệu, không có chế độ tự động phát:

Không có tự động phát nếu chế độ Trình tiết kiệm dữ liệu được bật. Nếu chế độ Trình tiết kiệm dữ liệu được bật, tự động phát sẽ bị tắt trong cài đặt Phương tiện.

Nguồn

Nhập Chrome: // flags vào thanh địa chỉ

Tìm kiếm: Tự động phát

Chính sách tự động phát

Chính sách được sử dụng khi quyết định xem âm thanh hoặc video có được phép tự động phát hay không.

- Mac, Windows, Linux, Chrome OS, Android

Đặt cài đặt này thành " Không cần cử chỉ người dùng "

Khởi động lại Chrome và bạn không phải thay đổi bất kỳ mã nào