"Yakalanmamış (sözde) DOMException: play () başarısız oldu çünkü kullanıcı önce belgeyle etkileşime girmedi." Masaüstünde Chrome 66 ile?

Hata mesajını alıyorum ..

Yakalanmamış (sözde) DOMException: play () başarısız oldu çünkü kullanıcı önce belgeyle etkileşime girmedi.

.. Chrome 66 sürümünü kullanarak masaüstünde video oynatmaya çalışırken.

Aşağıdaki HTML kullanılarak bir web sitesinde otomatik olarak oynatılmaya başlayan bir reklam buldum:

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

Yani by-pass kadar kolay sadece ekleyerek gerçekten Krom V66 en autoplay engelleyici olduğunu webkit-playsinline="true", playsinline="true"ve autoplay=""hiç özelliklerini <video>eleman? Bunun herhangi bir olumsuz sonucu var mı?

Html 5 öğelerinde otomatik oynatmanın chrome 66 güncellemesinden sonra çalışmasını sağlamak için, yalnızca mutedözelliği video öğesine eklemeniz gerekir .

Yani mevcut video HTML'niz

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

Sadece ihtiyaçlar 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 güncellemesinin, kullanıcı sekmelerinde rastgele gürültü oluşturan sekmeleri durdurmaya çalıştığına inanıyorum. Bu nedenle, sessiz özelliği otomatik oynatmanın yeniden çalışmasını sağlar.

Bulduğum en iyi çözüm videonun sesini kapatmaktır

HTML

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

1. Açık chrome://settings/content/sound
2. Ayar Kullanıcı hareketi gerekmez
3. Chrome'u yeniden başlatın

Eldeki soruyu yanıtlamak ...
Hayır, bu özelliklere sahip olmak yeterli değildir, sesli bir medyayı otomatik olarak oynatabilmek için, belgenize bir kullanıcı hareketinin kaydedilmiş olması gerekir.

Ancak, bu sınırlama çok zayıf: bu kullanıcı hareketini ana belgede aldıysanız ve videonuz bir iframe'den yüklendiyse, onu oynatabilirsiniz ...

Öyleyse, mesela bu keman , sadece

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

İlk yüklemede ve herhangi bir yere tıklamazsanız çalışmayacaktır çünkü henüz kayıtlı bir etkinliğimiz yok.
Ancak "Çalıştır" düğmesini tıkladığınızda, ana belge (jsfiddle.net) bir kullanıcı hareketi aldı ve şimdi video, teknik olarak farklı bir belgeye yüklenmiş olmasına rağmen oynatılıyor.

Ancak aşağıdaki kod parçacığı , Kod parçacığını çalıştır düğmesini tıklamanızı gerektirdiğinden otomatik olarak oynatılacaktır.

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

Bu, ana sayfaya bir kullanıcı hareketi sağladığınız için muhtemelen reklamınızın oynatılabildiği anlamına gelir.

Şimdi, Safari ve Mobil Chrome'un bundan daha katı kurallara sahip olduğunu ve aslında en az bir kez kullanıcı-olay işleyicisinin kendisinden veya öğesinde play()programlı olarak yöntemi tetiklemenizi gerektireceğini unutmayın .<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>

Sese ihtiyacınız yoksa, medyanıza eklemeyin, yalnızca video parçası olan bir videonun da otomatik oynatılmasına izin verilir ve kullanıcınızın bant genişliği kullanımı azalır.

Benim için (Angular projesinde) bu kod yardımcı oldu:

HTML'de eklemelisiniz autoplay muted

JS / TS olarak

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 etkinlik lisentner'ı kullanmayı deneyin

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

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

DOM Öğesini Genişletin, Hatayı Giderin ve Sorunsuz Bir Şekilde Degrade Edin

Aşağıda, yerel DOM oynatma işlevini sarmak, sözünü almak ve ardından tarayıcı bir istisna atarsa ​​bir oynat düğmesine geçmek için prototip işlevini kullanıyorum. Bu uzantı, tarayıcının eksikliğini giderir ve hedef öğe (ler) hakkında bilgi sahibi olan herhangi bir sayfada tak-çalıştır özelliklidir.

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

Benim durumumda bunu yapmak zorundaydım

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

Videonun js (video.play ()) aracılığıyla otomatik oynatılması veya oynatılması için Chrome'un bir kullanıcı etkileşimine ihtiyacı vardır. Ancak etkileşim her an her türlü olabilir. Sayfada rastgele tıklarsanız, video otomatik olarak oynatılır. Sonra çözdüm, "otomatik video oynatmayı etkinleştir" yazan bir düğme ekledim (yalnızca krom tarayıcılarda). Düğme hiçbir şey yapmaz, ancak yalnızca tıklamak, herhangi bir video için gerekli kullanıcı etkileşimidir.

Bir ses dosyasını çalmaya çalışırken ile benzer bir hatayla karşılaştım. İlk başta çalışıyordu, sonra markForCheckbir söz çözüldüğünde bir yeniden oluşturmayı tetiklemek için ChangeDetector'ın yöntemini aynı işlevde kullanmaya başladığımda çalışmayı durdurdu (görünüm oluşturma ile ilgili bir sorun yaşadım).

Ben değiştiğinde markForCheckiçin detectChangeskendisine tekrar çalışmaya başladı. Ne olduğunu gerçekten açıklayamam, sadece bunu buraya düşürmeyi düşündüm, belki birine yardımcı olur.

Beklendiği gibi kod çalışmanız için içeriğinize mutedöznitelik eklemelisiniz videoElement. Aşağıya bak ..

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

Kaynak olarak geçerli bir video bağlantısı eklemeyi unutmayın

Android Telefonda oynarken bazı sorunlar yaşadım. Birkaç denemeden sonra Veri Tasarrufu açıkken otomatik oynatma olmadığını öğrendim:

Veri Tasarrufu modu etkinleştirilirse otomatik oynatma yoktur . Veri Tasarrufu modu etkinleştirilirse, Medya ayarlarında otomatik oynatma devre dışı bırakılır.

Kaynak

Tip Chrome: // flags adres çubuğuna

Ara: Otomatik oynatma

Otomatik Oynatma Politikası

Sesin veya videonun otomatik oynatılmasına izin verilip verilmediğine karar verirken kullanılan politika.

- Mac, Windows, Linux, Chrome OS, Android

Bunu " Kullanıcı hareketi gerekmez " olarak ayarlayın

Chrome'u yeniden başlatın ve herhangi bir kodu değiştirmeniz gerekmez