Chrome Geliştirici Araçları'nda bu beklenmeyen medya hatasıyla mı karşılaştınız? JavaScript Konsolu mu?
veya
O zaman doğru yerdesiniz. Korkmayın. Bu hatanın nedenini ve bu sorunu nasıl düzelteceğinizi açıklayacağız.
Bunun nedeni nedir?
Aşağıda "Yakalanmadı (sözüyle)" kodunu yeniden oluşturan bir JavaScript kodu gösterilmektedir gördüğünüz hata:
<video id="video" preload="none" src="https://example.com/file.mp4"></video> <script> video.play(); // <-- This is asynchronous! video.pause(); </script>
Yukarıdaki kod, Chrome Geliştirici Araçları'nda şu hata mesajıyla sonuçlanır:
_Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
Video, preload="none"
nedeniyle yüklenmediğinden video oynatılamıyor
her zaman video.play()
yürütüldükten hemen sonra başlamalıdır.
Ayrıca, Chrome 50 sürümünden itibaren, <video>
veya <audio>
cihazında play()
araması
öğesi, tek bir sonuç döndüren bir işlev olan Promise döndürür.
eşzamansız olarak ayarlayabilirsiniz. Oynatma başarılı olursa sözler gerçekleşir.
playing
etkinlik aynı anda tetiklenir. Oynatma başarısız olursa Promise
ve hata mesajını içeren bir hata mesajı görüntülenir.
Peki, şimdi neler olacağı:
video.play()
, video içeriğini eşzamansız olarak yüklemeye başlar.video.pause()
, henüz hazır olmadığı için videonun yüklenmesini kesintiye uğratıyor.video.play()
, eşzamansız olarak yüksek sesle reddeder.
Kodumuzda video oynatma Promise işlemini işlemediğimiz için bir hata mesajı Chrome Geliştirici Araçları'nda görünür.
Nasıl giderilir?
Artık kök nedeni anladığımıza göre bunu düzeltmek için neler yapabileceğimize bakalım.
Öncelikle, bir medya öğesinin (video veya ses) oynatılacağını asla varsaymayın. Dikkat
play
işlevi tarafından döndürülen Promise'in reddedilip reddedilmediğini kontrol edin. Evet
emin olunması gerekir. Taahhüt, oynatma işlemi gerçekten tamamlanana kadar
başlatılmıştır. then()
içindeki kod, medya dosyası oluşturulana kadar yürütülmeyecektir.
çalıyor.
Örnek: Otomatik oynatma
<video id="video" preload="none" src="https://example.com/file.mp4"></video> <script> // Show loading animation. var playPromise = video.play(); if (playPromise !== undefined) { playPromise.then(_ => { // Automatic playback started! // Show playing UI. }) .catch(error => { // Auto-play was prevented // Show paused UI. }); } </script>
Örnek: Oyna ve Duraklat
<video id="video" preload="none" src="https://example.com/file.mp4"></video> <script> // Show loading animation. var playPromise = video.play(); if (playPromise !== undefined) { playPromise.then(_ => { // Automatic playback started! // Show playing UI. // We can now safely pause video... video.pause(); }) .catch(error => { // Auto-play was prevented // Show paused UI. }); } </script>
Bu basit örnek için çok iyi bir seçim. Ancak bir retrospektif toplantısı için video.play()
daha sonra izleyebilir misiniz?
Sana bir sır söyleyeyim. video.play()
kullanmak zorunda değilsiniz,
video.load()
ve nasıl yapılacağı aşağıda anlatılmıştır:
Örnek: Getir ve Oynat
<video id="video"></video> <button id="button"></button> <script> button.addEventListener('click', onButtonClick); function onButtonClick() { // This will allow us to play video later... video.load(); fetchVideoAndPlay(); } function fetchVideoAndPlay() { fetch('https://example.com/file.mp4') .then(response => response.blob()) .then(blob => { video.srcObject = blob; return video.play(); }) .then(_ => { // Video playback started ;) }) .catch(e => { // Video playback failed ;( }) } </script>
Play taahhüt desteği
HTMLMediaElement.play()
, metin yazıldığı sırada bir söz vereceğini söylüyor:
Chrome, Edge, Firefox, Opera ve Safari.
Tehlike bölgesi
<video>
içindeki <source>
, play()
sözünün asla reddedilmemesine neden oluyor
<video src="not-existing-video.mp4"\>
için play()
taahhüdü şu şekilde reddedilir:
olması beklenir. <video><source
src="not-existing-video.mp4" type='video/mp4'></video>
için play()
taahhüdü
hiçbir zaman reddetmez. Bu durum yalnızca geçerli kaynak olmadığında gerçekleşir.