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组件实现视频播放的示例代码,具体使用方式可以根据自己的需求进行调整。

相关推荐
木易 士心6 小时前
Uni-App 实现多身份动态切换 TabBar 指南
uni-app
2501_915106321 天前
CDN 可以实现 HTTPS 吗?实战要点、部署模式与真机验证流程
网络协议·http·ios·小程序·https·uni-app·iphone
LoveEate2 天前
uniapp 运行/发版微信小程序
微信小程序·小程序·uni-app
fakaifa2 天前
【高级版】沃德政务招商系统源码+uniapp小程序
小程序·uni-app·源码下载·沃德政务招商系统·招商系统源码
weixin_446938872 天前
uniapp vue-i18n如何使用
前端·vue.js·uni-app
有来技术2 天前
UniApp 自定义导航栏适配指南:微信小程序胶囊遮挡、H5 与 App 全端通用方案
微信小程序·uni-app
卷Java3 天前
违规通知功能修改说明
java·数据库·微信小程序·uni-app
卷Java3 天前
用户权限控制功能实现说明
java·服务器·开发语言·数据库·servlet·微信小程序·uni-app
王佳斌4 天前
sass变量默认
uni-app
二饭4 天前
uniapp与webview通信
uni-app