html前端页面如何播放flv视频,直接上代码
解决方法:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"></script>
<style>
body,center{
padding:0;
margin:0;
}
.v-container{
width:640px;
height:360px;
border:solid 1px red;
}
video{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div class="v-container">
<video id="videoElement" muted autoplay="autoplay" preload="auto" controls="controls"></video>
</div>
</body>
</html>
<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>