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组件上方。

相关推荐
Mr_pyx3 分钟前
CompletableFuture 使用全攻略:从异步编程到异常处理
linux·前端·python
Hello--_--World3 分钟前
React:状态管理 官网笔记
前端·笔记·react.js
花归去4 分钟前
a-table 冻结列导致边框
前端·css·css3
kuuailetianzi4 分钟前
Vue 3图片全屏预览组件:打造专业级图像浏览体验
前端·javascript·microsoft
前端杂货铺6 分钟前
manifold-3d——在 Vue 项目中实现干涉检查
前端·vue.js·manifold
恋猫de小郭12 分钟前
Bun 官方将正式支持 Android,Claude Code 未来可以直接在手机上跑
android·前端·ai编程
晓得迷路了23 分钟前
栗子前端技术周刊第 126 期 - Rspack 2.0、TypeScript 7.0 Beta、Git 2.54...
前端·javascript·ai编程
nLYA SCOL24 分钟前
MySQL数据的增删改查(一)
android·javascript·mysql
小小码农Come on24 分钟前
单例 QtObject 全局配置
开发语言·前端·javascript
摸鱼仙人~25 分钟前
HTTP状态码全量详解(定义+核心区别+业务场景+前端常见诱因+排查方案+工程处理)
前端·网络协议·http