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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!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> |
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
.