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

最近开发了一个直播项目 因为谷歌等浏览器已经开始不支持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>
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值