前端直播插件(PC(FLV) 移动端(M3U8))

最近开发了一个直播项目 因为谷歌等浏览器已经开始不支持flash,
所以在这记录总结两个不适用flash的直播视频插件

//PC端 FLV格式直播流播放插件
<script src="../qrcode.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>

猜你喜欢

转载自blog.csdn.net/weixin_45518668/article/details/109329100
今日推荐