uniapp视频播放功能

UniApp提供了多种视频播放组件,包括视频播放器(video)、多媒体组件(media)、WebView(内置Video标签)等。其中,video和media组件是最常用的。

video组件

video组件是基于HTML5 video标签的UniApp视频播放组件,支持常见的视频格式(如MP4、M4V、MOV等)。使用video组件需要引入uni-ui组件库。

示例代码:

复制代码
<template>
  <view>
    <video
      id="myVideo"
      :src="src"
      :controls="controls"
      :autoplay="autoplay"
      style="width: 100%; height: 300px;"
    ></video>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        src: 'http://example.com/video.mp4',  // 视频地址
        controls: true,  // 是否显示控制条
        autoplay: false,  // 是否自动播放
      }
    },
  }
</script>

media组件

media组件是基于uni-app原生组件的视频播放组件,支持更多视频格式(如FLV、RTMP等)。使用media组件需要在App.vue中全局引入uni-plugin-aliplayer插件。

示例代码:

复制代码
<template>
  <view>
    <media
      class="aliplayer-wrapper"
      :source="source"
      :autoplay="autoplay"
      :controls="controls"
      :muted="muted"
      width="100%"
      height="300px"
    ></media>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        source: {
          type: 'video',
          sources: [
            {
              type: 'video/mp4',
              src: 'http://example.com/video.mp4',
            },
          ],
        },
        autoplay: false,  // 是否自动播放
        controls: true,  // 是否显示控制条
        muted: false,  // 是否静音
      }
    },
  }
</script>

<style>
  .aliplayer-wrapper {
    height: 100% !important;
  }
</style>

以上是使用video和media组件实现视频播放的示例代码,具体使用方式可以根据自己的需求进行调整。

相关推荐
耶啵奶膘3 小时前
uniapp——地图路线绘制map
uni-app
shadouqi3 小时前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩4 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
菌菇汤7 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
某公司摸鱼前端14 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
遗憾随她而去.17 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
牧杉-惊蛰21 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
Little_Code1 天前
uniapp 使用ffmpeg播放rtsp
ffmpeg·uni-app·rtsp
儿歌八万首1 天前
uniapp 和原生插件交互
uni-app·交互
儿歌八万首1 天前
UniApp 中实现智能吸顶 Tab 标签导航效果
前端·javascript·uni-app