通过ref的使用得到video标签身上的属性及方法,然后加以控制,就实现了,最好在本地文件放一个小视频进行测试
实现思路:
html代码
<video :src="videoUrl" controls="controls" style="width:400px;height:400px;" ref="vueRef"></video>
javaScript的代码:
this.video_url='视频源url地址'
判断是否暂停状态返回true false 如下:
this.$refs.vueRef.paused //true false
通过以下方法进行视频的播放和暂停:
this.$refs.vueRef.pause();//暂停
this.$refs.vueRef.play();//播放
实现代码如下:
<!-- 视频播放弹窗 -->
<div class="video_box">
<a-modal
width="600px"
height="600px"
title="视频播放"
:visible="visible"
centered
@ok="handleOk"
@cancel="handleCancel"
>
<video
v-if="playState"
width="550"
height="400"
id="video_play"
controls
preload
webkit-playsinline="webkit-playsinline"
playsinline=""
controlslist="nodownload"
x-webkit-airplay="allow"
x5-playsinline=""
src="../../assets/wumingzhibei.mp4"
ref="vueRef"
></video>
</a-modal>
</div>
<script>
export default {
props: {
conditionsData: {
type: Array,
default: () => [
{
title: "分类",
list: [
"全部",
"展会展览",
"科技赛事",
"路演发布",
"论坛讲座",
"在线视频",
"专题培训",
],
},
{
title: "当前状态",
list: ["全部", "进行中", "已结束"],
},
],
},
},
data() {
return {
selectControl: [], //选项控制
cardArr: [1, 2, 3, 4, 5, 6],
pageSizeOptions: ["4", "20", "30", "40", "50"], // 下拉选项
current: 1, // 当前页数
pageSize: 10, // 每页几条数据
total: 50, // 总页数
input: "", // 搜索框输入的值
videoUrl:"../../assets/wumingzhibei.mp4",
play: true, // 是否显示播放图标 通过遍历的方式添加这个属性,然后根据当前的这个属性判断是否显示 把这个属性添加到item中
visible: false, // 控制弹框是否显示
playState: true, // 是否显示播放器
};
},
mounted() {
this.init();
},
methods: {
//控制选中函数
select(i, j) {
console.log(i + "--------" + j);
this.$set(this.selectControl, i, j);
// this.selectControl[i] = j
console.log(this.selectControl);
},
//页面初始化函数
init() {
this.selectControl = [];
this.conditionsData.forEach(() => {
this.selectControl.push(0);
});
console.log(this.selectControl);
},
// 当前页数
onChange(current, pageSize) {
this.current = current;
this.pageSize = pageSize;
console.log(this.current, "当前页数", this.current, "一页几条");
},
activityDetails(cardItem) {
this.$router.push({ path: "/activityDetails" });
},
// 视频弹框
showModal() {
this.visible = true;
this.playState = true;
},
handleOk(e) {
this.visible = false;
this.playState = false;
// setTimeout(() => {
// this.visible = false;
// }, 2000);
console.log(this.$refs.vueRef,666)
this.$refs.vueRef.pause();//暂停
},
handleCancel(e) {
this.visible = false;
this.$refs.vueRef.pause();//暂停
},
},
};
</script>
css自己写一下了,哈哈
// 视频弹框样式
.video_box {
background-color: rgb(0, 0, 0);
#video_play {
width: 400px;
height: 400px;
margin: auto;
background-color: rgb(38, 133, 85);
background-color: rgb(0, 0, 0);
display: block;
visibility: visible;
cursor: auto;
}
}