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

相关推荐
m0_6799272014 分钟前
练习小项目7:天气状态切换器
前端·javascript·css·html
OK_boom27 分钟前
React-改变当前页class默认的样式
前端·javascript·react.js
哎呦你好32 分钟前
【background】CSS 背景全解析:从基础属性到视觉魔法
前端·css·人工智能·python
yuanyxh1 小时前
commonmark.js 源码阅读(二) - Inline Parser
前端·javascript·html
韩明君1 小时前
前端学习笔记——Promis.All
前端·笔记·学习
斯~内克1 小时前
Vite + Vue 工程中,为什么需要关注 `postcss.config.ts`?
前端·vue.js·postcss
蜗牛快跑2131 小时前
使用 Cursor 从 0 到 1 开发一个全栈 chatbox 项目
前端·人工智能·ai·ai编程
Python涛哥2 小时前
前端流行框架Vue3教程:24.动态组件
前端·javascript·vue.js
劲爽小猴头2 小时前
HTML5快速入门-表单&实用标签
前端·html·html5
Unlimitedz3 小时前
iOS使用Metal对采集视频进行渲染
ios·音视频