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

相关推荐
谷谷地图下载器17 小时前
全球、台湾省的无水印·街景数据(离线数据),专为可视化项目定制,支持国产化
javascript·c++·3d·arcgis·sqlite
万少17 小时前
如果你要自动化操作浏览器,Kimi-WebBridge可能适合你
前端·javascript·后端
韩曙亮17 小时前
【错误记录】flutter attach 附加设备 执行报错 ( 附加设备注意事项 )
android·javascript·flutter·flutter attach
倾颜17 小时前
React 自定义 Hook 实战:把 AI Chat 的会话流和滚动体验从组件中拆出来
前端·react.js·next.js
vipbic18 小时前
从一句话需求到可交互草图,我用 AI 设计了一个团队组件共享平台
前端
小小前端--可笑可笑18 小时前
【Web 流媒体三部曲之一】直播、点播与 WebRTC 是什么?
前端·webrtc
gCode Teacher 格码致知18 小时前
Javascript提高:冒泡和捕获的典型案例-由Deepseek产生
前端·javascript
蒟蒻星球住民18 小时前
web应用技术作业01
前端·javascript·firefox
Csvn18 小时前
前端团队协作
前端
道友可好18 小时前
Superpowers:给 AI 编程助手装上超能力
前端·人工智能·后端