web端拉取m3u8直播流,进行播放

最近在做直播功能,客户端用ffmpeg rtmp的方式推flv封装流到cdn,然后web端也用rtmp播放flv封装流,但是不能成功,这是浏览器不再支持flash的缘故。

故改成web端拉取m3u8直播流,说明下,客户端rtmp推流到cdn后,cdn有转封装,支持m3u8直播流拉取。

由于公司的拉流url不好直接给出,找到了央视的m3u8直播拉流地址:
http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8

对应的index.html如下:

DOCTYPE html>
<html>
 
<head>
    <meta charset=utf-8 />
    <title>fz-livetitle>
    <link href="./js/video-js.min.css" rel="stylesheet">
    <script src="./js/video.min.js">script>
    <script src="./js/liveplayer-element.min.js">script>
	<script src="./js/liveplayer-lib.min.js">script>
	
head>
 
<body>
    <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1920" height="1080" data-setup='{}'>
    video>
    <script>
		var liveUrl  =  'http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8';
        var player = videojs('my_video_1');
 
        player.ready(function() {
            this.src({
                src: liveUrl,
                type: 'application/x-mpegURL',
            });
        });
 
    script>
body>
 
html>

本人采取本机部署nginx服务器的方式,将此index.html替换nginx默认的html,如下所示:
web端拉取m3u8直播流,进行播放_第1张图片
其中index_bak.html是原有的nginx自带的。

js的目录内容如下:
web端拉取m3u8直播流,进行播放_第2张图片
启动nginx,chrome浏览器上输入localhost,视频画面如下:
web端拉取m3u8直播流,进行播放_第3张图片
现在是2022年1月13号,19:27分,对应的是新闻联播的国际新闻部分。

本人将js和html文件都上传了,免费的,目前在审核中

为此本人上传了百度网盘,如下:
链接:https://pan.baidu.com/s/1sQOzDs7VLhotS_hDB5xyhA
提取码:1234

你可能感兴趣的:(前端,nginx,网页直播拉流)