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

相关推荐
zhuà!6 分钟前
uv-picker在页面初始化时,设置初始值无效
前端·javascript·uv
Amumu121387 分钟前
React应用
前端·react.js·前端框架
摸鱼的春哥11 分钟前
实战:在 Docker (Windows) 中构建集成 yt-dlp 的“满血版” n8n 自动化工作流
前端·javascript·后端
_Rookie._12 分钟前
关于迭代协议:可迭代协议和迭代器协议,生成器函数 生成器对象的理解
javascript·python
小酒星小杜16 分钟前
在AI时代,技术人应该每天都要花两小时来构建一个自身的构建系统
前端·vue.js·架构
测试游记17 分钟前
基于 FastGPT 的 LangChain.js + RAG 系统实现
开发语言·前端·javascript·langchain·ecmascript
阿奇__18 分钟前
elementUI table 多列排序并保持状态样式显示正确(无需修改源码)
前端·vue.js·elementui
Van_captain22 分钟前
rn_for_openharmony常用组件_Empty空状态
javascript·开源·harmonyos
zhengxianyi51523 分钟前
数据大屏-单点登录ruoyi-vue-pro
前端·javascript·vue.js
我想回家种地26 分钟前
python期末复习重点
前端·javascript·python