Video.js Video Player Plugin Library in Javascript For Playing Videos in Browser

Welcome folks today in this blog post we will be showing the video from url in browser using the video.js library in javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Video.js Example</title>
    <link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>
</head>

<body>
    <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
        data-setup='{}'>
        <source
            src="https://player.vimeo.com/external/474243696.sd.mp4?s=d801adbe729c8150e14b50500593636f32045cfe&profile_id=164&oauth2_token_id=57447761"
            type='video/mp4'>
        <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>
    <script>
       var player = videojs('my-video', {
      autoplay: false,
      controls: true,
      loop: false,
      preload: 'auto',
      techOrder: ['html5', 'flash']
    });
    </script>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Video.js Example</title>

</head>

<body>

<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"

data-setup='{}'>

<source

src="https://player.vimeo.com/external/474243696.sd.mp4?s=d801adbe729c8150e14b50500593636f32045cfe&profile_id=164&oauth2_token_id=57447761"

type='video/mp4'>

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>

var player = videojs('my-video', {

autoplay: false,

controls: true,

loop: false,

preload: 'auto',

techOrder: ['html5', 'flash']

});

</script>

</body>

</html>

As you can see in the above code we are including the video.js library cdn and then we are initializing the video.js plugin and then we are passing the options where we are passing the reference of the video element and then we are passing the options.