通过ref的使用得到video标签身上的属性及方法,然后加以控制,就实现了,最好在本地文件放一个小视频进行测试
实现思路:
html代码
javaScript的代码:
this.video_url='视频源url地址'
判断是否暂停状态返回true false 如下:
this.$refs.vueRef.paused //true false
通过以下方法进行视频的播放和暂停:
this.$refs.vueRef.pause();//暂停
this.$refs.vueRef.play();//播放
实现代码如下:
css自己写一下了,哈哈
// 视频d框样式
.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;
}
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)