Video.js插件切换视频源并操作m3u8格式视频

客官°小女子只卖身不卖艺 2022-05-09 09:44 912阅读 0赞

**目录**

第一章 videojs的配置与简介

第二章 更改视频源代码与实例

第三章 api的部分应用实例

第四章 视频api补充介绍

添加事件

事件绑定

--------------------

前言：老师让我修改一个需要播放器的界面，之前的播放器有挺多功能需要修改，于是就从网上找了新的播放器插件，也就是Video.js，在网上找了挺久没什么靠谱的资料，于是记录一下。

# 第一章 videojs的配置与简介 #

关于videojs我是在[http://www.jq22.com/jquery-info404][http_www.jq22.com_jquery-info404]这个网站下载的6.2.8版本，下载完了之后再解压是这样的，

![70][]

我们需要其中两个文件，一个是video-js.css文件，一个是video.min.js文件，我们打开index网页应该也能发现，但是仅凭这两个我们还不能播放m3u8文件，根据网上的资料，我们还需要再引入一个文件videojs-contrib-hls.js，我从[https://github.com/videojs/videojs-contrib-hls/releases][https_github.com_videojs_videojs-contrib-hls_releases]上找到了这个文件并下载。具体如下图。

![70 1][]

由此我们需要的三个文件就下载齐了。

另：英文api：[https://videojs.com/][https_videojs.com]

[https://github.com/videojs/videojs-contrib-hls][https_github.com_videojs_videojs-contrib-hls]

# 第二章 更改视频源代码与实例 #

videojs更改视频源很简单，利用如下代码即可。

myPlayer.src({src: "xinlingjitang.m3u8", type: "application/x-mpegURL"});

其中src是视频的地址，我这里视频和网页放在一个地址下，所以直接填的名字。

type的话是视频类型，m3u8的话填上面的格式就行了。

切换视频源实例：

<html>
    <head>
    <meta charset="utf-8">
    <title>Video.js 6.2.8</title>
    	<link href="css/video-js.css" rel="stylesheet">	
    	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
    	<style>
    		.m{ width: 740px; height: 400px; margin-left: auto; margin-right: auto; margin-top: 100px; }
    	</style>
    	
    </head>
    
    <body>
    	<div class="m">
    		<video id="my-video" class="video-js" controls preload="auto" width="740" height="400"
    		  poster="m.png" data-setup="{}">
    		</video>
    	</div>
    </body>
    <script src="js/video.min.js"></script>
    <script src="js/videojs-contrib-hls.js"></script>
    <script type="text/javascript">
    			var videoObj = videojs('my-video');
    			var option={};
    			/*option只是一个参数,function onPlayerReady就是播放器初始化完成时会执行的回调函数*/
    			var myPlayer = videojs('my-video',option,function onPlayerReady(){
    				var myPlayer = this;
    				myPlayer.src({src: "xinlingjitang.m3u8", type: "application/x-mpegURL"});
    				this.play();
    			});
    			
    </script>
    </html>

# 第三章 api的部分应用实例 #

注意必须用videojs获取的实例才能调用方法，用jq获取的对象不行。

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Video.js 6.2.8</title>
    	<link href="css/video-js.css" rel="stylesheet">	
    	<style>
    		.m{ width: 740px; height: 400px; margin-left: auto; margin-right: auto; margin-top: 100px; }
    	</style>
    	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
    </head>
    
    <body>
    	<div class="m">
    		<video id="my-video" class="video-js" controls preload="auto" width="740" height="400"
    		  poster="m.png" data-setup="{}">
    
    			<p class="vjs-no-js">
    			  To view this video please enable JavaScript, and consider upgrading to a web browser that
    			  <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    			</p>
    		 </video>
    		 <input type="button" value="跳转进度" onclick="tiaozhuan1()" />
    		 <input type="button" value="获取进度" onclick="huoqu1()" />
    		 <input type="button" value="切换视频" onclick="qiehuan1()" />
    		 <input type="button" value="获取时间" onclick="huoqushijian1()" />
    	</div>
    </body>
    <script src="js/video.min.js"></script>
    <script src="js/videojs-contrib-hls.js"></script>
    <script type="text/javascript">
    			var videoObj = videojs('my-video');
    			var option={};
    			var myPlayer = videojs('my-video',option,function onPlayerReady(){
    				var myPlayer = this;
    				myPlayer.src({src: "xinlingjitang.m3u8", type: "application/x-mpegURL"});
    				videojs.log("播放器已经准备好了!");
    				this.play();
    			});
    			/*让视频跳转到一个进度,单位是秒*/
    			function tiaozhuan1(){
    				videoObj.currentTime(120);	
    			}
    			/*currentTime是获取当前视频的播放时间,我这里让它转成了xx:xx:xx的格式*/
    			function huoqu1(){
    				var videoTime = videoObj.currentTime();
    				//获取视频有几个小时
    	            var h = Math.floor(videoTime / 3600);
    	            //获取视频有多少分钟
    	            var m = Math.floor(videoTime % 3600 / 60);
    	            //获取视频有多少秒
    	            var s = Math.floor(videoTime % 60);
    	            //将视频格式化为xx:xx:xx,比如1个小时12分钟11秒的视频就是01:12:11
    	            console.log((h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s));
    				console.log(videoTime);
    			}
    			/*这里我切换了一个新的视频源*/
    			function qiehuan1(){
    				videoObj.src({src: "index.m3u8", type: "application/x-mpegURL"});
    			}
    			/*这样可以获取视频的总长度,单位是秒*/
    			function huoqushijian1(){
    				var howLongIsThis = videoObj.duration();
    				console.log(howLongIsThis);
    				
    			}
    			/*这样是再加载视频时会执行的函数,每次切换视频源都会调用此函数*/
    			videoObj.on("loadedmetadata",function(){
    				console.log("正在读取配置信息")
    			});
    			
    </script>
    </html>

实现效果：

![70 2][]

# 第四章 视频api补充介绍 #

这里的api是直接从[https://www.cnblogs.com/tinywan/p/6692098.html][https_www.cnblogs.com_tinywan_p_6692098.html]博客里复制的。

播放：

myPlayer.play();

暂停：

myPlayer.pause();

获取播放进度：

var whereYouAt = myPlayer.currentTime();

设置播放进度：

myPlayer.currentTime(120);

视频持续时间，加载完成视频才可以知道视频时长，且在flash情况下无效

var howLongIsThis = myPlayer.duration();

缓冲，就是返回下载了多少

var whatHasBeenBuffered = myPlayer.buffered();

百分比的缓冲

var howMuchIsDownloaded = myPlayer.bufferedPercent();

声音大小（0-1之间）

var howLoudIsIt = myPlayer.volume();

设置声音大小

myPlayer.volume(0.5);

取得视频的宽度

var howWideIsIt = myPlayer.width();

设置宽度：

myPlayer.width(640);

获取高度

var howTallIsIt = myPlayer.height();

设置高度：

myPlayer.height(480);

一步到位的设置大小：

myPlayer.size(640,480);

全屏

myPlayer.enterFullScreen();

离开全屏

myPlayer.enterFullScreen();

## 添加事件 ##

durationchange
    ended //播放结束
    firstplay
    fullscreenchange
    loadedalldata
    loadeddata
    loadedmetadata
    loadstart
    pause //暂停
    play  //播放
    progress
    seeked
    seeking
    timeupdate
    volumechange
    waiting
    resize inherited
    
    var myFunc = function(){
    // Do something when the event is fired
    };

## 事件绑定 ##

myPlayer.on("ended", function(){
        console.log("end", this.currentTime());
    });
    myPlayer.on("pause", function(){
        console.log("pause")
    });

删除事件

myPlayer.removeEvent(“eventName”, myFunc);

[http_www.jq22.com_jquery-info404]: http://www.jq22.com/jquery-info404
[70]: /images/20220509/d44903ba87c84a829db5d5d77f248e8f.png
[https_github.com_videojs_videojs-contrib-hls_releases]: https://github.com/videojs/videojs-contrib-hls/releases
[70 1]: /images/20220509/b951c2e10c934da9acfcc794f3e01808.png
[https_videojs.com]: https://videojs.com/
[https_github.com_videojs_videojs-contrib-hls]: https://github.com/videojs/videojs-contrib-hls
[70 2]: /images/20220509/ac1b27df2554427c8fc6ab31c04dbee7.png
[https_www.cnblogs.com_tinywan_p_6692098.html]: https://www.cnblogs.com/tinywan/p/6692098.html