jquery slides and html5 video

I am trying to use an HTML5 video as the first element in a SlidesJS slideshow. The problem is if I click on the play button to开发者_高级运维 play the video, the slideshow should stop until the video finishes completely and then the slideshow should move to the next slide. Also, the hoverpause works only on images but not on html5 video element.

Here's my JavaScript code so far:

$(function () {
    $('#slides').slides({
        preload: true,
        preloadImage: 'Images/loading.gif',
        play: 5000,
        pause: 2500,
        hoverPause: true
    });
});

Media Events has an overview of the exposed events you can tap into. You should simply stop the slideshow on the play event and restart it on the ended event.

Example: <video ... onPlay="//DoJSStuffHere" onEnded="//DoOtherJSStuffHere" />

Like Semyazas says, but skip the on-attributes and do it with javascript:

var v = document.getElementById("id-of-movie");
//$(v).bind('pause', function () { the video gets paused }
//$(v).bind('play', function () { do something when the video starts playing, fired by v.play()
//$(v).bind('ended', function () { the video has ended }