Ufdjrw

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.

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