电子视频无法播放

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 的版本：

火狐：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.
  });
}