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

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

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

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