I have a video embedded in a site, and when a user plays the video I have JS to expand the video to the width of the site (and then shrink it on pause).

The video is being played/paused using the built-in controls, but when the video plays while expanding, it just looks weird, hence my desire to prevent playing until after the expansion.

However, preventDefault(); doesn't seem to be working in this instance. Does anyone know a way of achieving this? Thanks.

Here is my JS -

$(document).ready(function(){

    var video = $('#intro-video');

    video.on('play', function(e){

        e.preventDefault();

        video.animate({
            height:     '506',
            width:      '900'
        }, 500);

    });

    video.on('pause', function(e){

        video.animate({
            height:     '200',
            width:      '356'
        }, 500);

    });

});

And here is the HTML source -

<video id="intro-video" controls="">
    <source type="video/mp4" src=".mp4"></source>
    Sorry, your browser is old and doesn't support the HTML5 'video' tag. Sucks to be you...
</video>

I have a video embedded in a site, and when a user plays the video I have JS to expand the video to the width of the site (and then shrink it on pause).

The video is being played/paused using the built-in controls, but when the video plays while expanding, it just looks weird, hence my desire to prevent playing until after the expansion.

However, preventDefault(); doesn't seem to be working in this instance. Does anyone know a way of achieving this? Thanks.

Here is my JS -

$(document).ready(function(){

    var video = $('#intro-video');

    video.on('play', function(e){

        e.preventDefault();

        video.animate({
            height:     '506',
            width:      '900'
        }, 500);

    });

    video.on('pause', function(e){

        video.animate({
            height:     '200',
            width:      '356'
        }, 500);

    });

});

And here is the HTML source -

<video id="intro-video" controls="">
    <source type="video/mp4" src="http://www.somesite./video.mp4"></source>
    Sorry, your browser is old and doesn't support the HTML5 'video' tag. Sucks to be you...
</video>

• javascript
• html
• video
• preventdefault

Share Improve this question Follow edited Sep 16, 2014 at 5:33 Agamemnus 1,44644 gold badges2020 silver badges4444 bronze badges asked Apr 13, 2014 at 14:23 David GardDavid Gard 12.1k4242 gold badges128128 silver badges263263 bronze badges 4

• Is there a play button that's calling video.play() somewhere? – jackfrankland Commented Apr 13, 2014 at 14:31
• Yes, the controls are shown and this is how the video is being played. But I need to essentially prevent the play action until the video is full size, and then play. I'll update the question to make it clearer. Thanks. – David Gard Commented Apr 13, 2014 at 14:32
• Post up some HTML too, please. – jackfrankland Commented Apr 13, 2014 at 14:34
• Already done in my last edit :) – David Gard Commented Apr 13, 2014 at 14:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Because you're using the inbuilt player controls, the video will start when you press play, and I don't believe you can prevent the event at this point in javascript.

I would remend looking into creating your own controls for the player. That way, you can listen for the click event on the play button, and control the playback for the video directly.

Otherwise, the only thing I can think of is what I've done here: JSFiddle

Basically, when the video starts to play, pause it. Do the animation, then play it once the animation's finished. I've created a variable so the pause animation doesn't get triggered when we manually pause it:

var video = $('#intro-video');
var enlarged = false;

video.on('play', function(e){
    if (!enlarged){
        video[0].pause();
        video.animate({
            height:     '506',
            width:      '900'
        }, 500, function() {
            enlarged = true;
            video[0].play();
        });
    }
});

video.on('pause', function(e){
    if (enlarged) {
        enlarged = false;
        video.animate({
            height:     '200',
            width:      '356'
        }, 500);
    }
});

Actually it's very simple:

let videoShouldNotPlay = true
video.onplay = function () {
    if (videoShouldNotPlay) {
      video.pause()
      video.currentTime = 0 // set to the current time needed
      alert("You can't play the video right now")
      return
    }
}