前端如何播放flv视频

1、引入js

<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"></script>

2、核心代码

<script>

if (flvjs.isSupported()) {

var videoElement = document.getElementById('videoElement');

var flvPlayer = flvjs.createPlayer({

type: 'flv', //媒体类型,flv 或 mp4,默认 flv

isLive: true, // 开启直播

hasAudio: false, //是否有音频,需要设置为false不然播放不了视频

cors: true, // 开启跨域访问

url: 'http://192.168.88.80:8081/live/aa.flv'

},

{

enableWorker: false, //不启用分离线程

enableStashBuffer: false, //关闭IO隐藏缓冲区

reuseRedirectedURL: true, //重用301/302重定向url,用于随后的请求,如查找、重新连接等。

autoCleanupSourceBuffer: true //自动清除缓存

}

);

flvPlayer.attachMediaElement(videoElement);

flvPlayer.load();

flvPlayer.play();

// flvPlayer.stop();

}

</script>

3、页面直接用video 标签即可,详情可参考:http://www.yayihouse.com/yayishuwu/chapter/4510

相关推荐
前端大卫23 分钟前
为什么 React 中的 key 不能用索引?
前端
你的人类朋友25 分钟前
【Node】手动归还主线程控制权:解决 Node.js 阻塞的一个思路
前端·后端·node.js
音视频牛哥28 分钟前
从协议规范和使用场景探讨为什么SmartMediaKit没有支持DASH
人工智能·音视频·大牛直播sdk·dash·dash还是rtmp·dash还是rtsp·dash还是hls
音视频牛哥1 小时前
SmartMediaKit:如何让智能系统早人一步“跟上现实”的时间架构--从实时流媒体到系统智能的演进
人工智能·计算机视觉·音视频·音视频开发·具身智能·十五五规划具身智能·smartmediakit
音视频牛哥2 小时前
超清≠清晰:视频系统里的分辨率陷阱与秩序真相
人工智能·机器学习·计算机视觉·音视频·大牛直播sdk·rtsp播放器rtmp播放器·smartmediakit
johnny2332 小时前
AI视频创作工具汇总:MoneyPrinterTurbo、KrillinAI、NarratoAI、ViMax
人工智能·音视频
小李小李不讲道理2 小时前
「Ant Design 组件库探索」五:Tabs组件
前端·react.js·ant design
毕设十刻2 小时前
基于Vue的学分预警系统98k51(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
mapbar_front3 小时前
在职场生存中如何做个不好惹的人
前端
牧杉-惊蛰3 小时前
纯flex布局来写瀑布流
前端·javascript·css