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

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

<!-- 播放器顯示區(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ū)域 -->

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

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

#示例代碼,部分變量是業(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è)置好播放類(lèi)型
      if (source.src.indexOf('.mp4') !== -1) {
        //mp4類(lèi)型
        source.type = 'video/mp4'
      } else if (source.src.indexOf('.m3u8') !== -1) {
        //hls類(lèi)型
        source.type = 'application/x-mpegURL'
      } else if (source.src.indexOf('.flv') !== -1) {
        //flv類(lèi)型
        source.type = 'video/flv'
      } else {
        //rtmp類(lèi)型
        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í)間分割線(xiàn)
            durationDisplay: true, // 總時(shí)間
            progressControl: true, // 進(jìn)度條
            remainingTimeDisplay: true, //當(dāng)前以播放時(shí)間
            fullscreenToggle: true, //全屏按鈕
            pictureInPictureToggle: true //畫(huà)中畫(huà)
          }
        },
        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%;
    }
}

this.videoPlayer.requestPictureInPicture()

this.videoPlayer.exitPictureInPicture()