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

相关推荐
2501_9160074744 分钟前
iOS 代上架实战指南,从账号管理到使用 开心上架 上传IPA的完整流程
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915918411 小时前
iOS混淆与IPA文件加固深度解析,从反编译风险到苹果应用安全工程实践
android·macos·ios·小程序·uni-app·cocoa·iphone
毛毛三由12 小时前
【uniapp】微信小程序修改按钮样式
微信小程序·小程序·uni-app
巴博尔12 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
技术钱12 小时前
uniapp使用音频录音功能
chrome·uni-app·音视频
焚 城12 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
2501_9160074719 小时前
iOS 26 软件性能测试 新版系统下评估全流程 + 多工具辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
xiaohe060120 小时前
🎉 Uni ECharts 2.0 正式发布:原来在 uni-app 中使用 ECharts 可以如此简单!
uni-app·echarts
00后程序员张20 小时前
Swoole HTTPS 实战,在生产环境部署、性能权衡与排查流程
后端·ios·小程序·https·uni-app·iphone·swoole
2501_915909061 天前
iOS App 上架全流程详解:证书配置、打包上传、审核技巧与跨平台上架工具 开心上架 实践
android·ios·小程序·https·uni-app·iphone·webview