Turn off 'autoplay' on embedded(event) video when it has no playbar skin

[KeelyM]

Hi, I'm working on a responsive project in Captivate 2017 and I have a slide with an embedded video that I'd like the user to be able to control with external play/pause buttons other than the ones in the video skins. I followed along with this video - Control Event Video with JavaScript | eLearning  (great video btw). Everything is working well, except I'd like the video to be paused when the user enters the slide. I have the video skin set to none as I don't want that showing, but I'm noticing that when you don't set a video skin it won't let you uncheck autoplay. So I tried adding -

document.getElementsByTagName("video")[0].pause();

to the onEnter execute javascript action I created, but it doesn't seem to have any effect.

Any ideas or advice would be much appreciated!

[Jeremy_Shimmerman]

I think what might be happening here is that your pause script is being executed before the video has finished loading.  You might want to try hitting F12 when in your browser to see if 'video[0]' is unidentified. 

If this is the case, there are a couple of things you could do. 

1. Wrap your pause function in jquery's .ready function.  So it would be:

$(document).ready(function(){

document.getElementsByTagName("video")[0].pause();

});

2.  Write a custom html when you import your web object.  You would then launch your pause code from that html script. 

3.  Embed your video through Youtube or Vimeo and use their API.  I posted a blog on how to do this with Vimeo if you are interested.  The benefits to this is that you have a lot more 'contol' over the videos.  

https://elearning.adobe.com/2017/12/end-of-video-events-with-vimeo/

https://elearning.adobe.com/2017/12/create-a-vimeo-15-second-rewind-button/

[KeelyM]

Thanks for the info!

When I hit f12 the error I came across was - Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

Which had a link to this page - DOMException: The play() request was interrupted  |  Web  |  Google Developers

I'm trying to navigate the published CPM.js file currently to see if I can edit things in there, but I'm very unfamiliar with javascript and all this stuff, so I'm not even sure if what's on this page would work in this instance.

I may try uploading the video to YouTube, unfortunately I do not have the option of using vimeo in this instance.

[Jeremy_Shimmerman]

The error - Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause() means that the video is trying to be be paused before it has finished loading.

There is another easier option you could try.  In the properties panel for video there is a checkbox for autoplay.  Try unclicking that and see if it works. 

[KeelyM]

I usually uncheck that box, but apparently when you choose to not have a skin for your video, Captivate will not let you uncheck the autoplay option   It is grayed out.

[Jeremy_Shimmerman]

Here's another option.  Videos have a .readyState function.  You could try:

var vid = document.getElementsByTagName("video")[0]

if (vid.readyState == 4) {

vid.pause()

}

That means that as soon as the video is ready (i.e. loaded), it will trigger the pause function. 

[KeelyM]

Would this go into my On Enter slide action? I have my On Enter action set to 'execute javascript' and in my script window I have -

var vid = document.getElementsByTagName("video")[0]

if (vid.readyState ==4){

vid.pause()

}

cp.hide('pauseButton')

It doesn't seem to be working, it's not hidiing my pause button either.

[Jeremy_Shimmerman · Accepted solution]

I have one last idea and it's a bit easier if you run it through advanced actions.

When on enter execute an advanced action. The advanced action should:

delay next action by 1 second;

execute javascript

Then the javascript should be:

document.getElementsByTagName("video")[0].pause();

That should probably do it.  You could adjust the delay to a few milliseconds. 

[KeelyM]

That did it! I originally delayed it by 1 second and it was too slow, so I changed it to .025 and that did the trick!

Thank you so much for helping me figure this out, I appreciate it a lot!