废话不多说直接上代码!!!
<template>
<!-- Video组件 -->
<div id="common-video" >
<div >
<video
ref="myVideo"
:poster="poster"
src="src"
:controls="controls"
oncontextmenu="return false" //禁止下载
controlslist="nodownload"
class="video-box"
loop="loop" //自动播放
/>
</div>
</div>
</template>
<script>
export default {
name: 'CommonVideo',
/**
* poster 展示图
* src 视频路径
* controls 是否显示控件
*/
props: {
poster: {
type: String,
required: false,
default: ''
},
controls: {
type: Boolean,
required: false,
default: true
}
},
data() {
return {
videoSrc: require('@/assets/operating/[余罪][第2季]第10集_hd.mp4')
}
},
mounted() {
this.$refs.myVideo.src = this.videoSrc
// 监听视频播放
this.$refs.myVideo.addEventListener('play', () => {})
// 监听视频暂停
this.$refs.myVideo.addEventListener('pause', () => {})
}
}
</script>
<style lang="scss" scoped>
#common-video {
width: 100%;
height: 100%;
background-color: #000;
position: relative;
> div {
width: 100%;
height: 100%;
}
.video-box {
box-sizing: border-box;
border: 0;
display: block;
width: 100%;
height: 100%;
outline: none !important;
}
}
</style>
注释:
我这边使用的是本地视频 线上链接的话替换VideoSrc就可以了