3 播放器
3.1 技术选型
视频编码后要使用播放器对其进行解码、播放视频内容。在web应用中常用的播放器有flash播放器、H5播放器或 浏览器插件播放器，其中以flash和H5播放器最常见。
flash播放器： 缺点是需要在客户机安装Adobe Flash Player播放器，优点是flash播放器已经很成熟了，并且浏览器对flash支持也很好。
H5播放器：基于h5自带video标签进行构建，优点是大部分浏览器支持H5，不用再安装第三方的flash播放器，并且随着前端技术的发展，h5技术会越来越成熟。
Video.js是一款基于HTML5世界的网络视频播放器。它支持HTML5和Flash视频，它支持在台式机和移动设备上播放视频。这个项目于2010年中开始，目前已在40万网站使用。
官方地址：http://videojs.com/
3.2 下载video.js
Video.js： https://github.com/videojs/video.js
videojs-contrib-hls： https://github.com/videojs/videojs-contrib-hls#installation （videojs-contrib-hls是播放hls的一个插件）
使用文档：http://docs.videojs.com/tutorial-videojs_.html
本教程使用 video.js 6.7.3 版本，videojs-contrib-hls 5.14.1版本。
下载上边两个文件，为了测试需求将其放在门户的plugins目录中。
3.3 搭建媒体服务器
正常使用video.js播放视频是通过一个网页，用户通过浏览器打开网页去播放视频，网页和视频都从web服务器请 求，通常视频的url地址使用单独的域名。
3.3.1 Nginx媒体服务器
HLS协议基于Http协议，本项目使用Nginx作为视频服务器。下图是Nginx媒体服务器的配置流程图：
1、用户打开www.xuecheng.com上边的video.html网页 在此网页中引入视频链接，视频地址指向video.xuecheng.com
2、video.xuecheng.com进行负载均衡处理，将视频请求转发到媒体服务器 根据上边的流程，我们在媒体服务器上安装Nginx，并配置如下：
代码语言：javascript复制server {
listen 90;
server_name localhost;#
视频目录 location / video / {
alias F: /develop/video / ;
}
}3.3.2 媒体服务器代理
媒体服务器不止一台，通过代理实现负载均衡功能，使用Nginx作为媒体服务器的代理，此代理服务器作为video.xuecheng.com域名服务器。
配置video.xuecheng.com虚拟主机：
注意：开发中代理服务器和媒体服务器在同一台服务器，使用同一个Nginx。
代码语言：javascript复制map $http_origin $origin_list {
default http: //www.xuecheng.com;
"~http://www.xuecheng.com" http://www.xuecheng.com;
"~http://ucenter.xuecheng.com" http://ucenter.xuecheng.com;
}
server {
listen 80;
server_name video.xuecheng.com;
location / video {
proxy_pass http: //video_server_pool; add_header Access‐Control‐Allow‐Origin $origin_list;
#add_header Access‐Control‐Allow‐Origin *;
add_header Access‐Control‐Allow‐Credentials true;
add_header Access‐Control‐Allow‐Methods GET;
}
}cors跨域参数： Access-Control-Allow-Origin：允许跨域访问的外域地址
通常允许跨域访问的站点不是一个，所以这里用map定义了多个站点。
如果允许任何站点跨域访问则设置为*，通常这是不建议的。
Access-Control-Allow-Credentials： 允许客户端携带证书访问
Access-Control-Allow-Methods：允许客户端跨域访问的方法
video_server_pool的配置如下：
upstream video_server_pool {
server 127.0 .0 .1: 90 weight = 10;
}3.4 测试video.js
参考
- https://github.com/videojs/videojs-contrib-hls#installation
- http://jsbin.com/vokipos/8/edit?html,output
1、编写测试页面video.html。
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta http‐equiv="content‐type" content="text/html; charset=utf‐8"/>
<title>视频播放</title>
<link href="/plugins/videojs/video‐js.css" rel="stylesheet">
</head>
<body>
<video id=example‐video width=800 height=600 class="video‐js vjs‐default‐skin vjs‐big‐play‐ centered" controls
poster="http://127.0.0.1:90/video/add.jpg">
<source src="http://video.xuecheng.com/video/hls/lucene.m3u8" type="application/x‐mpegURL">
</video>
<input type="button" onClick="switchvideo()" value="switch"/>
<script src="/plugins/videojs/video.js"></script>
<script src="/plugins/videojs/videojs‐contrib‐hls.js"></script>
<script> var player = videojs('example‐video');
//player.play();
// 切换视频
function switchvideo() {
player.src({
src: 'http://video.xuecheng.com/video/hls/lucene.m3u8',
type: 'application/x‐mpegURL',
withCredentials: true
});
player.play();
} </script>
</body>
</html>2、测试 配置hosts文件，本教程开发环境使用Window10，修改C:WindowsSystem32driversetchosts文件
代码语言：javascript复制127.0.0.1 video.xuecheng.com效果：
点击"switch"测试切换视频功能。
