1.阿里云直播

https://player.alicdn.com/aliplayer/setting/setting.html

2.腾讯云播放器TcPlayer

https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.2.js

3.FLV.js

vue可以使用node npm、cnpm安装flv.js 

<template>
  <transition name="slide">
   <div class="videoplayback"  >
    <div class="mbl-con" :class="{'mbl-con-ver':(verOrHor === 0),'mbl-con-hor':(verOrHor === 1)}">
      <div class="videoPlayTop">
       <div class="passwordTip" >{{ secname }}</div>
       <div class="goBack" @click="videoplayHidden">
         <div class="imgDiv">
           <img src="http://static.crecgec.com/wxmobile/left_arrow.png"/>
         </div>
       </div>
       <div class="voconItem" @click='shareopen'>
         <div class="divImg">
           <img src="../../../static/share.png"/>
         </div>
       </div>
       <!--<div class="videoOperation" @click.stop="voconShow=!voconShow">
         <div class="videoOperationImg">
           <img src="http://static.crecgec.com/wxmobile/videoOperation.png"/>
         </div>
       </div>-->
     </div>
        <!-- flv播放器 -->
        <div class="mainContainer" v-show='isFlv'>
            <div>
                <div id="streamURL">
                    <div class="url-input displayNone" >
                        <label for="sURL">Stream URL:</label>
                        <input id="sURL" type="text" :value="allURL" />
                        <button @click="switch_mds">Switch to MediaDataSource</button>
                    </div>
                    <div class="options displayNone">
                        <input type="checkbox" id="isLive" onchange="saveSettings()" checked/>
                        <label for="isLive">isLive</label>
                        <input type="checkbox" id="withCredentials" onchange="saveSettings()" />
                        <label for="withCredentials">withCredentials</label>
                        <input type="checkbox" id="hasAudio" onchange="saveSettings()" checked />
                        <label for="hasAudio">hasAudio</label>
                        <input type="checkbox" id="hasVideo" onchange="saveSettings()" checked />
                        <label for="hasVideo">hasVideo</label>
                    </div>
                </div>
                <div id="mediaSourceURL" style="display: none;" class="hidden displayNone">
                    <div class="url-input">
                        <input id="msURL" type="text" :value="allURL" />
                        <button @click="switch_url">Switch to URL</button>
                    </div>
                </div>
            </div>
            <div class="video-container">
                <div>
                    <video name="videoElement" class="centeredVideo" controls autoplay>
                        您的浏览器版本太久,请点击切换播放器播放
                    </video>
                </div>
            </div>

            <div class="controls displayNone">
                <!--<button @click="flv_load">Load</button>
                <button @click="flv_start">Start</button>
                <button @click="flv_pause">Pause</button>
                <button @click="flv_destroy">Destroy</button>-->
                <input style="width:100px" type="text" name="seekpoint"/>
                <button @click="flv_seekto">SeekTo</button>
            </div>
            <textarea name="logcatbox" class="logcatBox displayNone" rows="10" readonly></textarea>
        </div>
        <!-- 阿里云播放器 -->
        <div class="play-hrzt" id="videoPlay" v-show='!isFlv'>
        </div>
        <div class="showButton" v-show="AorO">
            <a href="javascript:;" class="videoline" name="线路切换" @click='changeLine'>线路切换</a>
            <a href="javascript:;" class="jiemudan" name="节目单" v-show="jiemudanShow" @click="openProgramPuides">节目单</a>
        </div>
        <div class="liveBottom" v-show="verOrHor === 0">
            <div class="replyMessageUl">
                <ul>
                    <li v-for="(item, index) in taolunList" :key="index">
                        <div class="tltouxiang">
                            <img :src="'/data/upload/avatar/' + item.avatar">
                        </div>
                        <div class="tlname" :class="{'tlnameTeacher' : (item.isteacher == 1)}">{{item.client_name}}:</div>
                        <div class="tlcon">{{item.msg}}</div>
                    </li>
                </ul>
            </div>
            <div class="sendMessage">
                <input class="msgInput" type="text" placeholder="说一句话吧..." v-model="msgText">
                <button type='button' class="sendMsgA" @click="sendMessage">发送</button>
            </div>
        </div>
    </div>
     <!--<div class="videoOperationCon" v-show="voconShow" @click.stop="voconShow=true">
       <div class="voconItem" v-if="favorite === null" @click="collectionYes">
         <div class="divImg">
           <img src="http://static.crecgec.com/wxmobile/collection.png"/>
         </div>
         <div class="divVal">收藏</div>
       </div>
       <div class="voconItem" v-else @click="collectionNo">
         <div class="divImg">
           <img src="http://static.crecgec.com/wxmobile/collectionHas.png"/>
         </div>
         <div class="divVal">已收藏</div>
       </div>
       <div class="voconItem" @click='shareopen'>
         <div class="divImg">
           <img src="http://static.crecgec.com/wxmobile/share.png"/>
         </div>
         <div class="divVal">分享</div>
       </div>
     </div>-->
     <!-- 分享 -->
     <van-actionsheet v-model="shareSelect" title="分享" class="shareCh">
       <div class="bdsharebuttonbox bdshare-button-style0-32">
         <div class="shareline" @click='Qzshare'>
           <a class="bds_qzone" data-cmd="qzone" href="javascript:;"></a>
           <p>QQ空间</p>
         </div>
         <div class="shareline" @click='tsina'>
           <a class="bds_tsina" data-cmd="tsina" href="javascript:;"></a>
           <p>微博</p>
         </div>
         <div class="shareline" v-clipboard:copy="copyUrl" v-clipboard:success="onCopy" v-clipboard:error="onError">
           <a class="bds_copyurl" data-cmd="copyurl" href="javascript:;"></a>
           <p>复制链接</p>
         </div>
       </div>
     </van-actionsheet>
     <!--<div class="commentShow" v-show="commentShow">
       <div class="commentCon">
         <div class="closeCommentCon">
           <a class="commentConClose" @click.stop="commentConClose">
             <div class="commentConCloseImg">
               <img src="http://static.crecgec.com/wxmobile/close.png"/>
             </div>
           </a>
         </div>
         <van-rate
           class="scroeRate"
           v-model="scoreVal"
           :size="25"
           :count="5"
           color="#398ed1"
           void-color="#ceefe8"
         />
         <a class="commentSubmit" @click.stop="commentSubmit">提交</a>
       </div>
     </div>
     <div class="playTitle">{{playTitle}}</div>
      <div v-show="introduceObj.course_type == 'doc' ">
        <div class="playText" v-html="doccontent">
          {{ doccontent }}
        </div>
      </div>-->
     <!--<div class="playDetails">
       <div class="detailsPlay">
         <div class="classHour">共{{ classHour }}课时</div>
         <a class="goCourseDetail" @click="videoplayHidden">课程详情></a>
       </div>
     </div>
     <div class="catalog-list">
       <ul v-if="catalogList.length > 0">
         <li v-for="(item, index) in catalogList" :key="index" @click="changeVideoPlay(index)">
           <div class="catalog-list-title">{{item.sc_name}}</div>
         </li>
       </ul>
       <div class="noLists" v-else>没有数据</div>
     </div>-->
   </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  import {liveWs} from '@/common/js/liveSocket.js'
  import bdshare from 'bdshare'
  import flvjs from 'flv.js'
  import { Toast } from 'vant'
  export default {
    props: {
    },
    data () {
      return {
        ws: null,
        wsUrl: '',
        wsFun: null,
        // 直播状态
        livestate: '',
        playurl: '',
        allURL: '',
        secname: '',
        client_name: '',
        c_id: 0,
        avatar: '',
        isteacher: '',
        section_id: '',
        jystatus: null,
        msgText: '',
        publishtime: '', // 发布评论时候的时间
        msgDisplay: false,
        isJinyan: false,
        msgPlaceholder: '请在此输入参与评论……',
        taolunList: [],
        verOrHor: 0, // 0为竖屏,1为横屏
        player: null,
        flvplayer: null,
        danmukuList: [],
        isFlv: false,
        programPuidesShow: false,
        jiemudanShow: false,
        LBOrWMimg: true,
        checkBoxFields: ['isLive', 'withCredentials', 'hasAudio', 'hasVideo'],
        streamURL: '',
        mediaSourceURL: '',
        live_wsurl: '',
        socketkey: '',
        AorO: false,
        shareConfig: {
          bdText: this.$store.state.courseName,
          bdUrl: this.$store.state.bdUrl,
          bdPic: this.$store.state.bdPic
        },
        submitIsCollection: true,
        favorite: '',
        shareSelect: false,
        copyUrl: window.location.href,
        scoketNo: true,
        room_id: this.$route.query.classHourid
      }
    },
    created () {
//    this.starts()
//    this.resize()
    },
    watch: {
      ws: {
        // 深度监听,可监听到对象、数组的变化
        handler (val, oldVal) {
          if (val != null) {
            console.log(val)
          }
        },
        deep: true
      }
    },
    mounted () {
      this.inits()
    },
    methods: {
      inits() {
        let _this = this
        _this.ws = null
        _this.axios({
          method: 'get',
          url: _this.api.live.livestudy,
          params: {
            id: _this.$route.query.classHourid,
            token: _this.api.token,
            client: _this.api.encodeClient
          }
        })
        .then(function (response) {
          if (response.data.state + '' !== 'true') {
            _this.api.ErrorFn(response.data)
          } else {
            _this.livestate = response.data.data.lession.livestate
            _this.allURL = response.data.data.lession.flvplayurl
            _this.playurl = response.data.data.lession.url
            _this.client_name = response.data.data.nicename
            _this.secname = response.data.data.lession.secname
            _this.c_id = Number(response.data.data.c_id)
            _this.avatar = response.data.data.avatar
            _this.isteacher = response.data.data.isteacher
            _this.section_id = response.data.data.cid
            _this.live_wsurl = response.data.data.live_wsurl
            _this.socketkey = response.data.data.socketkey
            _this.favorite = response.data.data.favorite
            _this.wsUrl = 'ws://' + _this.live_wsurl + '/' + _this.socketkey
            _this.webSockinit()
          }
        })
        .catch(function (error) {
          console.log(error)
        })
      },
      webSockinit() {
        let _this = this
        if ('WebSocket' in window) {
          // 打开一个 web socket
          console.log(_this.wsUrl)
          _this.ws = new WebSocket(_this.wsUrl)
            var heartCheck = {
              timeout: 10000, // 10s
              timeoutObj: null,
              serverTimeoutObj: null,
              reset: function() {
                clearTimeout(this.timeoutObj)
                clearTimeout(this.serverTimeoutObj)
                this.start()
              },
              start: function() {
                var self = this
                this.timeoutObj = setTimeout(function() {
                  _this.wsFun.liveSend('heartbeat')
                  self.serverTimeoutObj = setTimeout(function() {
                    _this.ws.close() // 如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
                  }, self.timeout)
                }, this.timeout)
              }
            }
          _this.wsFun = new liveWs(this.ws, this)
          _this.ws.onopen = function() {
            // Web Socket 已连接上,使用 send() 方法发送数据
            heartCheck.start()
            _this.wsFun.liveSend('login', _this)
          }
          _this.ws.onmessage = function (evt) {
            heartCheck.reset()
            var received_msg = JSON.parse(evt.data)
              switch (received_msg.type) {
                case 'login':
                  _this.isJinyan = received_msg.jystatus
                  _this.msgText = ''
                  if (_this.isJinyan === '1') {
                    if (_this.isteacher !== '1') {
                      _this.msgDisplay = true
                      _this.msgPlaceholder = '管理员禁言中……'
                    }
                  } else {
                    _this.msgDisplay = false
                    _this.msgPlaceholder = '请在此输入参与评论……'
                    if (_this.isteacher === '1') {
                    // _this.isJinyan = false
                    } else {
                    }
                  }
                break
                case 'saystatus':
                  _this.isJinyan = received_msg.jystatus
                  _this.msgDisplay = (received_msg.isJinyan === '1')
                 if (_this.isJinyan === '1') {
                   if (_this.isteacher !== '1') {
                      _this.msgDisplay = true
                      _this.msgPlaceholder = '管理员禁言中……'
                    }
                  } else {
                    _this.msgDisplay = false
                    _this.msgPlaceholder = '请在此输入参与评论……'
                  }
                break
                case 'heartbeat':
                  _this.wsFun.liveSend('heartbeat')
                break
                case 'say':
                  _this.taolunList.push({ 'avatar': received_msg.avatar, 'client_name': received_msg.from_client_name, 'time': new Date().Format('yyyy-MM-dd hh:mm:ss'), 'msg': received_msg.content, 'isteacher': received_msg.isteacher })
                  // 发布讨论后,滚动到最底部
                  var scrollHeight = $('.replyMessageUl').prop('scrollHeight')
                  $('.replyMessageUl').animate({scrollTop: scrollHeight}, 400)
                break
                case 'danmu':
                  if (_this.isFlv === true) {
                    _this.run_example('/data/upload/avatar/' + received_msg.avatar, received_msg.content)
                  } else {
                  	_this.run_example('/data/upload/avatar/' + received_msg.avatar, received_msg.content)
                    _this.danmukuList.push({ 'mode': 1, 'text': received_msg.content, 'isteacher': received_msg.isteacher, 'size': 25, 'color': 0xffffff, 'stime': _this.player.getCurrentTime() + 1 })
                  }
                break
              }
          }
          _this.ws.onclose = function() {
          	if(_this.scoketNo){
          		console.log('连接已关闭,开始重连')
              _this.webSockinit()
          	}
           
          }
          _this.ws.onerror = function () { _this.ws.close() }
        } else {
          // 浏览器不支持 WebSocket
          alert('您的浏览器不支持 WebSocket!')
        }
        // flv视频直播
        setTimeout(function () {
          if (_this.getAorO() === 'Android') {
            if (_this.getaversion() >= 6) {
              _this.AorO = true
            } else {
             _this.AorO = false
            }
            _this.isFlv = true
            _this.createFlvplayer()
          } else {
            _this.AorO = false
            _this.createAliplayer()
          }
        }, 0)
        if (this.getUrlParam('id') === '190' || this.getUrlParam('id') === '175') {
          this.jiemudanShow = true
        } else {
          this.jiemudanShow = false
        }
        if (this.getUrlParam('id') === '190') {
          this.LBOrWMimg = true
        } else {
          this.LBOrWMimg = false
        }
      },
      starts() {
        var deviceWidth = document.documentElement.clientWidth || document.body.clientWidth
        if (deviceWidth > 375) deviceWidth = 375
        document.documentElement.style.fontSize = deviceWidth / 3.75 + 'px'
        var loaclHeight = $('section').height() // 获取可视宽度
        $('input,textarea').focus(function() {
          var keyboardHeight = loaclHeight - $('section').height() // 获取键盘的高度
            var keyboardY = loaclHeight - keyboardHeight
            var addBottom = (parseInt($(this).position().top) + parseInt($(this).height())) // 文本域的底部
            var offset = addBottom - keyboardY // 计算上滑的距离
            $('section').scrollTop(offset)
        })
      },
      resize() {
        window.onresize = function() {
          var deviceWidth = document.documentElement.clientWidth || document.body.clientWidth
          if (deviceWidth > 375) deviceWidth = 375
          document.documentElement.style.fontSize = deviceWidth / 3.75 + 'px'
        }
      },
      createFlvplayer() {
        // flv视频播放
        this.streamURL = document.getElementById('streamURL')
        this.mediaSourceURL = document.getElementById('mediaSourceURL')
        this.showVersion()
        this.flvaddLog()
        this.flv_load()
      },
      getaversion () {
        var ua = navigator.userAgent.toLowerCase()
        var version = null
        if (ua.indexOf('android') > 0) {
          var reg = /android [\d._]+/gi
          var v_info = ua.match(reg)
          version = (v_info + '').replace(/[^0-9|_.]/ig, '').replace(/_/ig, '.') // 得到版本号4.2.2
          version = parseInt(version.split('.')[0]) // 得到版本号第一位
        }
        return version
      },
      getAorO() { // 获取当前操作系统
        var os
        if (navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Linux') > -1) {
          os = 'Android'
        } else if (navigator.userAgent.indexOf('iPhone') > -1 || navigator.userAgent.indexOf('iPad') > -1) {
          os = 'iOS'
        }
        return os
      },
      createAliplayer() {
        var _this = this
//      $('#videoPlay').html('')
        // 初始化阿里云播放器
        _this.player = null
        var aliplayerConfig = {
            'id': 'videoPlay',
            'source': _this.playurl,
            'width': '100%',
            'height': '80vw',
            'autoplay': true,
            'isLive': true,
            'cover': '',
            'rePlay': false,
            'playsinline': true,
            'preload': true,
            'controlBarVisibility': 'hover',
            'useH5Prism': true,
            'skinLayout': [
                {
                    'name': 'bigPlayButton',
                    'align': 'blabs',
                    'x': 30,
                    'y': 80
                },
                {
                    'name': 'H5Loading',
                    'align': 'cc'
                },
                {
                    'name': 'tooltip',
                    'align': 'blabs',
                    'x': 0,
                    'y': 56
                },
                {
                    'name': 'thumbnail'
                },
                {
                    'name': 'controlBar',
                    'align': 'blabs',
                    'x': 0,
                    'y': 0,
                    'children': [
                        {
                            'name': 'playButton',
                            'align': 'tl',
                            'x': 15,
                            'y': 12
                        },
                        {
                            'name': 'timeDisplay',
                            'align': 'tl',
                            'x': 10,
                            'y': 7
                        },
                        {
                            'name': 'fullScreenButton',
                            'align': 'tr',
                            'x': 10,
                            'y': 12
                        },
                        {
                            'name': 'volume',
                            'align': 'tr',
                            'x': 5,
                            'y': 10
                        }
                    ]
                }
            ],
            "components": [{
                name: 'AliplayerDanmuComponent',
                type: AliPlayerComponent.AliplayerDanmuComponent,
                args: [_this.danmukuList]
            }]
          }
        _this.player = new Aliplayer(aliplayerConfig, function (player) {
                    console.log("播放器创建了。");
                });
      },
      sendMessage() {
        if (this.msgText == '') {
            alert('禁止发送空消息!')
            return false
        }
        this.publishtime = new Date().Format('yyyy-MM-dd hh:mm:ss')
        this.wsFun.liveSend('say', this)
      },
     // 横竖屏切换,设置不同的样式
      orient() {
        if (window.orientation === 0 || window.orientation === 180) {
            this.verOrHor = 0
            $('#videoPlay').css({'width': '100%', 'height': '3rem'})
            $('.liveBroadcast').removeClass('liveBroadcastHor').addClass('liveBroadcastVer')
            $('.play-hrzt').css({'height': '80vw', 'flex': '0 0 80vw'})
            // 可针对横竖屏改变用js动态改变css样式
            return false
        } else if (window.orientation === 90 || window.orientation === -90) {
            this.verOrHor = 1
            $('#videoPlay').css({'width': '100%', 'height': 'auto'})
            $('.liveBroadcast').removeClass('liveBroadcastVer').addClass('liveBroadcastHor')
            $('.play-hrzt').css({'height': '100%', 'flex': '0 0 auto'})
            return false
        }
      },
      changeLine() {
        if (this.isFlv) {
						 this.createAliplayer()
						 this.flvplayer.pause()
        } else {
            this.createFlvplayer()
            this.player.pause()
        }
        this.isFlv = !this.isFlv
      },
    // 打开节目单
      openProgramPuides () {
        this.programPuidesShow = true
      },
    // 关闭节目单
      closeProgramPuides() {
        this.programPuidesShow = false
      },
      flv_load() {
            var i;
            var mediaDataSource = {
                type: 'flv'
            };
            for (i = 0; i < this.checkBoxFields.length; i++) {
                var field = this.checkBoxFields[i]
                /** @type {HTMLInputElement} */
                var checkbox = document.getElementById(field)
                mediaDataSource[field] = checkbox.checked
            }
           console.log(this.allURL)
            mediaDataSource['url'] = this.allURL
            console.log('MediaDataSource', mediaDataSource)
            this.flv_load_mds(mediaDataSource)
//      }
      },
      flv_load_mds(mediaDataSource) {
      	this.flvplayer = null
        var element = document.getElementsByName('videoElement')[0];
        if (typeof this.flvplayer !== 'undefined') {
            if (this.flvplayer != null) {
                this.flvplayer.unload()
                this.flvplayer.detachMediaElement()
                this.flvplayer.destroy()
                this.flvplayer = null
            }
        }
        this.flvplayer = flvjs.createPlayer(mediaDataSource, {
            enableWorker: false,
            lazyLoadMaxDuration: 3 * 60,
            seekType: 'range',
        });
        this.flvplayer.attachMediaElement(element);
        this.flvplayer.load()
      },
//    flv_start() {
//      this.player.play();
//    },
//    flv_pause() {
//      this.player.pause();
//    },
//    flv_destroy() {
//      this.player.pause();
//      this.player.unload();
//      this.player.detachMediaElement();
//      this.player.destroy();
//      this.player = null;
//      return false;
//    },
      flv_seekto() {
        var input = document.getElementsByName('seekpoint')[0]
        this.flvplayer.currentTime = parseFloat(input.value)
      },
      switch_url() {
        this.streamURL.className = ''
        this.mediaSourceURL.className = 'hidden'
        this.saveSettings()
      },
      switch_mds() {
        this.streamURL.className = 'hidden'
        this.mediaSourceURL.className = ''
        this.saveSettings()
      },
      ls_get(key, def) {
        try {
            var ret = localStorage.getItem('flvjs_demo.' + key)
            if (ret === null) {
                ret = def
            }
            return ret
        } catch (e) {}
        return def
      },
      ls_set(key, value) {
        try {
             localStorage.setItem('flvjs_demo.' + key, value)
        } catch (e) {}
      },
      saveSettings() {
        if (this.mediaSourceURL.className === '') {
            this.ls_set('inputMode', 'MediaDataSource')
        } else {
            this.ls_set('inputMode', 'StreamURL')
        }
        var i;
        for (i = 0; i < this.checkBoxFields.length; i++) {
            var field = this.checkBoxFields[i];
            /** @type {HTMLInputElement} */
            var checkbox = document.getElementById(field);
            this.ls_set(field, checkbox.checked ? '1' : '0')
        }
        this.ls_set('msURL', this.allURL)
        this.ls_set('sURL', this.allURL)
        console.log('save')
      },
      loadSettings() {
        var i
        for (i = 0; i < this.checkBoxFields.length; i++) {
            var field = this.checkBoxFields[i]
            /** @type {HTMLInputElement} */
            var checkbox = document.getElementById(field)

        }
      },
      showVersion() {
        var version = flvjs.version
      },
			flvaddLog(){
				var logcatbox = document.getElementsByName('logcatbox')[0]
		    flvjs.LoggingControl.addLogListener(function(type, str) {
		        logcatbox.value = logcatbox.value + str + '\n'
		        logcatbox.scrollTop = logcatbox.scrollHeight
		    });
			},
    // 插件发送弹幕
      run_example(imgUrl, msg){
        var example_item={'img': imgUrl,'info':msg}
        $('body').barrager(example_item)
        return false
      },
      videoplayHidden () {
      	this.scoketNo = false
				this.$router.push({
						path:`/liveDetails`,
						query:{
							id:this.$route.query.id,
						}
					})
      },
       // 收藏
      collectionYes () {
        let _this = this
        if (this.submitIsCollection) {
          this.submitIsCollection = false
          _this.axios({
            method: 'post',
            url: _this.api.live.livefavorite,
            data: {
              cid: this.c_id,
              token: _this.api.token,
              client: _this.api.encodeClient
            }
          })
            .then(function (response) {
              if (response.status === 200 && response.data.states === true) {
              }
              _this.submitIsCollection = true
            })
            .catch(function (error) {
              console.log(error)
              _this.submitIsCollection = true
            })
        }
      },
      // 取消收藏
      collectionNo () {
        let _this = this
        if (this.submitIsCollection) {
          _this.axios({
            method: 'post',
            url: _this.api.live.liveunfavorite,
            data: {
              cid: this.c_id,
              token: _this.api.token,
              client: _this.api.encodeClient
            }
          })
            .then(function (response) {
              if (response.status === 200 && response.data.states === true) {
              }
              _this.submitIsCollection = true
            })
            .catch(function (error) {
              console.log(error)
              _this.submitIsCollection = true
            })
        }
      },
       shareopen () {
        this.shareSelect = true
      },
      Qzshare () {
        bdshare.qzone(this.shareConfig)
      },
      tsina () {
        bdshare.tsina(this.shareConfig)
      },
      onCopy (e) {
        this.shareSelect = false
        Toast('复制链接成功')
      },
      onError () {
        this.shareSelect = false
        Toast('复制链接失败')
      },
    //获取url中的参数
      getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)") // 构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg)  // 匹配目标参数
        if (r != null) return unescape(r[2]);return null // 返回参数值
      },
    }

  }
</script>

<style scoped lang="less" rel="stylesheet/less" type="text/less">
  @import "../../common/less/variable";

  .videoplayback{
    position: absolute;
    z-index: 900;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f3f5f7;
    overflow: auto;
    .mbl-con{
	    width: 100%;
	    height: 100%;
	    overflow: auto;
	    display: flex;
	    #videoPlay{
	    	min-height: 80vw;
	    	background: #000;
	    }
	    .videoPlayTop{
	      position: relative;
	      height: 90px;
	      background-color: rgba(0, 0, 0, 0.7);
	      .goBack{
	        margin-left: 10px;
	        width: 58px;
	        height: 90px;
	        vertical-align: middle;
	        text-align: center;
	        display: flex;
	        justify-content:center;
	        align-items:Center;
	        float: left;
	        .imgDiv{
	          width: 18px;
	          height: 30px;
	          img{
	            display: inline-block;
	            float: left;
	            width: 100%;
	            height: 100%;
	          }
	        }
	      }
	      .passwordTip{
	        position: absolute;
	        left: 50%;
	        top: 50%;
	        transform: translate(-50%, -50%);
	        overflow: hidden;
					white-space: nowrap;
					width: 80%;
					text-overflow: ellipsis;
	        color: #fff;
	        font-size: 28px;
	      }
	      .videoOperation{
	        width: 80px;
	        height: 90px;
	        float: right;
	        margin-right: 10px;
	        display: flex;
	        justify-content:center;
	        align-items:Center;
	        .videoOperationImg{
	          width: 30px;
	          height: 6px;
	          img{
	            display: inline-block;
	            float: left;
	            width: 100%;
	            height: 100%;
	          }
	        }
	      }
	    }
	    .liveBottom{
        flex: 1;
        width: 100%;
        position: relative;
        display: flex;
        flex-flow: column;
        .sendMessage{
			    width: 100%;
			    height: 100px;
			    flex: 0 0 100px;
			    display: flex;
			    align-items: center;
			    background: #fff;
			    margin: 0 auto;
			    .msgInput{
            padding: 0 60px 0 60px;
            width: 98%;
            height: 76px;
            border: 1px solid #F1F1F1;
            background-color: #F8F8F8;
            font-size: 30px;
            border-radius: 40px;
            margin-left: 16px;
	        }
	        .msgInput:focus{
	            outline: none;
	            background-color: transparent;
	        }
	        .sendMsgA{
            /*height: 0.38rem;*/
            text-align: center;
            padding: 18px 20px;
            background-color: #4A90E2;
            color: #FFFFFF;
            font-size: 13px;
            border-radius: 36px;
            margin-left: 16px;
            margin-right: 20px;
            white-space:nowrap;
          }
				}
				.replyMessageUl{
		        width: 100%;
		        background-color: #F8F8F8;
		        overflow: auto;
		        flex: 1;
            ul li{
	            width: 100%;
	            height: auto;
	            margin-top: 10px;
	            display: flex;
	            .tltouxiang{
	            	width: 40px;
	            	height: 40px;
	            	img{
	            		width: 100%;
	            		height: 100%;
	            	}
	            }
        	  }
        }
	    }
	    .showButton{
        width: 100%;
        height: 76px;
        padding: 10px;
        background: #fff;
        a{
	        width: auto;
	        display: block;
	        float: right;
	        height: 56px;
	        line-height: 56px;
	        text-align: center;
	        padding: 0 16px;
	        color: #FFFFFF;
	        font-size: 26px;
	        margin-left: 16px;
	        margin-right: 20px;
	        white-space: nowrap;
	        text-decoration: none;
	        border-radius: 12px;
        }
        .videoline{
            background-color: #4A90E2;
        }
        .jiemudan{
            background-color: #f44848;
        }
      }
    }
    .mbl-con-ver{
        flex-direction: column;
    }
    .mbl-con-hor{
        flex-direction: row;
    }
  }
  .slide-enter-active,.slide-leave-active{
    transition: all .3s
  }
  .slide-enter,.slide-leave-to{
    transform: translate3d(100%, 0, 0)
  }
  .displayNone{
  	display: none !important;
  }
  .video-container{
  	height: 80vw;
  	background: #000;
  	div{
  		height: 80vw;
  		.centeredVideo{
  			height: 80vw;
  			width: 100%;
  		}
  	}
  }
  .videoOperationCon{
      position: absolute;
      background-color: #fff;
      border-radius: 4px;
      margin-top: 10px;
      top: 80px;
      right: 30px;
      display: flex;
      flex-direction: column;
      padding-bottom:26px;
      padding-right: 24px;
      padding-left: 30px;
      .voconItem{
        line-height: 28px;
        padding-top: 26px;
        &:first-child{
          padding-top: 22px;
        }
        .divImg{
          width: 30px;
          height: 28px;
          display: inline-block;
          img{
            vertical-align: top;
            width: 100%;
            height: 100%;
          }
        }
        .divVal{
          display: inline-block;
          font-size: @font-size-22;
          color: #313131;
          text-align: center;
          width: 72px;
        }
      }
    }
    .shareCh{
    overflow: hidden;
    .shareline{
      height: 120px;
      width: 150px;
      padding-top:36px;
      text-align:center;
      float: left;
      overflow: hidden;
    }
    .bdshare-button-style0-32 a{
      height: 50px;
      width: 32px;
      display: block;
      margin: 0 auto;
      float: initial;
    }
    .bdshare-button-style0-32 p{
      font-size: @font-size-24;
    }
    .bdshare-button-style0-32 a.bds_qzone{
      background: url(http://static.crecgec.com/wxmobile/kongjian.png) 0 0 no-repeat;
      background-size: 100% auto;
    }
    .bdshare-button-style0-32 a.bds_tsina{background: url(http://static.crecgec.com/wxmobile/weibo.png) 0 0 no-repeat;
      background-size: 100% auto;}
    .bdshare-button-style0-32 a.bds_copyurl{background: url(http://static.crecgec.com/wxmobile/copyUrl.png) 0 0 no-repeat;
      background-size: 100% auto;}
  }
  .voconItem{
    width: 80px;
    height: 90px;
    float: right;
    margin-right: 10px;
    display: flex;
    justify-content:center;
    align-items:Center;
    .divImg{
      width: 28px;
      height:30px;
      img{
        display: inline-block;
        float: left;
        width: 100%;
        height: 100%;
      }
    }
  }
</style>

Logo

前往低代码交流专区

更多推荐