Skip to main content
K
KeelyM
Inspiring
January 22, 2018
Answered

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

  • January 22, 2018
  • 1 reply
  • 4044 views

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!

This topic has been closed for replies.
Correct answer Jeremy Shimmerman

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.


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. 

1 reply

Jeremy Shimmerman
Jeremy Shimmerman
Participating Frequently
January 23, 2018

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/

    K
    KeelyMAuthor
    Inspiring
    January 23, 2018

    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
    Jeremy Shimmerman
    Participating Frequently
    January 23, 2018

    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. 

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices