DOMException: не удалось загрузить, потому что не было найдено ни одного поддерживаемого источника

Я получаю DOMException: не удалось загрузить, потому что не было найдено поддерживаемого источника в video.play(); линия. Я получаю эту проблему только после добавления video.setAttribute('crossorigin', 'anonymous'); Я разрабатываю приложение на мобильных устройствах, поэтому для перекрестного происхождения мне нужно добавить эту строку. После обновления версии chrome 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>

Ответ 1

Эта проблема возникает в новых браузерах Chrome/Chromium, начиная с версии v50

От HTMLMediaElement.play() Возвращает обещание Google Разработчики:

Автоматическое воспроизведение аудио и видео в Интернете - это мощная возможность, и одна из них подвержена различным ограничениям на разных платформах. Сегодня большинство настольных браузеров всегда позволяют веб-страницам запускать <video> или <audio> воспроизведение через JavaScript без взаимодействия с пользователем. Однако большинству мобильных браузеров требуется явно выраженный пользовательский жест до начала воспроизведения, инициированного JavaScript. Это помогает гарантировать, что мобильные пользователи, многие из которых платят за пропускную способность или могут быть в общедоступной среде, не случайно начинают загрузку и воспроизведение носителей без прямого взаимодействия со страницей.

Исторически было сложно определить, требуется ли взаимодействие пользователя для начала воспроизведения, а также для обнаружения сбоев, возникающих при попытке (автоматическом) воспроизведении воспроизведения и сбоях. Существуют различные обходные пути, но они не идеальны. Улучшение базового метода play() для устранения этой неопределенности давно назрело, и теперь это перешло к веб-платформе с первоначальной реализацией в Chrome 50.

A play() вызов элемента a <video> или <audio> теперь возвращает Promise. Если воспроизведение преуспевает, 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.
  });
}
В дополнение к обнаружению того, был ли метод play() успешным, новый интерфейс на основе Promise позволяет определить, когда метод play() преуспел. Существуют контексты, в которых веб-браузер может решить задержать начало воспроизведения, например, настольный Chrome не начнет воспроизведение <video> до тех пор, пока вкладка не станет видимой. Обещание не будет выполняться до тех пор, пока воспроизведение не начнется, что означает, что код внутри then() не будет выполняться до тех пор, пока воспроизводится медиа. Предыдущие методы определения успешности play(), такие как ожидание заданного количества времени для игрового события и допущение неудачи, если оно не срабатывает, подвержены ложным негативам в сценариях с задержкой воспроизведения.

Кредиты: Не удалось загрузить, потому что не найдено ни одного поддерживаемого источника. при воспроизведении аудио-элементов HTML5

Ответ 2

У меня была такая же проблема с mp3 файлом. Моим решением было добавить контент в html через javascript.

Пример HTML, где я буду помещать файл в игру.

<span id="audio"></span>

И в javascript:

$('#audio').html('<audio autoplay><source src="audio/ding.mp3"></audio>');

Это приведет к воспроизведению звука, предполагая его то же самое для видео.

Надеюсь, что это поможет

Ответ 3

У меня была такая же ошибка, и она оказалась проблемой CORS.

Вместо

video.setAttribute('crossorigin', 'anonymous');

попробуйте более явный способ:

video.crossOrigin = 'anonymous';

И убедитесь, что ответ сервера имеет заголовок Access-Control-Allow-Origin: *. Или вместо символа звездочки укажите домен веб-сайта, которому разрешен доступ к видео с сервера.

Ответ 4

  <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>append demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>I would like to say: </p>

<script>
 var video = document.createElement( 'video' ); 

     video.id = 'video';    
     video.type = ' video/mp4; codecs="theora, vorbis" ';   
     video.src = "http://www.w3schools.com/html/mov_bbb.mp4"; 

    // $('body').html(video);
     video.play();  
     video.addEventListener('play', function() {
       var $this = this; //cache
       (function loop() {
       if (!$this.paused && !$this.ended) {      
       setTimeout(loop, 1000 / 30); // drawing at 30fps
       }
       })();
      }, 0);
$( "p" ).append( video );
</script>

</body>
</html>