黑马程序员技术交流社区

标题: 【郑州校区】学成在线-第13天-讲义-在线学习 HLS 三 [打印本页]

作者: 我是楠楠 时间: 2019-12-31 15:07
标题: 【郑州校区】学成在线-第13天-讲义-在线学习 HLS 三

【郑州校区】学成在线-第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 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的配置如下：

[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

效果：

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2