0

The code snippet is given below. I have used impress.js to create an online presentation. I want to insert a video in the last slide which autoplays when the slide comes up. But I am unable to implement that. Can anyone please help me with this?

<div class="step box" data-x="0" data-z="4000" data-rotate-y="0">

<video width="800" height="600" controls autoplay>
   <source src="electric_bulb_hd_stock_video.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

</div>
Ashesh Das
  • 365
  • 1
  • 8
  • 22
  • It should have to work... – Chetan Sep 22 '16 at 08:40
  • may be some issue with your slide up event. Try with loop attribute. If it works then issue lies withing your slide up event. May be video is playing before slide came up. – Chetan Sep 22 '16 at 08:43
  • No that is not the case, as when I click on the play button the video starts playing. Just the autoplay feature does not seem to work, rest all is working correctly! – Ashesh Das Sep 22 '16 at 09:04
  • 1
    Are you working with mobile devices or web versions??? because in mobile versions autoplay attribute doesn't work... – Chetan Sep 22 '16 at 09:07
  • Maybe its starting before you are getting to the slide and its already finished playing, try adding repeat and see what happens – naortor Sep 22 '16 at 11:04

2 Answers2

2

In impress.js, the DOM prevent video to autoplay, but you can use API, like this:

var videoStep = document.getElementById("video-step");
var video = document.getElementById("video");
videoStep.addEventListener("impress:stepenter", function(){
    video.play();
}, false);
videoStep.addEventListener("impress:stepleave", function(){
    video.pause();
}, false);

HTML:

<div id="video-step" class="step" data-x="-50000" data-y="2000" data-z="-60000" data-scale="6">
    <video id="video" width="420" height="340" autoplay>
        <source src="video/test.webm" type="video/webm">
    </video>
</div>

With the code above, when you enter this step, the video will play automatically, and it will pause when you leave this step. Give it a try :)

Grey Li
  • 11,664
  • 4
  • 54
  • 64
  • Thank You so much! This trick has worked!! It has really helped me a lot :) – Ashesh Das Sep 27 '16 at 12:46
  • total newbie here, learning HTML, javascript as I learn impress.js. Where do I add the API part? in the html before impress.init()? or in the style-sheet? – toylas Oct 25 '16 at 20:25
  • nevermind, I tried adding it just before the impress.init() call and it worked. Thaks! – toylas Oct 25 '16 at 20:29
0

Try autoplay="autoplay"

http://www.w3schools.com/tags/att_video_autoplay.asp

It should work.

Zirbo Filip
  • 300
  • 1
  • 13