Блог

У меня есть

 <video id="video_player">
    <source id="video_player_source"/>
</video>
  

в моем HTML-файле и

 const videoPlayer = document.getElementById("video_player") as HTMLVideoElement;
const videoPlayerSource = document.getElementById("video_player_source") as HTMLElement;
videoPlayer.setAttribute("style", `top: 0; left: 0; width: 100%; `);
videoPlayerSource.setAttribute("src", "https://www.html5rocks.com/en/tutorials/track/basics/treeOfLife/video/developerStories-en.webm");
videoPlayer.play();
  

в моем процессе рендеринга (видео является демонстрационным видео).
Видео действительно загрузилось (один кадр видео отображается на экране), но оно не воспроизводится при моем вызове play() .

Как мне это исправить? Спасибо.

MediaElement.play() возвращает обещание начиная с версии:

Firefox: 53

«Chrome для рабочего стола», «Chrome для Android», «Android WebView»: 50

‘Opera’, ‘Opera для Android’: 37

iOS Safari: iOS 10

Desktop Safari: июнь 2017, так что, возможно, версия 10.1.1

Итак, чтобы решить эту проблему, вот что вы можете сделать

HTML

 <video id="video_player">
    <source id="video_player_source"/>
</video>
  

JS

 const videoPlayer = document.getElementById("video_player");
const videoPlayerSource = document.getElementById("video_player_source");
videoPlayer.setAttribute("style", `top: 0; left: 0; width: 100%; `);
videoPlayerSource.setAttribute("src","https://www.html5rocks.com/en/tutorials/track/basics/treeOfLife/video/developerStories-en.webm");
videoPlayer.load();
var playPromise = videoPlayer.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.
  });
}