快速学习-视频播放器解决方案

程序员文章站 2022-07-05 22:39:46

...

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，并配置如下：

server {
	listen 90;
	server_name localhost;#
	视频目录 location / video / {
		alias F: /develop/video / ;
	}
}

3.3.2 媒体服务器代理

媒体服务器不止一台，通过代理实现负载均衡功能，使用Nginx作为媒体服务器的代理，此代理服务器作为video.xuecheng.com域名服务器。

配置video.xuecheng.com虚拟主机：

注意：开发中代理服务器和媒体服务器在同一台服务器，使用同一个Nginx。

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。

<!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>