Video.js AJAX - Introduction

Video.js is a popular open-source video player that enables developers to embed videos in web pages. One of its key features is its flexibility, allowing developers to customize and extend it with numerous plugins and API hooks.

In this article, we'll discuss how to use AJAX with Video.js to load video files dynamically from a server, rather than embedding them directly in the HTML page. We'll cover the following topics:

• Basic setup of Video.js
• Loading videos with AJAX and Video.js
• Dynamically updating Video.js player controls

Basic setup of Video.js

First, you'll need the Video.js library. You can download it from the Video.js website or use a CDN.

Next, you'll need some HTML markup for a video player:

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
    <source src="MY_VIDEO.mp4" type='video/mp4'>
    <source src="MY_VIDEO.webm" type='video/webm'>
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>

Here, we've set up a basic Video.js player with a video file (MY_VIDEO.mp4) and fallbacks for other video formats (MY_VIDEO.webm) using the <source> element.

You'll also need to include the Video.js library and the CSS stylesheets:

<link href="//vjs.zencdn.net/7.11.4/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.11.4/video.min.js"></script>

Finally, you can initialize the Video.js player using some JavaScript:

var player = videojs('my-video');

Loading videos with AJAX and Video.js

Now, let's say you want to load the video file (MY_VIDEO.mp4) dynamically from a server using AJAX instead of embedding it directly in the HTML markup.

First, you'll need to set up an AJAX request to fetch the video file:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'MY_VIDEO.mp4', true);
xhr.responseType = 'blob';
xhr.onload = function() {
    if (this.status === 200) {
        var blob = this.response;
        player.src(window.URL.createObjectURL(blob));
    }
};
xhr.send();

Here, we're sending a GET request to fetch the video file (MY_VIDEO.mp4) in binary format (blob). Once the request succeeds, we create a blob object from the response and set it as the source of the Video.js player using the player.src() method.

Dynamically updating Video.js player controls

Finally, let's say you want to dynamically update the Video.js player controls, such as the play/pause button and the progress bar, based on the progress of the AJAX request.

You can do this by adding event listeners to the AJAX request and the Video.js player:

xhr.onprogress = function(event) {
    var percent = (event.loaded / event.total) * 100;
    player.bufferedPercent(percent);
};

player.on('play', function() {
    // do something when the player starts playing
});

player.on('pause', function() {
    // do something when the player pauses
});

player.on('ended', function() {
    // do something when the player ends
});

Here, we're updating the buffered percent of the Video.js player based on the progress of the AJAX request, using the player.bufferedPercent() method. We're also adding event listeners to the Video.js player to detect when it starts playing, pauses, or ends.

Conclusion

In this article, we've covered how to use AJAX with Video.js to load video files dynamically from a server and how to dynamically update the Video.js player controls based on the progress of the AJAX request. There are many more things you can do with Video.js, such as customizing the player skin, adding plugins, and using the API hooks.