CODEWITHSUNDEEP
typescriptelectron
Hypatia du Bois-Marie
Hypatia du Bois-Marie

Reputation: 113

Electron video cannot play

I have

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

in my html file, and

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

in my renderer process (the video is a demo video). The video did load (one frame of the video shows on screen), but it doesn't play when I call play().

How do I fix this? Thanks.

Upvotes: 0

Views: 1654

Answers (1)

ravi
ravi

Reputation: 1220

MediaElement.play() returns a Promise as of version:

Firefox: 53

'Chrome for Desktop', 'Chrome for Android', 'Android WebView': 50

'Opera', 'Opera for Android': 37

iOS Safari: iOS 10

Desktop Safari: Jun 2017, so maybe v10.1.1

So to solve this issue, here is what you can do

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

Upvotes: 1

Related Questions