前端如何播放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

相关推荐
EveryPossible4 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua5 小时前
setup函数相关【3】
前端·javascript·vue.js
neon12045 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画
Sammyyyyy5 小时前
Node.js 做 Web 后端优势为什么这么大?
开发语言·前端·javascript·后端·node.js·servbay
妮妮喔妮5 小时前
Webpack 有哪些特性?构建速度?如何优化?
前端·webpack·node.js
ST.J5 小时前
webpack笔记
前端·笔记·webpack
Baklib梅梅6 小时前
2025 年 8 个最佳网站内容管理系统(CMS)
前端·ruby on rails·前端框架·ruby
IT_陈寒6 小时前
🔥5个必学的JavaScript性能黑科技:让你的网页速度提升300%!
前端·人工智能·后端
Bling_Bling_16 小时前
面试常考:js中 Map和 Object 的区别
开发语言·前端·javascript
前端小巷子6 小时前
JS实现丝滑文字滚动
前端·javascript·面试