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

相关推荐
暴富暴富暴富啦啦啦7 分钟前
Map 缓存和拿取
前端·javascript·缓存
天问一7 分钟前
前端Vue使用js-audio-plugin实现录音功能
前端·javascript·vue.js
dodod201210 分钟前
Ubuntu24.04.3执行sudo apt install yarnpkg 命令失败的原因
java·服务器·前端
00后程序员张13 分钟前
fastlane 结合 appuploader 命令行实现跨平台上传发布 iOS App
android·ios·小程序·https·uni-app·iphone·webview
小魏的马仔16 分钟前
【elementui】el-date-picker日期选择框,获取焦点后宽度增加问题调整
前端·vue.js·elementui
JarvanMo19 分钟前
想让你的 Flutter UI 更上一层楼吗?
前端
代码不停24 分钟前
前端基础知识
javascript·css·html
soul g25 分钟前
npm 包发布流程
前端·npm·node.js
山风wind33 分钟前
设计模式-单例模式详解
开发语言·javascript·ecmascript