uniapp项目播放m3u8（hls）视频_uniapp hls

（一）前言

①uniapp项目，运行在手机浏览器端，需要播放m3u8类型视频。在网上找了好久教程，记录一下实现过程。
②最开始使用的是videojs，后来改用MuiPlayer，两种方式都记一下。
③m3u8就是hls 。
④在线播放m3u8视频： https://m3u8play.com/、http://tool.liumingye.cn/m3u8/（第一个播放速度比较快）
⑤用来测试的m3u8视频地址：https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8

（二）使用videojs实现

1、使用步骤

// 安装videojs
npm install --save-dev video.js
 
// 在main.js中加以下三行代码
import Videojs from '!video.js' // 一定要加!
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Videojs

// 页面使用videojs
<template>
  <view>
    <div id="app">
      <div class="video-js" ref="videos"></div>
    </div>
  </view>
</template>
 
<script>
  export default {
    mounted() {
      let video = document.createElement('video');
      video.id = 'video';
      // video.style = 'width: 100%; height: 100%;';
      // video.controls = true;
      video.preload = "auto"
      video.setAttribute('playsinline', true) //IOS微信浏览器支持小窗内播放
      video.setAttribute('webkit-playsinline', true) //这个bai属性是ios 10中设置可以让视频在小du窗内播放，也就是不是全zhi屏播放的video标签的一个属性
      video.setAttribute('x5-video-player-type', 'h5') //安卓 声明启用同层H5播放器 可以在video上面加东西
      let source = document.createElement('source');
      source.src = 'http://183.167.196.100:83/openUrl/wqzaTza/live.m3u8';
      video.appendChild(source);
      // return
      this.$refs.videos.appendChild(video);
      let that = this;
      let player = this.$video(
        'video', 
        {
          autoDisable: true,
          preload: 'none', //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: true, // 导致视频一结束就重新开始。 视频播放结束后，是否循环播放
          controlBar: {
            volumePanel: { //声音样式
              inline: true // 不使用水平方式
            },
            timeDivider: true, // 时间分割线
            durationDisplay: true, // 总时间
            progressControl: true, // 进度条
            remainingTimeDisplay: true, //当前以播放时间
            fullscreenToggle: true, //全屏按钮
            pictureInPictureToggle: false, //画中画
          }
        }, 
        function() {
          this.on('error', function(err) { //请求数据时遇到错误
            console.log("请求数据时遇到错误", err)
          });
          this.on('stalled', function(stalled) { //网速失速
            console.log("网速失速", stalled)
          });
        }
      );
    }
  }
</script>
 
<style>
  #app {
    width: 100vw;
    height: 100vh;
  }
</style>

2、参考：videojs官网、uni-app npm方式引入video.js教程 支持H5播放m3u8、mp4等格式视频文件_uniapp video.js-CSDN博客

3、未解决问题：项目运行在pc端的谷歌浏览器，可以展示视频，但是控制条样式比较丑，而且不显示时间条，代码中已经加了时间条的东西，但是还是不显示，也没有成功改掉控制条样式。

（三）使用MuiPlayer实现

1、使用步骤

// 安装MuiPlayer
npm i mui-player --save
npm install hls.js --save

// 在页面中使用MuiPlayer
<template>
  <view>
    <div id="mui-player"></div>
  </view>
</template>
 
<script>
  import 'mui-player/dist/mui-player.min.css'
  import MuiPlayer from 'mui-player';
  import Hls from 'hls.js'
 
  export default {
    data() {
      return {
        mp:null,
      };
    },
    onShow(){
      this.$nextTick(()=>{
          // 初始化 MuiPlayer 插件，MuiPlayer 方法传递一个对象，该对象包括所有插件的配置
          this.mp = new MuiPlayer({
              container:document.getElementById("mui-player"),
              src:'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
              parse:{
                  type:'hls',
                  loader:Hls,
                  config:{ // hls config to：https://github.com/video-dev/hls.js/blob/HEAD/docs/API.md#fine-tuning
                      debug:false,
                  },
              },
              pageHead:false,
          });
      })
      
    },
    onUnload(){
      this.mp.destroy()
    },
 }
</script>

2、主要参考MuiPlayer官网：介绍 | MuiPlayer

（四）其他

1、推荐MuiPlayer，官网不用科学上网就能访问且文档易读使用方便，最主要的是它的控制条很正常；

2、后面又发现一篇使用videojs的文章，没试过，需要的可以试一下：记一次vue播放flv、hls(m3u8)视频的经历 - 掘金