侧边栏壁纸
博主头像
张种恩博主等级

一个能运维的 JPG 搬运工

  • 累计撰写 703 篇文章
  • 累计创建 60 个标签
  • 累计收到 24 条评论

视频点播解决方案HLS(3)之搭建媒体服务器测试

张种恩
2019-11-06 / 0 评论 / 0 点赞 / 410 阅读 / 0 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2020-02-25,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

技术选型

视频编码后要使用播放器对其进行解码、播放视频内容。在 web 应用中常用的播放器有 flash 播放器、H5 播放器或浏览器插件播放器,其中以 flash 和 H5 播放器最常见。

  • flash 播放器:缺点是需要在客户机安装 Adobe Flash Player 播放器,优点是 flash 播放器已经很成熟了,并且浏览器对 flash 支持也很好。
  • H5 播放器:基于 h5 自带 video 标签进行构建, 优点是大部分浏览器支持 H5,不用再安装第三方的 flash 播放器,并且随着前端技术的发展,h5 技术会越来越成熟。

这里我们采用 H5 播放器,使用 Video.js 开源播放器。
Video.js 是一款基于 HTML 5 世界的网络视频播放器。它支持 HTML 5 和 Flash 视频,它支持在台式机和移动设备上播放视频。这个项目于 2010 年中开始,目前已在 40 万网站使用。

官方地址:http://videojs.com/

下载Video.js

videojs-contrib-hls 是支持 hls 播放的一个插件。
使用文档:http://docs.videojs.com/tutorial-videojs.html

下载上述两个文件,新建如下 html 页面引入上述 js 文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>视频播放</title>
    <link href="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>
    <source
            src="http://www.123.com/video/lucene/lucene.m3u8"
            type="application/x-mpegURL">
</video>
<input type="button" onClick="switchvideo()" value="switch"/>

<script src="videojs/video.js"></script>
<script src="videojs/videojs-contrib-hls.js"></script>
<script>
    var player = videojs('example-video');
    //player.play();

    function switchvideo(){
        player.src({
            src: 'http://www.123.com/video/lucene/lucene.m3u8',
            type: 'application/x-mpegURL',
            withCredentials: true
        });
        player.play();
    }
</script>

</body>
</html>

配置 Nginx 映射视频地址以及允许跨域:

server {
    listen       80;
    server_name  www.123.com;

    location /video {
        alias  /www/video;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods GET;
        add_header Access-Control-Allow-Credentials true;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

我的视频存放目录如下:

image.png

刷新浏览页面即可播放:

image.png

该静态工程下载:https://pan.baidu.com/s/1SBEmNt_mx-csPco6C-WQDQ

0

评论区