Pausing video doesn't stop audio in html5 video tag

Question

I'm pausing a video using its pause() method.. the problem is that the audio continues playing... I also tried pausing it from the Javascript Console in Firefox... nothing happens. The video is in .ogg format and is not even playing in Chrome (because I think it's not supported). I hosted the video on Amazon S3 and it is streaming perfectly. I'm creating the element dynamically, loading its info from a JSON request. Here is some code:

function showVideo() {
        var video = videodata;

        var videobox = $('#videobox').first();
        var videoplayer = document.getElementById('videoplayer');

        if (video.Enabled) {
            if ((videoplayer != null && videoplayer.currentSrc != video.Location) || videoplayer == null) {
                console.log('Creating video elem');
                videobox.empty();
                videobox.append('<video id="videoplayer" preload="auto" src="' +
                  video.Location + '" width="100%" height="100%" autoplay="autoplay" loop="loop" />');
                videobox.show();
            }
        } else {
            if (videoplayer != null) {
                videoplayer.pause();
                console.log('Pausing video...');
            }
            console.log('Deleting video elem');
            videobox.hide();
            videobox.empty();
        }
    }

I already posted a similar question before... but now I'm using other browsers, so I thought I have to create a new question.

---

Here is the working code (thanks to the user heff!)

function showVideo() {
    var video = videodata;

    var videobox = $('#videobox').first();
    var videoplayer = document.getElementById('videoplayer');

    if (video.Enabled) {
        if ((videoplayer.src != video.Location) || videoplayer.src == '') {
            console.log('Playing video: ' + video.Location);
            videoplayer.src = video.Location;
            videoplayer.load();
            videoplayer.play();
            videobox.show();
        }
    } else {
        if (videoplayer.src != '') {
            console.log('Pausing video...');
            videoplayer.pause();
            videoplayer.src = '';
            videobox.hide();
        }
    }
}

Answer 1

My guess would be that showVideo is being called twice some how and creating two copies, one of which keeps playing even after you call pause on the other.

In your code, the videoplayer var won't refer to the video tag you create later with append, it will point to whatever had that id before, which I'm assuming gets removed when you empty the box, but might stick around in memory (and continue to play sound).

Just my best guess, but either way it'd be better to use the video element's API to set the source and other parameters rather than emptying the box and rebuilding the tag.

videoplayer.src = video.Location;
videoplayer.autoplay = true;
// etc.

Also, 100% isn't a valid value for the width/height attributes. You'll need to use CSS to make the video stretch to fill an area.