jamesantbird jamesantbird - 14 days ago 5
jQuery Question

Listen out for end of video, display video in JQuery & Revolution Slider

I need to create a replay button for my Revolution slider video (please check the link) on our homepage.

http://staging.thinkcreative.wearecreativeweb.co.uk/

I have tried using the inbuilt 'actions' the slider provides and the API but to no avail.

I need an event listener in JQuery to find out when the video which plays AFTER the initial 'Play Me' video has ended and to load up a button which will replay the video.

I can set up this replay button using the inbuilt slider 'actions' but all I need is for the query to recognise that that video is finsihed and display the button needed.

I have tried this code in codepen http://codepen.io/jamesantbird/pen/EgGEwZ

<video id="home-video" width="600" height="400" controls>
<source src="http://staging.thinkcreative.wearecreativeweb.co.uk/wp-content/uploads/2016/10/think-play-me.mp4" type="video/mp4">
</video>

<a href="#" id="replay" style="display:none;">CLICK</a>

var vid = document.getElementById("home-video");
vid.onended = function() {
$('#replay').css('display', 'inline-block');
};


Revolution slider does not seem to like me putting this into its 'Custom Javascript' area.

But it no workey. Could someone please help? I'm fine with styling and front end development of sites just JQuery alludes me at the moment.

Thanks!

Answer

If anyone is interested we solved this issue with a work around, not with the answer to the question I posted. The video in the slide basically ends then starts the next slide which contains a replay button. Simples. The function works brilliantly and it makes more of a feature of the replay button as apposed to just having a little replay in the bottom of the screen.

Hope this was useful to anyone!

Comments