H5播放B站源的flv视频

前端代码

引入js

<script src="js/flv.min.js"></script>

注意代码

<video id="video" controls="controls" width="1080"></video><br><input type="text" id="text"></input><button id="btn1">播放BvId</button><button id="btn2">播放直播源</button><script>let video = document.getElementById('video');let text = document.getElementById("text");function play(url){let flvPlayer = flvjs.createPlayer({//设置 资源type: 'flv',url: url});flvPlayer.attachMediaElement(video);//附加到video元素flvPlayer.load();//加载flvPlayer.play();}document.getElementById("btn1").onclick = function () {play(`http://127.0.0.1:8080/stream/video/${text.value}`);};document.getElementById("btn2").onclick = function () {play(text.value);};</script>

效果

播放bvId视频

播放B站直播流

先通过roomId获取直播流，roomId就在直播页面地址里

设置直播流并播放

总体来说是非常简单的，flv.js应该就是B站开发的，可以在githut下载，为了防止有些人太懒，我把测试项目上传到码云，可以直接使用我的项目测试，或里面的js文件

码云地址：https://gitee.com/shaokang123/h5-flv/tree/master/

bvId播放服务，以及roomId转换服务是我另一个项目
CSDN地址：https://blog.csdn.net/weixin_44598449/article/details/117195834?spm=1001.2014.3001.5501

H5播放B站源的flv视频相关推荐

SkeyeWebPlayer.js H5播放器是怎么样炼成的
SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP.FLV.HLS等多种流媒体协议播放,视频编码支持H.264,H.265,音频支持AAC,支持TCP/U ...
windows下flv视频网站进度条随意拖放[转]
网站中视频都转换成flv格式,奈何flv格式无法拖拽,此问题纠结了好久,最终得以解决.现将解决思路记录下来,大多数源于网上找到的. 视频拖拽满足要求 1.播放器要支持 2.flv视频要有关键帧和met ...
借用 potplayer 播放器，在本地播放 b 站视频也能看弹幕了
苏生不惑第164 篇原创文章,将本公众号设为星标,第一时间看最新文章. 关于b站之前已经写过了下列文章,有兴趣可以点击阅读: 那些我关注的 b 站 up 主 bilibili(b站)升级到BV号了,还 ...
SkeyeWebPlayer.js H5播放器开发之webpack编译flv.js实现基础播放器功能（二）
SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP.FLV.HLS等多种流媒体协议播放,视频编码支持H.264,H.265,音频支持AAC,支持TCP/U ...
关于H5播放视频文件的问题
m3u8文件是指UTF-8编码格式的M3U文件.M3U文件是记录了一个索引纯文本文件,打开它时播放软件并不是播放它,而是根据它的索引找到对应的音视频文件的路径进行播放. 简单说,播放器通过m3u8文件 ...
用H5做直播网站源码，如何实现格式推流和播放
上一篇文章我们讲到,在了解视频流协议HLS与RTMP.明晰目前直播网站源码的主流形式,以及实现直播的简要流程后,我们来继续讲利用Html5实现直播网站源码的剩余步骤. Html5直播网站源码实现录制 ...
网页全终端视频直播/点播H5播放器EasyPlayer.js正式发布，支持H.265网页播放
在之前的多篇博客<历时半年,终于研发完成了Web网页对H.265(HEVC)直播和点播的支持,WebAssembly(wasm)>.<EasyPlayer.js开发Web H5网页播 ...
H5播放webrtc视频
一.简介 WebRTC概念 WebRTC是由Google主导的,由一组标准.协议和JavaScript API组成,用于实现浏览器之间(端到端之间)的音频.视频及数据共享.WebRTC不需要安装任何插 ...
前端在线播放flv视频
*.由于项目需要,总结了一下在线播放flv视频的方法,源码仅供参考. *.后续会根据需要继续更新,等待ing~

H5播放B站源的flv视频

前端代码

效果

H5播放B站源的flv视频相关推荐

最新文章

热门文章