最近开发了一个直播项目 因为谷歌等浏览器已经开始不支持flash,
所以在这记录总结两个不适用flash的直播视频插件
//PC端 FLV格式直播流播放插件
<script src="../flv.min.js" type="text/javascript" charset="utf-8"></script>
<video id="videoElement" style="width:100%;height:100%;object-fit:fill;" class="centeredVideo" controls allowscriptaccess="true" allowscriptaccess="always" autostart="true"> //autostart=“auto”支持部分浏览器只懂有声音播放
Your browser is too old which doesn't support HTML5 video.
</video>
<script>
var _this = this
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
_this.flvPlayer = flvjs.createPlayer({
type: 'flv',
url: '', //直播地址 FLV格式
isLive: true,
cors: true,
enableWorker: true,
enableStashBuffer: false,
stashInitialSize: 128,
autoCleanupSourceBuffer:true
});
_this.flvPlayer.attachMediaElement(videoElement);
_this.flvPlayer.load();
_this.flvPlayer.play();
}
</script>
//移动端 m3u8格式直播流播放插件
<link href="./video-js.min.css" rel="stylesheet">
<script src="./video.min.js"></script>
<script src="./videojs-contrib-hls.min.js"></script>
<video id="myVideo" style="width:100%;height:100%;" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" allowscriptaccess="true" controls autostart="true" data-setup='{}' webkit-playsinline playsinline x5-playsinline x-webkit-airplay="allow" >
<source id="source" src="" type="application/x-mpegURL">
//m3u8直播流地址
</video>
<script>
var that = this;
var myVideo = videojs('myVideo',{
bigPlayButton : true,
textTrackDisplay : false,
posterImage: false,
errorDisplay : false,
})
</script>