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

相关推荐
henujolly1 小时前
ethers.js读取合约信息
开发语言·javascript·区块链
毕设源码-郭学长2 小时前
【开题答辩全过程】以 基于Web的高校课程目标达成度系统设计与实现为例,包含答辩的问题和答案
前端
wuhen_n2 小时前
高阶函数与泛型函数的类型体操
前端·javascript·typescript
POLITE33 小时前
Leetcode 437. 路径总和 III (Day 16)JavaScript
javascript·算法·leetcode
1登峰造极3 小时前
uniapp 运行安卓报错reportJSException >>>> exception function:createInstanceContext, exception:white screen
android·java·uni-app
難釋懷3 小时前
解决状态登录刷新问题
java·开发语言·javascript
ヤ鬧鬧o.3 小时前
多彩背景切换演示
前端·css·html·html5
一起养小猫3 小时前
Flutter实战:从零实现俄罗斯方块(三)交互控制与事件处理
javascript·flutter·交互
lethelyh3 小时前
Vue day1
前端·javascript·vue.js
酉鬼女又兒3 小时前
SQL113+114 更新记录(一)(二)+更新数据知识总结
java·服务器·前端