1.html代码
<!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
isLive: true, // 开启直播
hasAudio: false, //需要设置为false不然播放不了视频
cors: true, // 开启跨域访问
url: 'http://192.168.88.88:1934/live/wurenji.flv'
},
{
enableWorker: false, //不启用分离线程
enableStashBuffer: false, //关闭IO隐藏缓冲区
reuseRedirectedURL: true, //重用301/302重定向url,用于随后的请求,如查找、重新连接等。
autoCleanupSourceBuffer: true //自动清除缓存
}
);
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
// flvPlayer.stop();
}
</script>
说明:
type:媒体类型,flv 或 mp4,默认 flv
isLive:可选,是否是直播流,默认 true
hasAudio:是否有音频
hasVideo:是否有视频
url:指定流地址,可以是 https(s) or ws(s