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

最新推荐文章于 2024-07-23 03:12:47 发布

feng_fly_28

最新推荐文章于 2024-07-23 03:12:47 发布

阅读量2.2k

点赞数

分类专栏： day13 在线学习 HLS

本文链接：https://blog.csdn.net/minihuabei/article/details/118154043

版权

day13 在线学习 HLS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了如何在web应用中选择H5 Video.js播放器，详细步骤包括下载和配置Video.js及videojs-contrib-hls，搭建Nginx媒体服务器并处理跨域问题。通过实例演示了在video.html中使用Video.js播放HLS视频和解决跨域限制的过程。

摘要由CSDN通过智能技术生成

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访问_nuxt
        location ^~ /_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">
  <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>

在这里插入图片描述

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

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"测试切换视频功能。
我的电脑测试这个不知道为何播放不了，资源明明存在，路径也能把资源进行下载下来

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

feng_fly_28

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
06-播放器-搭建媒体服务器测试videojs

3 播放器3.1 技术选型视频编码后要使用播放器对其进行解码、播放视频内容。在web应用中常用的播放器有flash播放器、H5播放器或浏览器插件播放器，其中以flash和H5播放器最常见。flash播放器：缺点是需要在客户机安装Adobe Flash Player播放器，优点是flash播放器已经很成熟了，并且浏览器对flash支持也很好。H5播放器：基于h5自带video标签进行构建，优点是大部分浏览器支持H5，不用再安装第三方的flash播放器，并且随着前端技术的发展，h5技术会越来越成熟
复制链接

扫一扫

专栏目录