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

相关推荐
开开心心就好30 分钟前
高效Excel合并拆分软件
开发语言·javascript·c#·ocr·排序算法·excel·最小二乘法
難釋懷30 分钟前
Vue解决开发环境 Ajax 跨域问题
前端·vue.js·ajax
特立独行的猫a35 分钟前
Nuxt.js 中的路由配置详解
开发语言·前端·javascript·路由·nuxt·nuxtjs
中微子37 分钟前
小白也能懂:JavaScript 原型链和隐藏类的奇妙世界
javascript
咸虾米38 分钟前
在uniCloud云对象中定义dbJQL的便捷方法
前端·javascript
梨子同志39 分钟前
JavaScript Proxy 和 Reflect
前端·javascript
海的诗篇_41 分钟前
移除元素-JavaScript【算法学习day.04】
javascript·学习·算法
汤圆炒橘子42 分钟前
状态策略模式的优势分析
前端
__Yx__44 分钟前
JavaScript核心概念输出——原型链
javascript
90后的晨仔1 小时前
解析鸿蒙 ArkTS 中的 Union 类型与 TypeAliases类型
前端·harmonyos