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

相关推荐
小驰行动派几秒前
B帧 对 视频清晰度 / 码率的影响
音视频
王哥儿聊AI8 分钟前
Lynx:新一代个性化视频生成模型,单图即可生成视频,重新定义身份一致性与视觉质量
人工智能·算法·安全·机器学习·音视频·软件工程
gnip36 分钟前
实现AI对话光标跟随效果
前端·javascript
脑花儿1 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.2 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰2 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息2 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
卷Java3 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
gihigo19984 小时前
在CentOS上配置SVN至Web目录的自动同步
前端·svn·centos
珍宝商店4 小时前
优雅的 async/await 错误处理模式指南
开发语言·前端·javascript