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

相关推荐
Renounce几秒前
【Android】让 Android 界面 “动” 起来:动画知识点大起底
前端
Asort2 分钟前
JavaScript设计模式(十四)——命令模式:解耦请求发送者与接收者
前端·javascript·设计模式
小茴香35310 分钟前
Vue 脚手架(Vue CLI)
前端·javascript·vue.js
午安~婉16 分钟前
ESLint
前端·eslint·检查
“抚琴”的人16 分钟前
C#中获取程序执行时间
服务器·前端·c#
2501_9160074727 分钟前
iOS 26 软件性能测试 新版系统下评估全流程 + 多工具辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
掘金一周27 分钟前
Flex 布局下文字省略不生效?原因其实很简单| 掘金一周 10.16
前端
你的电影很有趣28 分钟前
lesson72:Node.js 安全实战:Crypto-Js 4.2.0 与 Express 加密体系构建指南
javascript·安全·node.js
Stringzhua32 分钟前
Vue的Axios介绍【9】
前端·javascript·vue.js
渣哥36 分钟前
从 READ_UNCOMMITTED 到 SERIALIZABLE:Spring 事务隔离级别全解析
javascript·后端·面试