Электронное видео не воспроизводится

Question

у меня

<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().

Как мне это исправить? Благодаря.

Answer 1

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

Firefox: 53

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

'Opera', 'Opera для Android': 37

iOS Safari: iOS 10

Настольное 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.
  });
}