Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to stop video-js onclick event from pausing video

I have a simple JSFiddle here: http://jsfiddle.net/cvCWc/2/

The basic code looks like:

window.player = videojs("movie_container", { techOrder: ["html5", "slash"] }, function() {
    videojs_player = this;
    videojs_player.src({ src: "http://video-js.zencoder.com/oceans-clip.mp4", type: 'video/mp4'})

    videojs_player.on("click", function(event){
        event.preventDefault();
        alert('click');
    });

    videojs_player.play();
});

I am trying to capture all click events on the video for future processing, but I don't want the video to pause when clicked. Any ideas?

like image 413
DaKaZ Avatar asked Jan 31 '14 00:01

DaKaZ


2 Answers

I found the answer for HTML5... but I don't get click events in the flash fallback. Updated jsfdl: http://jsfiddle.net/cvCWc/3/

window.player = videojs("movie_container", { techOrder: ["html5", "flash"] }, function() {
    videojs_player = this;
    videojs_player.src({ src: "http://video-js.zencoder.com/oceans-clip.mp4", type: 'video/mp4'})
    videojs_player.off('click');
    videojs_player.on("click", function(event){
        event.preventDefault();
        console.log("click", event.clientX, event.clientY, videojs_player.currentTime());
    });

    videojs_player.play();
});
like image 129
DaKaZ Avatar answered Nov 15 '22 08:11

DaKaZ


Just an alternative if someone drops to this. When you wanna bypass the stop play functionality when user clicks the stream(or view, whatever you call it), not the control bar, one can comment out somelines in videojs..

Player.prototype.handleTechClick_ = function handleTechClick_(event) {
        // We're using mousedown to detect clicks thanks to Flash, but mousedown
        // will also be triggered with right-clicks, so we need to prevent that
        if (event.button !== 0) return;

        // When controls are disabled a click should not toggle playback because
        // the click is considered a control
        if (this.controls()) {
            if (this.paused()) {
                //this.play(); // COMMENTED OUT
            } else {
                //this.pause(); // COMMENTED OUT
            }
        }
    };

Control bar will still work...

like image 25
Yagiz Ozturk Avatar answered Nov 15 '22 08:11

Yagiz Ozturk