Video plug-in to play m3u8 format video (save original)
Here, native javascript is used to implement m3u8 format video playback.
Used include video.min.js library and HLS plugin.
1-Basic use
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video.js HLS Example</title>
<!-- add dependency -->
<link href="https://vjs.zencdn.net/7.7.6/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.7.6/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/videojs-contrib-hls.min.js"></script>
</head>
<body>
<!-- create viedo element -->
<video
id="my-video"
class="video-js"
width="1280"
height="720"
data-setup='{
"autoplay": true, "controls": false, "preload": "auto", "fluid": false, "controlBar": false}'
>
<source src="#" type="application/x-mpegURL">
</video>
<script>
var url = 'https://36689.live-vod.cdn.aodianyun.com/m3u8/0x0/aqes_36689.aqes0.1628058327/aqes_36689.aqes0.1628058327.m3u8';
// 页面加载完毕后执行播放逻辑，在之前可以异步获取视频播放url
window.onload = function() {
var player = videojs('my-video');
player.src({
src: url, type: 'application/x-mpegURL'})
player.play();
}
</script>
</body>
</html>
In the above code, the video.min.js library and the corresponding player style video-js.css are first introduced, and the videojs-contrib-hls.min.js library is also introduced (the order of introduction is prioritized before page loading) .
After that, create a video tag and specify the src attribute of the source as a placeholder address. If you do not give a placeholder address, the browser will report an error when dynamically assigning src later; here some configurations about video playback are placed in data- In setup (json format), the specific meaning is as follows:
- autoplay: whether to play automatically
- controls: Whether to display the progress bar operation bar
- preload: set to auto, which means automatically loading the video
- fluid: Whether to adapt to the size of the parent container
- controlBar: Set to false, indicating that the control column is not displayed
Notice:
The autoplay attribute needs to take effect after the user has interacted with the page to protect user experience and privacy. Therefore, if you need to implement fully automatic playback, consider using other solutions, such as triggering playback when the user clicks on the page.
Finally, use JavaScript code to create an instance of videojs, dynamically give the video playback address, and then call the play() method to start playing the video.
It should be noted that the HLS plug-in needs to work properly in a browser that supports MSE (Media Source Extensions) and HLS. If the browser does not support these functions, you can consider using other plug-ins or libraries to play the m3u8 video format.
2- How to switch the playback address
Every time you switch to play the next video, you must destroy the previous playback instance, that is, use the player.dispose() method.
player.dispose() This method destroys the videojs instance and its related DOM elements and event listeners, thereby restoring the video player to its initial state.
Judging from the actual situation, there are generally two situations where the playback instance needs to be destroyed. One is when the video needs to be switched (the operation is actively performed by the user); the other is when the video playback is completed.
In the first case, you only need to monitor when the user performs the corresponding button operation, which is relatively simple.
In the second case, after the video is played, you can add a listener to the ended event on the player playback instance, and then perform the destruction of the playback in this event.
// ...
<script>
var url = 'https://36689.live-vod.cdn.aodianyun.com/m3u8/0x0/aqes_36689.aqes0.1628058327/aqes_36689.aqes0.1628058327.m3u8';
// 页面加载完毕后执行播放逻辑，在之前可以异步获取视频播放url
window.onload = function() {
var player = videojs('my-video');
player.src({
src: url, type: 'application/x-mpegURL'})
player.play();
// 监听播放完成事件，执行播放实例销毁
player.on('ended', function() {
player.dispose();
});
}
</script>
// ...
3-How to control basic video operations through player instances
// ...
<script>
var player = videojs('my-video');
player.play(); // 自动播放
player.currentTime(10); // 快进到10秒
player.currentTime(player.currentTime() - 5); // 快退5秒
player.pause(); // 暂停播放
</script>
// ...
In the above code, the playback fast forward and rewind are realized by setting the currentTime method under the playback instance. This method accepts a parameter, indicating the set time point. If no parameter is passed, it means obtaining the time point of the current video playback.
When the currentTime method does not accept parameters, it can implement the rewind method.
The pause method can be used to pause the video.
4- How to realize the function of fully automatic playback
In the HTML5 standard, the behavior of autoplay is prohibited. If the player is set to autoplay, it will be prohibited by the browser. This is for the sake of user experience and reducing bandwidth pressure.
But in some cases, we still want to implement automatic playback, so we can consider the following implementation method.
1. User operation triggers automatic playback:
You can monitor the page loading completion event and trigger the click event of the play button after the page loading is completed, thus triggering automatic playback. The sample code is as follows:
var player = videojs('my-video');
player.ready(function() {
var promise = player.play();
if (promise !== undefined) {
promise.then(function() {
// 自动播放成功
}).catch(function(error) {
// 自动播放失败，需要用户手动触发播放
player.on('play', function() {
player.play();
});
});
}
});
2. Muted autoplay
Videos can be muted to circumvent browser autoplay restrictions. The sample code is as follows:
var player = videojs('my-video');
player.muted(true);
player.play();
It should be noted that silent autoplay may be perceived by users and affect the user experience.
3. Switching between automatic playback and manual playback (not applicable)
You can determine whether automatic playback is needed by monitoring the user's operations. For example, unmute and automatically play after the user clicks the play button for the first time. The sample code is as follows:
var player = videojs('my-video');
player.on('play', function() {
player.muted(false);
player.off('play'); //取消对播放的监听
});
player.play();
4. Directly modify browser sound settings
In the latest Google Chrome, go to Settings > Privacy and Security > Site Settings > Sound (more settings inside)
Then add the URL that needs to be played automatically in Allow to play the sound.
