uniapp中使用videojs構(gòu)建H5直播播放器

更新時(shí)間：2023年06月12日 14:25:28 作者：周星星的學(xué)習(xí)筆記

這篇文章主要為大家介紹了uniapp中使用videojs構(gòu)建H5直播播放器實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

這兩天在開(kāi)發(fā)H5直播帶貨功能模塊，使用原生的video播放器播放不了m3u8的流地址，于是找了videojs，參考了網(wǎng)上的一些資料研究了一下，感覺(jué)還不錯(cuò)，videojs播放m3u8流地址還挺穩(wěn)定的，下面就簡(jiǎn)單記錄一下uniapp里面使用方式。

效果圖

一、使用npm安裝videojs

npm i video.js --save
npm i videojs-flash --save

二、頁(yè)面中導(dǎo)入videojs

import videojs from 'video.js'
import 'video.js/dist/video-js.min.css'
import 'videojs-flash'

三、定義播放器區(qū)域

<!-- 播放器顯示區(qū)域 -->
<view class="video-display-wrap">
      <!-- 播放器最終在view的子級(jí)顯示 -->
      <view
        class="video-js"
        ref="video"
        style="width: 100%; height: 100%"
      ></view>
      <!-- 播放器最終在view的子級(jí)顯示 -->
      <!--  自定義播放按鈕（圖片自行替換） -->
      <image
        v-if="!isPlaying"
        :src="resource.playBtnIcon"
        mode="heightFix"
        class="play-btn-icon"
        @click="playVideo"
      ></image>
      <!--  自定義播放按鈕 -->
      <!-- 視頻蒙版用于點(diǎn)擊視頻能夠切換播放狀態(tài) -->
      <view class="video-mask" @click="switchPlayVideo">
      </view>
      <!-- 視頻蒙版用于點(diǎn)擊視頻能夠切換播放狀態(tài) -->
    </view>
<!-- 播放器顯示區(qū)域 -->

四、onReady中初始化播放器

1.data里面定義變量

data() {
  return {
      ...
      //視頻播放器
      videoPlayer: null,
      //是否正在播放
      isPlaying: false,
  }
}

2.onReady里面

onReady() {
    ...
    //初始化播放器
    this.initVideo()
},

3.初始化播放器以及基礎(chǔ)的操作方法

#示例代碼,部分變量是業(yè)務(wù)中用到的
initVideo() {
      let video = document.createElement('video')
      video.id = 'video'
      //如果需要全屏幕展現(xiàn)播放器需要增加 object-fit: cover;
      video.style = 'width: 100%; height: 100%;'
      video.controls = false
      video.setAttribute('playsinline', true) //IOS微信瀏覽器支持小窗內(nèi)播放
      video.setAttribute('webkit-playsinline', true) //這個(gè)bai屬性是ios 10中設(shè)置可以讓視頻在小du窗內(nèi)播放，也就是不是全屏播放的video標(biāo)簽的一個(gè)屬性
      video.setAttribute('x5-video-player-type', 'h5') //安卓 聲明啟用同層H5播放器 可以在video上面加?xùn)|西
      let source = document.createElement('source')
      source.src = 'http://xxxx.m3u8'  //設(shè)定的流地址
      //根據(jù)流地址的后綴設(shè)置好播放類型
      if (source.src.indexOf('.mp4') !== -1) {
        //mp4類型
        source.type = 'video/mp4'
      } else if (source.src.indexOf('.m3u8') !== -1) {
        //hls類型
        source.type = 'application/x-mpegURL'
      } else if (source.src.indexOf('.flv') !== -1) {
        //flv類型
        source.type = 'video/flv'
      } else {
        //rtmp類型
        source.type = 'rtmp/hls'
      }
      //將播放源添加到video的子級(jí)
      video.appendChild(source)
      //掛載到視頻容器中
      this.$refs.video.$el.appendChild(video)
      //獲取屏幕寬高計(jì)算出需要展現(xiàn)的比例
      let aspectRatio = '16:9'   //默認(rèn)橫屏
      //activityDetail變量是我業(yè)務(wù)中用到的，請(qǐng)自行根據(jù)實(shí)際情況做調(diào)整
      if (this.activityDetail.style.mode == 1) {
        //如果是豎屏模式，動(dòng)態(tài)計(jì)算出設(shè)備寬高，設(shè)定一個(gè)比例
        const systemInfo = uni.getSystemInfoSync()
        aspectRatio = systemInfo.windowWidth + ':' + systemInfo.windowHeight
      }
      let that = this
      this.videoPlayer = videojs(
        'video',
        {
          //視頻封面圖(activityDetail變量是我業(yè)務(wù)中用到的，請(qǐng)自行根據(jù)實(shí)際情況做調(diào)整)
          poster: getImageUrl(this.activityDetail.indexpic),
          //視頻標(biāo)題(activityDetail變量是我業(yè)務(wù)中用到的，請(qǐng)自行根據(jù)實(shí)際情況做調(diào)整)
          title: this.activityDetail.title,
          width: '100%',
          height: '100%',
          playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
          autoDisable: true,
          preload: 'none', //auto - 當(dāng)頁(yè)面加載后載入整個(gè)視頻 meta - 當(dāng)頁(yè)面加載后只載入元數(shù)據(jù) none - 當(dāng)頁(yè)面加載后不載入視頻
          language: 'zh-CN',
          fluid: true, // 自適應(yīng)寬高
          muted: false, //  是否靜音
          aspectRatio: aspectRatio, // 將播放器置于流暢模式，并在計(jì)算播放器的動(dòng)態(tài)大小時(shí)使用該值。值應(yīng)該代表一個(gè)比例 - 用冒號(hào)分隔的兩個(gè)數(shù)字（例如"16:9"或"4:3"）
          controls: false, //是否擁有控制條 【默認(rèn)true】,如果設(shè)為false ,那么只能通過(guò)api進(jìn)行控制了。也就是說(shuō)界面上不會(huì)出現(xiàn)任何控制按鈕
          autoplay: true, //如果true,瀏覽器準(zhǔn)備好時(shí)開(kāi)始回放。 autoplay: "muted", // //自動(dòng)播放屬性,muted:靜音播放
          loop: true, // 導(dǎo)致視頻一結(jié)束就重新開(kāi)始。 視頻播放結(jié)束后，是否循環(huán)播放
          techOrder: ['html5', 'flash'], //播放順序
          screenshot: true,
          controlBar: {
            volumePanel: {
              //聲音樣式
              inline: false // 不使用水平方式
            },
            timeDivider: true, // 時(shí)間分割線
            durationDisplay: true, // 總時(shí)間
            progressControl: true, // 進(jìn)度條
            remainingTimeDisplay: true, //當(dāng)前以播放時(shí)間
            fullscreenToggle: true, //全屏按鈕
            pictureInPictureToggle: true //畫中畫
          }
        },
        function () {
          this.on('error', function () {
            //請(qǐng)求數(shù)據(jù)時(shí)遇到錯(cuò)誤
            console.log('請(qǐng)求數(shù)據(jù)時(shí)遇到錯(cuò)誤')
          })
          this.on('stalled', function () {
            //網(wǎng)速失速
            console.log('網(wǎng)速失速')
          })
          this.on('play', function () {
            //開(kāi)始播放
            console.log('開(kāi)始播放')
            that.isPlaying = true
          })
          this.on('pause', function () {
            //暫停
            console.log('暫停')
            that.isPlaying = false
          })
          this.on('timeupdate', function () {})
        }
      )
},
//切換播放視頻
switchPlayVideo() {
  if (this.isPlaying) {
    //正在播放就暫停
    this.pauseVideo()
  } else {
    //暫停就播放
    this.playVideo()
  }
},
//播放視頻
playVideo() {
  this.videoPlayer.play()
},
//暫停播放視頻
pauseVideo() {
   this.videoPlayer.pause()
},

五、自定義的樣式

.video-display-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    //播放按鈕
    .play-btn-icon {
      position: absolute;
      z-index: 998;
      width: 100rpx;
      height: 100rpx;
    }
    //視頻蒙版
    .video-mask {
      position: absolute;
      z-index: 998;
      width: 100%;
      height: 100%;
    }
}

六、視頻畫中畫控制

（通常是頁(yè)面中彈窗打開(kāi)其他頁(yè)面，擋住了視頻播放區(qū)域的時(shí)候可以用到）

1.進(jìn)入畫中畫

this.videoPlayer.requestPictureInPicture()

2.退出畫中畫

this.videoPlayer.exitPictureInPicture()

七、注意事項(xiàng)

由于H5在安卓設(shè)備里面限制視頻一進(jìn)來(lái)就播放，必須用戶在頁(yè)面中就交互動(dòng)作的時(shí)候，才可以播放視頻，所以可能設(shè)置了播放器自動(dòng)播放沒(méi)有效果，可以在頁(yè)面中綁定一個(gè)點(diǎn)擊事件，無(wú)論用戶點(diǎn)哪，就觸發(fā)播放視頻（如果視頻未播放的時(shí)候），這樣模擬自動(dòng)播放

好像沒(méi)找到視頻本身能點(diǎn)擊的事件，就算直接在播放器容器中綁定點(diǎn)擊事件也沒(méi)有效果，所以如果需要實(shí)現(xiàn)點(diǎn)擊視頻能在播放與暫停之間切換的話，可以在視頻上面加一個(gè)透明的遮罩蒙版，層級(jí)要高于播放器，這樣在蒙版上綁定點(diǎn)擊事件就能操作起來(lái)了

文中的activityDetail和resource變量是本人業(yè)務(wù)中用到的，如果您需要使用，請(qǐng)自行替換。

以上就是uniapp中使用videojs構(gòu)建H5直播播放器的詳細(xì)內(nèi)容，更多關(guān)于uniapp videojs構(gòu)建H5播放器的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: