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

相关推荐
无限大68 分钟前
为什么计算机要使用二进制?——从算盘到晶体管的数字革命
前端·后端·架构
良木林18 分钟前
字节前端高频面试题试析
前端
一 乐20 分钟前
家政管理|基于SprinBoot+vue的家政服务管理平台(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot
fruge24 分钟前
图片优化终极指南:WebP/AVIF 选型、懒加载与 CDN 配置
前端
掘金一周25 分钟前
数据标注平台正式上线啦! 标注赚现金,低门槛真收益 | 掘金一周 12.10
前端·人工智能·后端
Macbethad32 分钟前
工业触摸屏技术指南:选型、难点与实战解决方案
服务器·前端·数据库
cc蒲公英35 分钟前
vue 对象、数组增删改,对比vue2和vue3 —— 最新总结2025
前端·javascript·vue.js
wordbaby39 分钟前
queries(查询)
前端·react.js
创码小奇客1 小时前
Trae Solo模式实战:我用3小时撸了个儿童睡前故事网页
前端·javascript·人工智能
Jing_Rainbow1 小时前
【AI-9/Lesson30(2025-11-12)】AI + Vibe Coding:Hulk 浏览器扩展开发全解析 —— 从需求文档到实战的完整指南🌈
前端·人工智能·程序员