How to confider videojs player for HLS stream | VideoJs HLS player | play .m3u8 file using videojs
To configure Video.js for HLS (HTTP Live Streaming) streams, you need to include the necessary plugins and set up the player with the appropriate options. Here's a step-by-step guide:
1. Include the Video.js library: Start by including the Video.js library in your HTML file. You can download it from the Video.js website or use a CDN. Add the following code within the `<head>` tag of your HTML file:
```html
<link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.14.3/video.js"></script>
```
2. Include the HLS plugin: Video.js does not support HLS playback out of the box, so you'll need to include the videojs-contrib-hls plugin. Add the following code after the Video.js library script tag:
```html
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
```
3. Create an HTML video element: Add a video element to your HTML markup with a unique ID. For example:
```html
<video id="example-video" width="auto" height="500" class="video-js vjs-default-skin" style="margin: 0 auto;" controls>
<source src="https://example.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
type="application/x-mpegURL">
</video>
```
4. Enable HLS support: Tell Video.js to use the HLS plugin for HLS playback. Add the following code:
```javascript
<script>
var player = videojs('example-video');
player.play();
</script>
```
Replace `'YOUR_HLS_STREAM_URL'` with the actual URL of your HLS stream.
5. Customize player options (optional): You can customize various player options according to your needs. For example, you can change the controls, autoplay behavior, or add additional plugins. Refer to the Video.js documentation for more options.
6. Style the player (optional): Use CSS to style the player to match your desired look and feel. The Video.js CSS file you included in Step 1 provides some default styling, but you can override it or add your own styles.
That's it! With these steps, you should have Video.js configured to play HLS streams. Make sure to test your implementation with a supported HLS stream URL.
Videojs player is open source JavaScript library for handling HLS video streaming ( on dimand and live video streaming ) , it's very easy to configure on your code on any technology need only videojs library and initialise function for player initialisation see example for HTLM
************************************start************************************
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body>
<div class="satel">
<video id="example-video" width="auto" height="500" class="video-js vjs-default-skin" style="margin: 0 auto;" controls>
<source src="https://example.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
type="application/x-mpegURL">
</video>
<script>
var player = videojs('example-video');
player.play();
</script>
</div>
</body>
</html>
************************************end************************************
If you like this blog so pls share and Write Comments about Your experience,
Thank You.
Comments
Post a Comment