当前位置：首页 > uni-app

uniapp播放视频流

2026-02-06 07:57:55uni-app

uniapp播放视频流的方法

uniapp支持通过多种方式播放视频流，包括使用内置组件和第三方插件。以下是几种常见的实现方式：

使用`video`组件播放

uniapp内置的video组件可以用于播放视频流。需要在template中声明video标签，并通过src属性指定视频流地址。

<template>
  <view>
    <video 
      :src="videoUrl" 
      controls 
      autoplay 
      style="width: 100%;"
    ></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: 'http://example.com/live/stream.m3u8' // HLS流地址
    }
  }
}
</script>

使用RTMP协议播放

对于RTMP协议的直播流，需要使用第三方插件如uni-media或自定义原生插件。以下是一个使用uni-media插件的示例：

uniapp播放视频流

安装uni-media插件
在页面中引入并使用：

<template>
  <view>
    <uni-media 
      :src="rtmpUrl" 
      type="rtmp"
      autoplay
    ></uni-media>
  </view>
</template>

<script>
import uniMedia from '@/components/uni-media/uni-media.vue'
export default {
  components: { uniMedia },
  data() {
    return {
      rtmpUrl: 'rtmp://example.com/live/stream'
    }
  }
}
</script>

使用WebRTC播放

对于WebRTC视频流，可以通过video标签直接播放，但需要确保浏览器支持：

<template>
  <view>
    <video 
      :srcObject="stream" 
      autoplay
      playsinline
      style="width: 100%;"
    ></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stream: null
    }
  },
  mounted() {
    // 获取WebRTC流
    navigator.mediaDevices.getUserMedia({ video: true })
      .then(stream => {
        this.stream = stream
      })
  }
}
</script>

使用HLS.js播放

对于复杂的HLS流处理，可以引入HLS.js库：

uniapp播放视频流

安装HLS.js：
```
npm install hls.js
```

在页面中使用：


<template>
<view>
 <video 
   id="hlsVideo" 
   controls 
   style="width: 100%;"
 ></video>
</view>
</template>

import Hls from 'hls.js' export default { mounted() { const video = document.getElementById('hlsVideo') const hls = new Hls() hls.loadSource('http://example.com/live/stream.m3u8') hls.attachMedia(video) hls.on(Hls.Events.MANIFEST_PARSED, () => { video.play() }) } } ```