3 播放器

3.1 技术选型

视频编码后要使用播放器对其进行解码、播放视频内容。在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/

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;
}

nginx.conf源码如下：


#user  nobody;
worker_processes  1;#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;#pid        logs/nginx.pid;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;#log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '#                  '$status $body_bytes_sent "$http_referer" '#                  '"$http_user_agent" "$http_x_forwarded_for"';#access_log  logs/access.log  main;sendfile        on;#tcp_nopush     on;#keepalive_timeout  0;keepalive_timeout  65;#gzip  on;#cms页面预览upstream cms_server_pool{server 127.0.0.1:31001 weight=10;}#静态资源服务upstream static_server_pool{server 127.0.0.1:91 weight=10;}#前端动态门户upstream dynamic_portal_server_pool{server 127.0.0.1:10000 weight=10;}#后台搜索（公开api）upstream search_server_pool{server 127.0.0.1:40100 weight=10;}#媒体服务upstream video_server_pool{server 127.0.0.1:90 weight=10;}server {listen       80;server_name  localhost;location / {root   html;index  index.html index.htm;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}#门户的顶级域名，门户的主站server {listen       80;server_name  www.xuecheng.com;ssi on;ssi_silent_errors on;location / {alias   E:/java_www/xcEduUI05/;index  index.html index.htm;}location /static/img/ {alias   E:/java_www/xcEduUI05/img/;}location /static/css/ {alias   E:/java_www/xcEduUI05/css/;}location /static/js/ {alias   E:/java_www/xcEduUI05/js/;}location /static/plugins/ {alias   E:/java_www/xcEduUI05/plugins/;add_header Access-Control‐Allow‐Origin http://ucenter.xuecheng.com;#add_header Access‐Control‐Allow‐Credentials true;#add_header Access‐Control‐Allow‐Methods GET;}#页面预览location /cms/preview/ {proxy_pass http://cms_server_pool/cms/preview/;}location /static/company/ {proxy_pass http://static_server_pool;}location /static/teacher/ {proxy_pass http://static_server_pool;}location /static/stat/ {proxy_pass http://static_server_pool;}location /course/detail/ {proxy_pass http://static_server_pool;}#前端门户课程搜索location ^~ /course/search {proxy_pass http://dynamic_portal_server_pool;}#后端搜索服务location /openapi/search/ {proxy_pass http://search_server_pool/search/;}#分类信息location /static/category/ {proxy_pass http://static_server_pool;}#开发环境webpack定时加载此文件location ^~ /__webpack_hmr {proxy_pass http://dynamic_portal_server_pool/__webpack_hmr;}#开发环境nuxt访问_nuxtlocation ^~ /_nuxt/ {proxy_pass http://dynamic_portal_server_pool/_nuxt/;}}#学成网媒体服务server {listen 90;server_name localhost;#视频目录location /video/ {alias E:/java_www/video/;}}#学成网静态资源server {listen       91;server_name  localhost;#公司信息location /static/company/ {alias E:/java_www/xcEduUI05/static/company/;}#老师信息location /static/teacher/ {alias E:/java_www/xcEduUI05/static/teacher/;}#统计信息location /static/stat/ {alias E:/java_www/xcEduUI05/static/stat/;}location /course/detail/ {alias E:/java_www/xcEduUI05/course/detail/;}location /static/category/ {alias E:/java_www/xcEduUI05/static/category/;}}#学成网媒体服务代理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;}}
}

重启nginx，如果启动不了，则注释以下代码

  #add_header Access‐Control‐Allow‐Credentials true;#add_header Access‐Control‐Allow‐Methods GET;

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"><sourcesrc="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>

<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"><sourcesrc="http://video.xuecheng.com/video/hls/lucene.m3u8"type="application/x‐mpegURL">
</video>

nginx.conf

    #学成网媒体服务代理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;}}

    #媒体服务upstream video_server_pool{server 127.0.0.1:90 weight=10;}

    #学成网媒体服务server {listen 90;server_name localhost;#视频目录location /video/ {alias E:/java_www/video/;}}

所以访问http://video.xuecheng.com/video/hls/lucene.m3u8
video.xuecheng.com就找到 127.0.0.1:90，然后根据90端口找到E:/java_www/video/这个文件夹。所以访问http://video.xuecheng.com/video/就定位到E:/java_www/video/这个文件夹
2、测试
配置hosts文件，本教程开发环境使用Window10，修改C:\Windows\System32\drivers\etc\hosts文件

127.0.0.1 video.xuecheng.com

点击"switch"测试切换视频功能。
我的电脑测试这个不知道为何播放不了，资源明明存在，路径也能把资源进行下载下来

原来是跨域的问题
但是没解决

06-播放器-搭建媒体服务器测试videojs相关推荐

android百度播放器,终结媒体播放器百度推新Android浏览器
[PConline资讯]昨夜晚间,有消息称百度推出一款新的Android系统移动浏览器,该款移动浏览器最大的功能特色就是使得用户能够在没有安装媒体播放器的前提下播放视频,支持网页游戏,大幅度提高上网速 ...
仿迅雷播放器教程 -- 媒体播放三大底层架构简析 (3)
上一个教程中对比了数十种知名播放器,最终选定了VLC和MPlayer,那么这两种谁更胜一筹呢? 我们来看一看射手播放器作者的评价. 来源: <http://blog.splayer.org/i ...
集RTMP, HLS, FLV, WebSocket 于一身的网页直播/点播播放器EasyPlayer.js引用videojs无法自动播放问题解决
EasyPlayer几乎涵盖了开发者所需的全部平台,尤其是在web端的EasyPlayer.js时遇到的播放器接入的问题,比如:不懂前端的js代码.没有公网服务器放置这些js脚本和网页.微信对接入IP ...
Windows上通过VLC播放器搭建rtsp流媒体测试地址操作步骤
1. 从https://www.videolan.org/index.zh.html 下载最新的windows 64bit 3.0.6版本并安装: 2. 打开VLC media player,依次点击 ...
搭建rtmp直播流服务之4:videojs和ckPlayer开源播放器二次开发(播放rtmp、hls直播流及普通视频)...
前面几章讲解了使用 nginx-rtmp搭建直播流媒体服务器; ffmpeg推流到nginx-rtmp服务器; java通过命令行调用ffmpeg实现推流服务; 从数据源获取,到使用ffmpeg推流, ...
MediaPlayer( 媒体播放器)，TelephonyManager(电话管理类)，MediaRecorder(媒体录音机)
媒体播放器 MediaPlayer 媒体播放器类可用于控制回放的音频/视频文件和流. 方法: setDataSource(String path);// 设置数据源(文件路径或http / rtsp ...
一款全兼容的播放器 videojs
一款全兼容的播放器 videojs [官网]http://www.videojs.com/ videojs就提供了这样一套解决方案,他是一个兼容html5的视频播放工具,早期版本兼容所有浏览器,方法是 ...
便携式媒体播放器：电路、工作、布线及其应用
媒体播放器设备播放音频文件和数字视频.目前,有多种便携式媒体播放器可以简单地播放不同的数字音频.视频和图像文件.先进的媒体播放器支持游戏:录制视频并提供额外的存储空间.所以通常这个空间是存储卡槽的形式 ...
android网络音乐播放器
** 网络音乐播放器 ** 转载请指明博客网址作者:WangYouHu我的主页网址链接:https://www.jianshu.com/p/855659f266ae 著作权归作者所有,任何形式的转 ...

06-播放器-搭建媒体服务器测试videojs