0

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
curious1
  • 14,155
  • 37
  • 130
  • 231
  • Depending on which version of fullpage.js you're using, you may want to use the afterRender callback that fullpage offers. Check out this post http://stackoverflow.com/questions/25430333/html5-video-autoplay-function-not-working-in-fullpage-js?rq=1 – borbesaur Nov 21 '16 at 19:47
  • Hello, thanks so much for your input. I read that link before my post and tested it. It does not work in my case. I do not need auto-play at page load. Again, thanks! – curious1 Nov 21 '16 at 19:51
  • If the video plays once you click the black area or on the video controls, why don't you hack it together by using javascript to literally click one of those two places after the pop-up is rendered. You could use this as a temporary solution while you figure out something better. (I don't think the wasted CPU power is a huge issue since with video play you're assuming the user has a ton of computing power) – borbesaur Nov 21 '16 at 19:56
  • " why don't you hack it together by using javascript to literally click one of those two places after the pop-up is rendered." ---- Thanks for suggesting this! I just need a working solution. I tested $("#my-clip").click() and it is not working. Do you happen to know how to implement something as you suggested? – curious1 Nov 21 '16 at 20:04
  • I would inspect the page and zero in on something you clicked that worked. If there's a play button, I would select that, since that's more specific than #my-clip, which is the entire video tag. The important thing is that you make sure that the point at which you are selecting and clicking in your javascript comes at a point in the file AFTER the pop-up has been rendered. ( I would do in the same function that renders the pop-up immediately after it is rendered.) – borbesaur Nov 21 '16 at 20:10
  • Inspected the html. Nothing more than what I posted there. Tested $("#my-clip").click() and $("#my-clip source").click(). I made my code in setTimeout, 3 seconds after the popup is displayed. Nothing is working. – curious1 Nov 21 '16 at 20:20
  • Difficult to help you without a reproduction of the issue. Where are you using the play statement in your code ? Is it in the `afterRender`? If not, you should. – Alvaro Nov 22 '16 at 10:42

0 Answers0