BinaryDevelop
  1. ホーム
  2. javascript

[解決済み】DOMException: サポートされているソースが見つからなかったため、読み込みに失敗しました。

2022-02-01 08:44:01

質問

次のような現象が起きています。 DOMException: サポートされているソースが見つからなかったため、読み込みに失敗しました。 という行があります。video.setAttribute('crossorigin', 'anonymous'); を追加した後にこの問題が発生しました。私はモバイルでアプリを開発しているので、クロスオリジンのためにこの行を追加する必要があります。クローム50をアップデートした後、この問題が発生しました。 

<!DOCTYPE html>
    <html>
    <head> 
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    </head> 
    <body>  
    <script>     
     var video = document.createElement( 'video' ); 

     video.id = 'video';    
     video.type = ' video/mp4; codecs="theora, vorbis" ';   
     video.src = "http://abcde.com/img/videos/what_is_design_thinking.mp4"; 
     video.volume = .1; 
     video.setAttribute('crossorigin', 'anonymous');    
     video.load(); // must call after setting/changing source   

     $('body').html(video);
     video.play();  

     var canvas = document.createElement('canvas');
     var ctx = canvas.getContext('2d');

     $('body').append(canvas);

     video.addEventListener('play', function() {
       var $this = this; //cache
       (function loop() {
       if (!$this.paused && !$this.ended) {
       ctx.drawImage($this, 0, 0);
       setTimeout(loop, 1000 / 30); // drawing at 30fps
       }
       })();
      }, 0);

    </script>
    </body> 
    </html>

解決方法は？

v50以降の新しいChrome/Chromiumブラウザで発生します。

から HTMLMediaElement.play() はプロミスを返します。 で Googleデベロッパーズ :

<ブロッククオート

ウェブ上で音声や動画を自動的に再生することは強力な機能ですが、プラットフォームによってさまざまな制約があります。現在、ほとんどのデスクトップ用ブラウザは、ウェブページの冒頭に必ず <video> または <audio> は、ユーザーとのインタラクションなしにJavaScriptで再生されます。しかし、多くのモバイルブラウザでは、JavaScriptによる再生が行われる前に、ユーザーの明示的なジェスチャーが必要です。これにより、帯域幅を支払っているモバイルユーザーや公共の場にいるユーザーが、ページと明確に対話することなく、誤ってメディアのダウンロードや再生を開始することがないように配慮しています。

再生開始のためにユーザーの操作が必要かどうかを判断したり、（自動）再生を試みて失敗した場合にその失敗を検出したりすることは、歴史的に困難とされています。さまざまな回避策がありますが、理想的とは言えません。根本的な play() この不確実性に対処するメソッドは、長い間待たれていましたが、今回、Chrome 50に初期実装され、ウェブプラットフォームに採用されました。

A play() を呼び出す。 <video> または <audio> 要素がプロミスを返すようになりました。再生に成功した場合は Promise が満たされ、再生に失敗した場合は失敗を説明するエラーメッセージとともに Promise が拒否されます。これにより、以下のような直感的なコードを書くことができます。 

var playPromise = document.querySelector('video').play();

// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {
  playPromise.then(function() {
    // Automatic playback started!
  }).catch(function(error) {
    // Automatic playback failed.
    // Show a UI element to let the user manually start playback.
  });
}

新しい Promise ベースのインターフェースでは、play() メソッドが成功したかどうかを検出するだけでなく、play() メソッドを実行したときに play() メソッドが成功しました。ウェブブラウザが再生の開始を遅らせることを決定する場合があります。例えば、デスクトップの Chrome は <video> タブが表示されるまで 実際に再生が開始されるまで Promise は実行されません。 then() はメディアが再生されるまで実行されません。これまでの play() が成功した場合、例えば、再生イベントを一定時間待ち、発射されなければ失敗とするような場合、遅延再生のシナリオでは偽陰性の影響を受けやすいのです。

クレジット HTML5 audio 要素の再生時に、サポートされるソースが見つからなかったため、読み込みに失敗しました。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します