概要
因为在Vue项目可视化数据平台中加入公司宣传视频介绍,于是记录下学习video组件的使用方法
使用流程
因为使用的是Vue2框架搭建的可视化平台,我们直接使用提供的标签。
- 首先我们需要创建一个独立的组件文件(随便取个名)
2.在center-map.vue文件中添加如下代码
<template>
<div class="video-container">
/* 因为谷歌禁止了自动播放功能,但是当你开启了静音之后,自动播放就可以开启。
muted(静音) autoplay(自动播放) @ended监听是否结束 结束调用该方法 */
<video ref="videoPlayer" muted autoplay controls style="border-radius: 10px;width: 650px;height: 600px;" @ended="restartVideo" >
<source :src="videoSource" type="video/mp4">
浏览器不支持.
</video>
</div>
</template>
<script>
export default {
props: {
videoSource: {
type: String,
required: true
}
},
methods: {
//该方法是为了让视频一直播放 可以不加
restartVideo() {
// 当视频结束时,将当前播放时间设置为0,实现重新开始
this.$refs.videoPlayer.currentTime = 0;
// 播放视频
this.$refs.videoPlayer.play();
}
},
}
</script>
<style scoped>
/* 添加样式 */
.video-container {
margin: 20px;
}
</style>
3.然后在父组件中调用center-map.vue
<template>
<div>
/* 填路径地址 */
<Video :videoSource="require('@/assets/videos/your-video.mp4')" />
</div>
</template>
<script>
import Video from '@/components/Video.vue';
export default {
components: {
Video
}
}
</script>
我的目录结构是这样。所以代码中的结构是这样:videoSource=“require(‘@/assets/video/xc.mp4’)”
4.样式展示