vue显示video
时间: 2023-09-01 08:09:25 浏览: 57
回答: 要在Vue中显示视频,你可以使用Video组件。首先,在要使用的页面中引入Video组件,并在data中设置视频的src和poster属性。然后,在模板中使用Video组件,并将src和poster属性绑定到对应的值上。例如,你可以这样写:
```html
<template>
<div>
<h2 class="mb10">Video 播放器基本使用</h2>
<Video :src="src" :poster="poster" />
</div>
</template>
<script>
import Video from 'components/Video'
export default {
name: 'VideoPlay',
components: {
Video
},
data () {
return {
src: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/Bao.mp4',
poster: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/bao.jpg'
}
}
}
</script>
```
在这个例子中,我们引入了Video组件,并在data中设置了视频的src和poster属性。然后,在模板中使用Video组件,并将src和poster属性绑定到对应的值上。这样就可以在Vue中显示视频了。\[1\]
另外,你还可以根据需要设置视频的preload属性和poster的缩放规则。preload属性可以设置为auto、metadata或none,用于控制视频在页面加载后的加载行为。poster的缩放规则可以设置为none、fill、contain或cover,用于控制默认图片和视频内容的缩放方式。\[2\]\[3\]
#### 引用[.reference_title]
- *1* *2* *3* [Vue2视频播放(Video)](https://blog.csdn.net/Dandrose/article/details/127249685)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]