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"></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>

html5 播放http-flv视频流和hls视频流demo相关推荐

EasyPlayer播放H.265的HLS视频流出现加载异常的问题分析及解决方法
EasyPlayer是可支持H.264/H.265视频播放的流媒体播放器,性能稳定.播放流畅,可支持的视频流格式有RTSP.RTMP.HLS.FLV.WebRTC等.为了满足用户的多样化需求,我们也基 ...
html5播放rtsp h264视频流
最近在研究html5实时播放rtsp流的问题,目前来说h5原生不支持这种格式,网上查了很多教程,大概有以下几种思路. rtsp转rtmp rtmp需要falsh的支持,但是在chrome已经默认禁用. ...
EasyPlayer播放H.265的HLS视频流，ts加载频繁导致浏览器卡顿是什么原因？
EasyPlayer是可支持H.264/H.265视频播放的流媒体播放器,性能稳定.播放流畅,可支持的视频流格式有RTSP.RTMP.HLS.FLV.WebRTC等,具备较高的可用性.同时还支持大码率 ...
uniapp 使用 mui-player 插件播放 m3u8/flv 视频流
背景:uniapp 开发的h5项目,需要播放m3u8/flv后缀的视频,网上有很多视频插件,但是样式和效果不尽如人意,博主最后选择mui-player插件,定制化稍微强一点以及有官方文档可以阅读,官网 ...
Chrome浏览器通过EasyPlayer播放多路flv视频流后浏览器崩溃是什么原因？
EasyPlayer播放器系列项目是TSINGSEE青犀视频开发的极具开放性的播放器项目,用户可以根据自己的需求调用接口或者进行开发,实用性强,稳定性也非常优越,很多用户调用EasyPlayer播放器 ...
西瓜播放器 vue+xgplayer播放mp4/hls视频流。
npm安装: npm install xgplayer 线上引用地址: <script src="//cdn.jsdelivr.net/npm/xgplayer@2.9.6/brows ...
hls视频流_HLS视频流：它是什么，以及何时使用它
hls视频流 In this short article I will focus on HLS, the most extended adaptive bitrate protocol for vi ...
开源ckplayer 网页播放器，跨平台 html5 mobile ，flv f4v mp4 rtmp协议
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 开源ck ...
直播源码背后的原理是？初识视频流协议 HLS 和 RTMP
背景万物皆协议,互联网构建在一系列协议之上,直播源码也一样.一般直播源码开发时主要采用的视频流协议有两种,一种 HLS 和,一种是 RTMP. HTTP Live Streaming (HLS) H ...

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

HLS视频流

http-flv视频流

html5 播放http-flv视频流和hls视频流demo相关推荐

最新文章

热门文章