uniapp如何给视频组件设置图片

要给uniapp的视频组件设置图片,可以使用poster属性。poster属性用于设置视频播放前显示的图片,可以是远程图片的链接或本地图片的路径。

html 复制代码
<template>
  <view>
    <video :src="videoUrl" :poster="posterUrl" controls></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: 'http://example.com/video.mp4',
      posterUrl: 'http://example.com/poster.jpg'
    }
  }
}
</script>

video组件的src属性设置了视频的链接,poster属性设置了显示的图片链接。可以将posterUrl替换为本地图片的路径,如/static/poster.jpg

注意:poster属性只在视频加载前显示,视频加载后会自动隐藏。如果需要在视频播放过程中显示图片,可以使用cover-view组件来覆盖在video组件上方。

相关推荐
Slow菜鸟几秒前
JavaScript与UniApp、Vue、React的关系
javascript·vue.js·uni-app
苦逼的老王2 分钟前
java之uniapp实现门店地图
java·开发语言·uni-app
VT.馒头10 分钟前
【力扣】2629. 复合函数——函数组合
前端·javascript·算法·leetcode
程序猿--豪10 分钟前
前端技术百宝箱
javascript·vue.js·react.js·webpack·gitee·css3·html5
程序员buddha10 分钟前
ThinkPHP8.0+MySQL8.0搭建简单实用电子证书查询系统
javascript·css·mysql·php·layui·jquery·html5
╰つ゛木槿12 分钟前
NPM安装与配置全流程详解(2025最新版)
前端·npm·node.js
每天吃饭的羊29 分钟前
React 性能优化
前端·javascript·react.js
hzw05101 小时前
使用pnpm管理前端项目依赖
前端
小柚净静1 小时前
npm install vue-router 无法解析
javascript·vue.js·npm
风清扬雨1 小时前
Vue3中v-model的超详细教程
前端·javascript·vue.js