WEB HLS播放器及跨域配置

最新推荐文章于 2024-06-11 09:55:06 发布

Mark Studio

最新推荐文章于 2024-06-11 09:55:06 发布

阅读量5.5k

点赞数 5

分类专栏：搭建流媒体服务器 WEB 开发开发小知识文章标签： WEB HLS播放器 m3u8播放器

本文链接：https://blog.csdn.net/wanghaisheng/article/details/114903427

版权

搭建流媒体服务器同时被 3 个专栏收录

15 篇文章 20 订阅

订阅专栏

开发小知识

6 篇文章 1 订阅

订阅专栏

WEB 开发

3 篇文章 1 订阅

订阅专栏

flash被禁用后，网页端直播的方式就很少了，最通用和方便的方式就是HLS，但这个M3U8的流又不能被众多PC浏览直接支持，只小众的CHROM能用。所以就有了这个HlS的js播放器。

原理其实说起来也很简单，就是用js把m3u8文件取下来，然后解析后再把一个个的TS文件下载下来，播放还是用html5的VIDEO来播放。说来很简单，但我不会JS所以写不了这东西。还是直接使用现成的吧。在此记录一下。

我找了两种，一种是阿里的，一个是VIDEOJS PLAYER

资源下载：https://download.csdn.net/download/wanghaisheng/15850720

把资源解压后直接把文件夹放到网站目录下。然后进行 HTML文件访问就可以了。

阿里的播放器里面的JS还是链接的网络资源。videoJS播放器我已经把JS资源都下载到了本地，这样就可以在封闭网络中使用。

下面我们来看一下videoJS代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>videoJs</title>

    <link href="/vjs/video-js.css" rel="stylesheet" />

    <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
    <script src="/vjs/videojs-ie8.min.js"></script>
</head>

<body>
    <section id="videoPlayer">
        <video id="my-video" width="600" height="300" class="video-js vjs-default-skin vjs-big-play-centered" poster="">
            <source
                src="http://192.168.20.142:89/live1/index.m3u8"
                type="application/x-mpegURL" id="target">

        </video>
    </section>
    <script src="/vjs/video.js"></script>
    <script type="text/javascript">
        var player = videojs('my-video', { "poster": "", "controls": "true" }, function () {
            this.on('play', function () {
                console.log('正在播放');
            });
            //暂停--播放完毕后也会暂停
            this.on('pause', function () {
                console.log("暂停中")
            });
            // 结束
            this.on('ended', function () {
                console.log('结束');
            })

        });
    </script>
</body>

</html>

代码一目了然，使用很方便，只要把M3U8地址一换就可以了。还有三个回调函数在里面写一些状态处理的东西，很好用。

如果你这样明知道有流还是播放不了，可能就是跨域问题，当前常的如NGINX服务器中，可以在SERVER 配置中加入这三行就可以了，如下

server {
listen 89;
server_name localhost;

#charset koi8-r;

#access_log logs/host.access.log main;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

有了这三行就没有问题了，但一定要注意重启服务器。

Mark Studio

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
6
评论
WEB HLS播放器及跨域配置

flash被禁用后，网页端直播的方式就很少了，最通用和方便的方式就是HLS，但这个M3U8的流又不能被众多PC浏览直接支持，只小众的CHROM能用。所以就有了这个HlS的js播放器。原理其实说起来也很简单，就是用js把m3u8文件取下来，然后解析后再把一个个的TS文件下载下来，播放还是用html5的VIDEO来播放。说来很简单，但我不会JS所以写不了这东西。还是直接使用现成的吧。在此记录一下。我找了两种，一种是阿里的，一个是VIDEOJS PLAYER资源下载：https://downl...
复制链接

扫一扫