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

相关推荐
KenXu3 分钟前
F2C-Chrome插件-Figma免费的DevMode来了!
前端
北海几经夏9 分钟前
React组件中的this指向问题
前端·react.js
程序媛李李李李李蕾15 分钟前
你不能直接用现成的吗?整个前端做笔记管理工具真是折腾人
javascript·vue.js·后端
passer98122 分钟前
列表项切换时同步到可视区域
前端
FogLetter24 分钟前
移动端适配的终极奥义:从lib-flexible到postcss-pxtorem的全方位指南
前端·postcss
易元25 分钟前
设计模式-访问者模式
前端·后端·设计模式
兵临天下api25 分钟前
Elasticsearch 查询性能优化:从 3 秒到 300ms 的 6 个核心参数调优指南
前端
整点可乐26 分钟前
cesium实现鹰眼图
javascript·cesium
艾小码27 分钟前
Web存储指南:彻底掌握localStorage与sessionStorage
javascript
子林super33 分钟前
y1新建cluster集群redis
前端