|
【郑州校区】学成在线-第13天-讲义-在线学习 HLS 三
3 播放器
3.1 技术选型
视频编码后要使用播放器对其进行解码、播放视频内容。在web应用中常用的播放器有flflash播放器、H5播放器或浏览器插件播放器，其中以flflash和H5播放器最常见。
flflash播放器：缺点是需要在客户机安装Adobe Flash Player播放器，优点是flflash播放器已经很成熟了，并且浏览器对flflash支持也很好。
H5播放器：基于h5自带video标签进行构建，优点是大部分浏览器支持H5，不用再安装第三方的flflash播放器，并且随着前端技术的发展，h5技术会越来越成熟。
本项目采用H5播放器，使用Video.js开源播放器。
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，并配置如下：
[AppleScript] 纯文本查看 复制代码 #学成网媒体服务
server {
listen 90;
server_name localhost;
#视频目录
location /video/ {
alias F:/develop/video/;
}
}
3.3.2 媒体服务器代理
媒体服务器不止一台，通过代理实现负载均衡功能，使用Nginx作为媒体服务器的代理，此代理服务器作为video.xuecheng.com域名服务器。
配置video.xuecheng.com虚拟主机：
注意：开发中代理服务器和媒体服务器在同一台服务器，使用同一个Nginx。
[AppleScript] 纯文本查看 复制代码 #学成网媒体服务代理
map $http_origin $origin_list{
default [url]http://www.xuecheng.com[/url];
"~[url]http://www.xuecheng.com[/url]" [url]http://www.xuecheng.com[/url];
"~[url]http://ucenter.xuecheng.com[/url]" [url]http://ucenter.xuecheng.com[/url];
}
#学成网媒体服务代理
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的配置如下：
[AppleScript] 纯文本查看 复制代码 #媒体服务
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。
[AppleScript] 纯文本查看 复制代码 <!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" 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:\Windows\System32\drivers\etc\hosts文件
127.0.0.1 video.xuecheng.com
| 
收藏
淘帖
踩
