html5 播放http-flv视频流和hls视频流demo

最新推荐文章于 2024-05-20 16:28:19 发布

_蓝染_

最新推荐文章于 2024-05-20 16:28:19 发布

阅读量7k

点赞数 3

分类专栏：视频 js 文章标签： http-flv hls html5 video

本文链接：https://blog.csdn.net/c1149884598/article/details/113888975

版权

js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

视频

2 篇文章 0 订阅

订阅专栏

HLS视频流

播放hls视频流需要依赖hls.min.js,网上示例很多，在这里贴一下源码。

<!DOCTYPE html>
<html>
    <head>
        <title>播放器</title>
    </head>
    <body>
        
		<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
		<video id="video"></video>
		<script>
			if(Hls.isSupported()) {
				var video = document.getElementById('video');
				var hls = new Hls();
				hls.loadSource('http://127.0.0.1:7002/live/movie.m3u8');
				hls.attachMedia(video);
				hls.on(Hls.Events.MANIFEST_PARSED,function() {
				video.play();
				});
			}
		</script>
    </body>
</html>

http-flv视频流

需要依赖flv.js，为bilibili开源的代码，可以参考链接http://bilibili.github.io/flv.js/demo/
网上参考代码比较多，但是要注意flvjs创建createPlayer的选项设置，有type，islive，hasAudio，hasVideo，url等。在测试时，参考网上代码大多未对其中的选项进行设置，而测试的地址没有音频属性，所以一直无法播放，所以在测试时，要根据自己的实际情况进行相关选项的设定。

 if (flvjs.isSupported()) {
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                isLive: true,
				hasAudio:false,
				hasVideo:true,
                url: 'http://127.0.0.1:7001/live/movie.flv',//<==自行修改

            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load(); //加载
            flv_start();
        }

引用的flv.js可以使用bilibili现用的

 <script src="http://bilibili.github.io/flv.js/dist/flv.js"></script>

_蓝染_

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
html5 播放http-flv视频流和hls视频流demo

HLS视频流播放hls视频流需要依赖hls.min.js,网上示例很多，在这里贴一下源码。<!DOCTYPE html><html> <head> <title>播放器</title> </head> <body> <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js">&l
复制链接

扫一扫