uniapp如何实现支持m3u8和mp4格式的播放器插件

在uniapp中如何实现一个同时支持m3u8和mp4格式的视频播放器插件？需要兼容iOS和Android平台，最好能支持自定义UI和控制条。目前尝试过官方video组件但对m3u8格式兼容性不太好，有没有成熟的插件方案或实现思路？求推荐具体的实现方法和注意事项。

2 回复

使用uniapp的video组件即可支持mp4和m3u8播放。设置src为视频链接，添加controls属性显示控制条。示例代码：

<video :src="videoUrl" controls></video>

注意：m3u8在安卓端需配置白名单，iOS端需服务器支持HTTPS。


在uni-app中实现支持M3U8和MP4格式的播放器，推荐使用以下方案：

方案一：使用官方video组件 + 条件编译

<template>
  <view>
    <!-- H5平台 -->
    <!-- #ifdef H5 -->
    <video 
      :src="videoUrl" 
      controls 
      style="width: 100%;"
    ></video>
    <!-- #endif -->
    
    <!-- App平台 -->
    <!-- #ifdef APP-PLUS -->
    <video 
      :src="videoUrl" 
      controls 
      style="width: 100%;"
      @play="onPlay"
      @pause="onPause"
    ></video>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: '' // 根据格式设置URL
    }
  },
  methods: {
    setVideoSource(url) {
      this.videoUrl = url
    },
    onPlay() {
      console.log('视频开始播放')
    },
    onPause() {
      console.log('视频暂停')
    }
  }
}
</script>

方案二：使用第三方插件（推荐）

安装uni-app视频播放器插件：

npm install @dcloudio/uni-ui

使用示例：

<template>
  <view>
    <uni-video 
      :src="videoUrl"
      :autoplay="false"
      :controls="true"
      :loop="false"
      :muted="false"
      :poster="posterUrl"
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
    />
  </view>
</template>

<script>
import uniVideo from '@dcloudio/uni-ui/lib/uni-video/uni-video'

export default {
  components: { uniVideo },
  data() {
    return {
      videoUrl: '',
      posterUrl: ''
    }
  },
  methods: {
    // 设置视频源，自动识别格式
    setVideoSource(url, poster = '') {
      this.videoUrl = url
      this.posterUrl = poster
    },
    
    onPlay() {
      console.log('视频播放')
    },
    
    onPause() {
      console.log('视频暂停')
    },
    
    onEnded() {
      console.log('视频播放结束')
    }
  }
}
</script>

方案三：自定义播放器（高级）

对于需要更多自定义功能的场景，可以封装原生播放器：

// utils/videoPlayer.js
class VideoPlayer {
  constructor(options = {}) {
    this.options = options
  }
  
  // 播放视频
  play(url) {
    if (url.endsWith('.m3u8')) {
      this.playM3U8(url)
    } else if (url.endsWith('.mp4')) {
      this.playMP4(url)
    } else {
      console.error('不支持的视频格式')
    }
  }
  
  playM3U8(url) {
    // HLS流媒体处理
    // #ifdef H5
    if (Hls.isSupported()) {
      const hls = new Hls()
      hls.loadSource(url)
      hls.attachMedia(videoElement)
    }
    // #endif
    
    // #ifdef APP-PLUS
    // App端原生支持m3u8
    this.nativePlay(url)
    // #endif
  }
  
  playMP4(url) {
    // MP4直接播放
    this.nativePlay(url)
  }
  
  nativePlay(url) {
    // 调用原生播放器
    plus.video.createVideoPlayer('videoPlayer', {
      src: url,
      top: '0px',
      left: '0px',
      width: '100%',
      height: '300px',
      position: 'static'
    })
  }
}

注意事项

  1. 平台兼容性：

    • H5平台：MP4原生支持，M3U8需要HLS.js库
    • App平台：两种格式都原生支持
    • 小程序：支持有限，需使用各平台专用API

  2. 性能优化：

    • 大视频文件建议使用流媒体
    • 合理设置视频尺寸和清晰度
    • 使用CDN加速视频加载

  3. 用户体验：

    • 添加加载状态
    • 错误处理
    • 网络状态检测

推荐使用方案二，因为它提供了更好的跨平台兼容性和更丰富的功能。

回到顶部