uniappx hls如何实现流媒体播放

在uniappx中如何实现HLS流媒体播放？我尝试使用video组件播放m3u8格式的视频流，但无法正常加载。是否需要引入额外的插件或进行特殊配置？官方文档中相关说明较少，希望能提供具体的实现方案或示例代码。另外，在安卓和iOS平台上是否存在兼容性问题需要注意？

2 回复

在uniappx中，使用video组件，设置src为HLS流地址，并添加type="hls"属性即可播放。


在 UniApp X 中，可以通过以下方式实现 HLS 流媒体播放：

1. 使用 video 组件（推荐）

<template>
  <view class="container">
    <video 
      id="myVideo"
      src="https://example.com/stream.m3u8"
      autoplay
      controls
      @error="onVideoError"
      style="width: 100%; height: 400rpx;"
    ></video>
  </view>
</template>

<script>
export default {
  setup() {
    const onVideoError = (e) => {
      console.error('视频播放错误:', e.detail.errMsg)
    }
    
    return {
      onVideoError
    }
  }
}
</script>

2. 使用 createVideoContext 控制播放

// 在页面中
import { getCurrentInstance } from '@vue/composition-api'

export default {
  setup() {
    const instance = getCurrentInstance()
    
    const playVideo = () => {
      const videoContext = uni.createVideoContext('myVideo', instance)
      videoContext.play()
    }
    
    const pauseVideo = () => {
      const videoContext = uni.createVideoContext('myVideo', instance)
      videoContext.pause()
    }
    
    return {
      playVideo,
      pauseVideo
    }
  }
}

3. 完整示例

<template>
  <view class="container">
    <video 
      id="hlsVideo"
      :src="videoUrl"
      :autoplay="autoplay"
      :controls="true"
      :loop="false"
      :muted="false"
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
      @error="onError"
      style="width: 100%; height: 400rpx;"
    ></video>
    
    <view class="controls">
      <button @click="play">播放</button>
      <button @click="pause">暂停</button>
      <button @click="seek">跳转到30秒</button>
    </view>
  </view>
</template>

<script>
export default {
  setup() {
    const videoUrl = ref('https://example.com/live/stream.m3u8')
    const autoplay = ref(false)
    
    const videoContext = ref(null)
    
    onMounted(() => {
      // 获取视频上下文
      const instance = getCurrentInstance()
      videoContext.value = uni.createVideoContext('hlsVideo', instance)
    })
    
    const play = () => {
      videoContext.value?.play()
    }
    
    const pause = () => {
      videoContext.value?.pause()
    }
    
    const seek = () => {
      videoContext.value?.seek(30)
    }
    
    const onPlay = () => {
      console.log('视频开始播放')
    }
    
    const onPause = () => {
      console.log('视频暂停')
    }
    
    const onEnded = () => {
      console.log('视频播放结束')
    }
    
    const onError = (e) => {
      console.error('播放错误:', e.detail.errMsg)
    }
    
    return {
      videoUrl,
      autoplay,
      play,
      pause,
      seek,
      onPlay,
      onPause,
      onEnded,
      onError
    }
  }
}
</script>

注意事项：

  1. HLS 支持：UniApp X 内置的 video 组件支持 HLS 格式，但需要确保目标平台（iOS/Android）支持
  2. 跨域问题：确保视频源服务器配置了正确的 CORS 策略
  3. 格式兼容：不同平台对 HLS 的支持程度可能有所不同
  4. 性能优化：对于长视频，建议使用分段的 m3u8 文件

平台差异：

  • iOS：原生支持 HLS
  • Android：需要系统版本支持，建议 Android 5.0+
  • Web：需要浏览器支持 Media Source Extensions

这种方式简单易用，适合大多数 HLS 流媒体播放场景。

回到顶部