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

相关推荐
杨荧32 分钟前
基于Python的电影评论数据分析系统 Python+Django+Vue.js
大数据·前端·vue.js·python
excel1 小时前
迭代器与生成器全面理解
前端
可口码农1 小时前
MixOne:Electron Remote模块的现代化继任者
java·前端·electron
发如雪-ty1 小时前
Bash常用操作总结
前端·chrome
冲!!1 小时前
使用nvm查看/安装node版本
前端·node.js·node·nvm
LilyCoder2 小时前
HTML5二十四节气网站源码
前端·javascript·html·html5
Bruce_Liuxiaowei2 小时前
跨站脚本攻击(XSS)高级绕过技术与防御方案
前端·网络安全·xss
EF@蛐蛐堂2 小时前
【vue3】v-model 的 “新玩法“
前端·javascript·vue.js
两个月菜鸟2 小时前
vue+微信小程序 五角星
前端·vue.js·微信小程序
GISer_Jing4 小时前
React手撕组件和Hooks总结
前端·react.js·前端框架