vue视频播放组件
vue视频播放组件(原生html封装)PS:视频链接是后台爬虫抓取的注意:this.$refs.video.src = this.videoUrl 此行很重要,在父组件传入src后,mounted里面进行赋值(没有出现跨域的问题,要么是链接失效,只要链接没问题就能播放)<template><!-- 视频查看 --><div class="PlayVideo" v-if
·
vue视频播放组件(原生html封装)
PS:视频链接是后台爬虫抓取的
特别注意: 需要在html里面设置属性,加一个meta就ok,不然很多视频会报403错误
<meta name="referrer" content="never">
<!-- referer 的 metadata 属性可以设置 content 属性值为以下:-->
<!--origin :只发送 origin 部分;-->
<!--default :若当前页面使用的是 https 协议,而正要加载资源使用的是普通的 http 协议,则将 http header 中的 referer 置空;-->
<!--never :删除 http header 中的 referer,所有从当前页面发起的请求将不会携带 referer;-->
<!--always :不改变 http header 中的 referer 的值-->
注意:this.$refs.video.src = this.videoUrl 此行很重要,在父组件传入src后,mounted里面进行赋值(设置meta后没有出现跨域的问题,要么是链接失效,只要链接没问题就能播放)
手机端不能自动播放问题:
由于移动端需要用户产生交互,因此在video标签上设置autoplay属性是不太行的。如果想实现点开后自动播放,需要手动添加播放事件。在mounted里面获取到video组件,直接video.play()
就ok了。
<template>
<!-- 视频查看 -->
<div class="PlayVideo" v-if="show">
<!-- 关闭按钮 -->
<div class="close">
<img src="~@assets/imgs/rtps-icon/close.png" alt="" @click="close" />
</div>
<!-- 视频播放 -->
<video
class="video"
controls=""
ref="video"
id="video"
v-on:error.prevent="error($event)"
>
</video>
<!-- 信息提示 -->
<div class="msg" v-if="isError">
<div style="color: #fff">{{errMsg}}</div>
</div>
</div>
</template>
<script>
export default {
name: "PlayVideo",
props: ["videoUrl"],
data() {
return {
// videoUrls: ''
show: true,
isError: false, // 是否不能播放视频
errMsg: "",
};
},
computed: {},
components: {},
mounted() {
this.$refs.video.src = this.videoUrl
let video = document.getElementById("video");
// 如果是手机端,在挂载时播放
if(this.isMobile){
video.play()
}
},
methods: {
close() {
this.show = false;
this.$emit("close");
},
error(e) {
console.log(e);
if(this.videoUrl == ''){
this.isError = true
this.errMsg = "该文章暂无视频!"
}else{
this.isError = true
this.errMsg = "视频链接失效!无法播放!"
}
},
},
};
</script>
<style lang='scss' scoped>
.PlayVideo {
width: 45.3125vw;
height: 50.1vh;
position: relative;
// z-index: 99999;
// background: rgba(0, 0, 0, 0.5);
.close {
position: absolute;
top: -32px;
right: -32px;
z-index: 9999;
}
.video {
width: 45.3125vw;
height: 50.1vh;
background: #000;
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%,-50%);
// z-index: 100000;
}
.msg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
}
}
</style>
效果图
更多推荐
已为社区贡献1条内容
所有评论(0)