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

最近在做直播功能，客户端用ffmpeg rtmp的方式推flv封装流到cdn，然后web端也用rtmp播放flv封装流，但是不能成功，这是浏览器不再支持flash的缘故。故改成web端拉取m3u8直播流，说明下，客户端rtmp推流到cdn后，cdn有转封装，支持m3u8直播流拉取。由于公司的拉流url不好直接给出，找到了央视的m3u8直播拉流地址：http://cctvalih5ca.v.myal

tusong86

14480人浏览 · 2022-01-13 19:32:49

tusong86 · 2022-01-13 19:32:49 发布

最近在做直播功能，客户端用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-live</title>
    <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>