I have a web page which has a video. However, the video does not auto play when the page is loaded. Instead, the video should start play automatically when a popup window (which has the video) is displayed. I am not able to get the auto play work. I read many posts at SO and tested many methods. No success.
Note that the popup window does not display when the page is loaded. It shows up only when a button one the page is clicked. This page is a section in a fullPage.js-enabled page.
Here is my HTML:
<body>
...
<div class="section">
.....
<div class="popup" id="my-video">
<video id="my-clip" controls>
<source src="/video/my.mp4" type="video/mp4"></source>
<source src="/video/my.ogv" type="video/ogg"></source>
<source src="/video/my.webm" type="video/webm"></source>
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
...
</body>
Here is the Javascript when the button is clicked to trigger the display of the popup window:
var vid = document.getElementById("my-clip");
vid.play();
I see a black screen in both Chrome and Firefox when the popup is displayed. The video is able to play only after I click on the black area or the video controls. However, this is not auto-play.