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()返回一个Promise版本：

Firefox：53

“ Chrome for Desktop”，“ Chrome for Android”，“ Android WebView”：50

'Opera'，'Opera for Android'：37

iOS Safari：iOS 10

台式机Safari：2017年6月，也许是v10.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.
  });
}

电子视频无法播放

1 个答案: