h5支持m3u8格式播放（videojs 与 腾讯tcplayer）

videojs

	//app.vue引入css样式
	 loadCss () {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.charset = 'utf-8'
      link.href = 'https://cdn.bootcss.com/video.js/6.3.3/video-js.min.css'
      document.head.appendChild(link)
    }

	//使用的vue文件
	import videojs from 'video.js'
	// 合适位置调用
   initVideo (src) {
      // if (!this.detailData) {
      //   return
      // }
      // #ifdef H5
      var video = document.createElement('video')
      video.id = 'video'
      video.style = 'width: 100%;height: 100%;'
      video.controls = true
      video.setAttribute('playsinline', true)
      video.setAttribute('x5-video-player-type', 'h5')
      video.setAttribute('webkit-playsinline', true)
      var source = document.createElement('source')
      // source.src = this.detailData.videoUrl
      source.src = src
      // source.src = 'https://sdcms-1253457213.cos.ap-guangzhou.myqcloud.com/dyx-oss/1610852402209%E6%B5%8B%E8%AF%95%E8%A7%86%E9%A2%91.mp4'
      source.type = 'application/x-mpegURL'
      // source.type = 'video/mp4'
      video.appendChild(source)
      const videoBox = document.getElementById('zlz')
      videoBox.appendChild(video)
      const that = this
      that.player = videojs(video, {
        // poster: that.detailData.head_img, // 视频封面图地址
        src: that.detailData.liveUrl,
        type: 'application/x-mpegURL',
        title: '12334567788999900',
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoDisable: true,
        preload: 'auto', // auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频
        language: 'zh-CN',
        fluid: true, // 自适应宽高
        muted: false, // 是否静音
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        controls: true, // 是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
        autoplay: false, // 如果true,浏览器准备好时开始回放。 autoplay: "muted", // //自动播放属性,muted:静音播放
        loop: false, // 导致视频一结束就重新开始。 视频播放结束后，是否循环播放
        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('开始播放')
        })
        this.on('pause', function () { // 暂停
          console.log('暂停')
        })
        this.on('timeupdate', function () {
          // console.log(this.currentTime())
        })
      })
      // #endif
    },
    ps://兼容新教差

腾讯TcPlayer

在app.vue引入
const script1 = document.createElement('script')
script1.charset = 'utf-8'
script1.src = 'https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.1.js'
document.head.appendChild(script1)

// 使用的地方
<div class="video"  id="player-container-id"></div>
initVideo1 (src, coverImage) {
      // const video = document.getElementById('player-container-id')
      // console.log(video)
      this.player = new TcPlayer('player-container-id', {
        m3u8: src,
        autoplay: false,
        poster: { style: 'default', src: coverImage },
        width: '100%',
        height: '100%',
        live: true,
        controlBar: {
          playToggle: false
        },
        listener: function(msg){
          console.log(msg)
          if (msg.type === 'error') {
            let errorMsg = ''
            switch (msg.detail.code) {
              case 2:
                errorMsg = '无法加载视频文件，请检查网络，以及视频文件是否允许跨域请求访问，m3u8文件是否存在'
                break

              default:
                errorMsg = '直播加载失败'
                break
            }
            uni.showToast({
              title: errorMsg,
              icon: 'none',
              duration: 2000
            })
          }
        }
      })
    },