在线教育视频播放器技术
播放器
一、 技术选型
视频编码后要使用播放器对其进行解码、播放视频内容。在web应用中常用的播放器有flash播放器、H5播放器或 浏览器插件播放器，其中以flash和H5播放器最常见。
flash播放器：缺点是需要在客户机安装Adobe Flash Player播放器，优点是flash播放器已经很成熟了，并且浏览 器对flash支持也很好。
H5播放器：基于h5自带video标签进行构建，优点是大部分浏览器支持H5，不用再安装第三方的flash播放器，并 且随着前端技术的发展，h5技术会越来越成熟。
本项目采用H5播放器，使用Video.js开源播放器。
Video.js是一款基于HTML5世界的网络视频播放器。它支持HTML5和Flash视频，它支持在台式机和移动设备上播 放视频。这个项目于2010年中开始，目前已在40万网站使用。
官方地址：http://videojs.com/
二、 下载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目录中
三、 搭建媒体服务器
正常使用video.js播放视频是通过一个网页，用户通过浏览器打开网页去播放视频，网页和视频都从web服务器请 求，通常视频的url地址使用单独的域名。
3.1 Nginx媒体服务器
1、用户打开www.lxw.com上边的video.html网页在此网页中引入视频链接，视频地址指向video.lxw.com 2、video.lxw.com进行负载均衡处理，将视频请求转发到媒体服务器
根据上边的流程，我们在媒体服务器上安装Nginx，并配置如下
#腾讯课堂网媒体服务
server {
listen 90;
server_name localhost;
location /video/ {
alias H:/video/hls/;
}
}
3.2 媒体服务器代理
媒体服务器不止一台，通过代理实现负载均衡功能，使用Nginx作为媒体服务器的代理，此代理服务器作 为video.lxw.com域名服务器。
配置video.lxw.com虚拟主机：
注意：开发中代理服务器和媒体服务器在同一台服务器，使用同一个Nginx
#腾讯课堂网媒体服务代理
map $http_origin $origin_list{
default http://www.lxw.com;
"~http://www.lxw.com" http://www.lxw.com;
"~http://ucenter.lxw.com" http://ucenter.lxw.com;
}
#腾讯课堂网媒体服务代理
server {
listen 80;
server_name video.lxw.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
-
编写测试页面video.html
<!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.lxw.com/video/hls/
mybatis.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.lxw.com/video/hls/
mybatis.m3u8', type: 'application/x‐mpegURL',
withCredentials: true
});
player.play();
}
</script>
</body>
</html> -
测试 配置hosts文件，本教程开发环境使用Window10，修改C:\Windows\System32\drivers\etc\hosts文件
127.0.0.1 video.lxw.com
点击"switch"测试切换视频功能
总结
- 点赞
- 收藏
- 关注作者
评论（0）