video.js播放视频

video.js播放视频1、常用播放器2、Video.js播放m3u8格式视频3、总结1、常用播放器视频编码后要使用播放器对其进行解码、播放视频内容。在web应用中常用的播放器有flash播放器、H5播放器或浏览器插件播放器，其中以flash和H5播放器最常见。flash播放器缺点是需要在客户机安装Adobe Flash Player播放器，优点是flash播放器已经很成熟了，并且浏览器对flas

我愿成为你头顶的云

6300人浏览 · 2021-01-12 20:25:06

我愿成为你头顶的云 · 2021-01-12 20:25:06 发布

video.js播放视频

1、常用播放器
2、Video.js播放m3u8格式视频
3、总结

1、常用播放器

视频编码后要使用播放器对其进行解码、播放视频内容。在web应用中常用的播放器有flash播放器、H5播放器或浏览器插件播放器，其中以flash和H5播放器最常见。

flash播放器

缺点是需要在客户机安装Adobe Flash Player播放器，优点是flash播放器已经很成熟了，并且浏览器对flash支持也很好。

H5播放器

基于h5自带video标签进行构建，优点是大部分浏览器支持H5，不用再安装第三方的flash播放器，并且随着前端技术的发展，h5技术会越来越成熟。通常会使用Video.js开源播放器。

2、Video.js播放m3u8格式视频

在这里插入图片描述
Video.js是一款基于HTML5世界的网络视频播放器。它支持HTML5和Flash视频，它支持在台式机和移动设备上播放视频。这个项目于2010年中开始，目前已在40万网站使用。

下面通过一个例子在页面中使用video.js来播放视频。

（1）下载video.js

可以去官网下载video.js，一般是需要下载video-js.css、video.js、videojs-contrib-hls.js这3个，如下：
在这里插入图片描述
我已经下载好了，放在plugins这个目录里了。

（2）搭建Nginx媒体服务器

正常使用video.js播放视频是通过一个网页，用户通过浏览器打开网页去播放视频，网页和视频都从web服务器请求，通常视频的url地址使用单独的域名。

以下通过nginx虚拟主机来配置：

	 # 媒体服务
	 upstream video_server{
	   server 127.0.0.1:95 weight=10;
	 }
	 
	 ## 模拟主页
	 server {
	    listen  80;
		server_name  www.ycz.com;
		location / {
		   alias F:/Users/Administrator/Desktop/video/;
		   index index.html;
		}
	 }
	 
	 ## 媒体服务代理
	 server {
	   listen  80;
	   server_name  video.play.com;
	   location /video {
	     proxy_pass http://video_server;
		 add_header Access-Control-Allow-Origin *;
		 add_header Access-Control-Allow-Credentials true;
		 add_header Access-Control-Allow-Methods GET;
	   }
	}
	 
	 ## 媒体服务
	 server {
	   listen  95;
	   server_name  localhost;
	   ## 视频目录
	   location /video/ {
	      alias E:/video/;
	   }
	 }

以上配置了2个域名，因为是在本机，所以需要修改HOST文件，如下：
在这里插入图片描述
这个文件在系统盘下的 /Windows/System32/Drivers/etc下，添加以下内容：

说明：当用户访问www.ycz.com时，实际上是访问F:/Users/Administrator/Desktop/video/这里，这个video目录假设是一个前端工程的目录：

很简单，就一个plugins目录，里面存放的是与video.js相关的文件，然后index.html假设是工程的主页：
在这里插入图片描述
也就是说，当在浏览器中输入www.ycz.com时，访问的是F:/Users/Administrator/Desktop/video/index.html页面，这是以下配置的说明：

现在我在浏览器中测试：

媒体服务代理说明

（这里一定要开启跨域，这很重要，就是上面圈出的地方。）这是一个媒体服务的代理，当用户输入的路径是video.play.com/video/**时，会转发到video_server这个服务，该服务即是媒体服务，如下：
在这里插入图片描述
这个是本机的95端口。媒体服务如下：

当用户的请求是video.play.com/video/*时，实际上访问的是E:/video/ *。

E:/video这个目录如下：
在这里插入图片描述
这实际上是一个专门用来存放视频文件的目录，等一下会播放hls里面的m3u8文件，如下：

这个视频已经转换成了m3u8文件，并且切好了ts片。

（3）播放页面

播放页面在这个目录下：
在这里插入图片描述
如图，就是video.html，这个页面内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>视频播放测试</title>
	<!--引入video-js.css-->
	<link rel="stylesheet" href="/plugins/video-js.css">
</head>
<body>
  <!--视频播放标签-->
  <video id="example-video" width="800" height="600" 
  class="video-js vjs-default-skin vjs-big-play-centered"
    controls poster="">
  	<source src="http://video.play.com/video/hls/无上神帝01.m3u8" 
  	type="application/x-mpegURL">
  </video>	
  <!--按钮-->
  <input type="button" onClick="switchvideo()" value="switch"/>
  <!--引入video.js文件-->
  <script src="/plugins/video.js"></script>
  <!--引入插件-->
  <script src="/plugins/videojs-contrib-hls.js"></script>
  <script>
  	 //获取player对象
  	 var player = videojs('example-video');
  	 function switchvideo(){
  	 	player.src({
  	 		src: "http://video.play.com/video/hls/无上神帝01.m3u8",
  	 		type: "application/x-mpegURL",
  	 		withCredentials: true
  	 	});	
  	 	player.play();
  	 }
  </script>
</body>
</html>

（4）测试视频播放

浏览器中输入： www.ycz.com/video.html。
在这里插入图片描述
点击这个播放按钮：

视频播放了，可以快进后退：

点击双竖线可以控制播放、暂停。喇叭图案是调节声音大小。右下角的小正方形是全屏播放。下面的switch按钮是切换视频。

说明：用户访问http://www.ycz.com/video.html时，实际上是访问F:/Users/Administrator/Desktop/video/video.html这个播放页面，然后这个播放页面中有一个url：
在这里插入图片描述
播放页面中会请求http://video.play.com/video/hls/无上神帝01.m3u8这个url，实际上会将请求转发到：E:/video/hls/无上神帝01.m3u8，也就是访问本机上的这个m3u8视频文件：

点击播放，即可实现m3u8视频文件的播放。