Setting a method without jQuery

Question

I'm using mediaelements.js, and I need to add the mediaelementplayer() method to the videos on the page.

I can only seem to get it to work with jQuery though, not with Vanilla JS and since the rest of the site is Vanilla, it seems a waste to include jQuery just for this.

This works:

$('video').mediaelementplayer({
    defaultVideoWidth: 480,
    defaultVideoHeight: 270,
    features: ['playpause','progress'],
});

This doesn't:

var videos = document.getElementsByTagName('video');

for (var i = 0; i < videos.length; i++) {

    videos[i].mediaelementplayer({
        defaultVideoWidth: 480,
        defaultVideoHeight: 270,
        features: ['playpause','progress'],
    });

}

Error: Uncaught TypeError: Object #<HTMLVideoElement> has no method 'mediaelementplayer'

I've no idea, only thing I can think of is jQuery is returning something different than getElementsByTagName?

Answer 1

The mediaelements.js documentation tells you how you can do this without jQuery:

<script>
    // JavaScript object for later use
    var player = new MediaElementPlayer('#player',/* Options */);
    // ... more code ...
    player.pause();
    player.setSrc('mynewfile.mp4');
    player.play();
</script>

In your case, you'd do something like this:

<script>
    // JavaScript object for later use
    var player = new MediaElementPlayer('#video', {
                     defaultVideoWidth: 480,
                     defaultVideoHeight: 270,
                     features: ['playpause','progress'],
                 });
</script>