vue 中自定义按钮实现video暂停和播放

video视频中加暂停按钮

dom元素如下代码块:

<div class="videoShow"><video src="../assets/1.mp4" style="width:100%;height:100%" id="videoBox" controls="controls" ref="videoPlay"> 您的浏览器不支持视频播放</video><div class="video-img" v-show='plays'  @click="videoImg"><img src="../assets/img/newImg/play.png"></div>
</div>

JS元素如下代码块:

videoImg: function (){this.plays=false;this.$refs["videoPlay"].play();//或者//var video=document.getElementById("videoBox");//video.play();//暂停//video.pause();},

css代码块

//视频
.videoShow{width: 100%;height:600px;padding: 10px 0 50px;position: relative;
}
#videoBox{object-fit:fill;border-radius: 8px;display: inline-block;vertical-align: baseline;
}
.video-img{position: absolute;top: 0;bottom: 0;width: 100%;z-index: 999;background-size:100%;cursor:pointer;img{display:block;width: 60px;height: 60px;position: relative;top:260px;left: 48%;}
}
//解决视频有黑色的线框
video:focus {outline: -webkit-focus-ring-color auto 0px;}

vue 中自定义按钮实现video暂停和播放相关推荐

vue中防止按钮重复点击提交的方法
vue中防止按钮重复点击提交的方法 vue中防止按钮重复点击提交的方法一.自定义全局指令二.自定义局部指令三.动态控制disabled属性 vue中防止按钮重复点击提交的方法经常会遇到的一个问 ...
Vue中自定义标签及其使用
Vue中自定义标签及其使用问题需求自定义创建组件的vue文件编辑组件使用导入申明使用使用整个代码效果问题我们在使用Vue开发移动端应用程序时,常常使用Vant Weapp中的 ...
Vue - 超详细 “横向滚动“ 弹幕效果功能组件源码，类似视频与直播间的发言弹幕（支持自定义弹幕样式 / 开启暂停弹幕播放 / 清空弹幕 / 修改弹幕移动速度 / 发送插入自己的弹幕并高亮显示等）
前言网上的教程都太乱了,并且全是 BUG 根本无法改造到自己的项目中去. 本文实现了在 Vue / Nuxt 项目中,实现弹幕飘过的效果,支持网络请求数据 / 自定义弹幕样式 / 开启暂停弹幕播放 ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
VUE中自定义步骤条
VUE中自定义步骤条下列自定义步骤条是根据elementUI中的el-step的样式改编而得.记录下自己改编过程!!! <template><div class='steps el ...
vue中自定义组件的命名规则
问题 vue中自定义的组件名在html中字母大写会报错 html: js: 自定义的组件中字母可以大写,但是在html标签中,字母有大写的就会报错原因这是因为html中不区分大小写,所以在html ...
vue中富文本编辑器vue-quill-editor在vue中自定义选择视频插入编辑文章中
题记: ----- 互联网不该只是技术的,不能简化成内容和工具,它应该属于生活本身 vue-quill-editor 是 Vue 项目中使用的富文本编辑器 1 引言在实际应用开发中,在常见的管理后 ...
vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画
自定义指令: vue中通过directive方法自定义指令,如:自定义一个v-focus指令: <script>Vue.directive('focus', {//通过directive( ...
Vue中使用vue-video-player和videojs-flash插件实现播放rtmp视频文件流
场景 Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg): Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)_BADAO_ ...
vue中自定义组件“ directives “的常用功能
directives 可以全局使用以及组件内部定义使用 directives是什么? 注册自定义的指令 directives有什么作用? 对普通 DOM 元素进行底层操作,就会用到自定义指令 dire ...

vue 中自定义按钮实现video暂停和播放

video视频中加暂停按钮

vue 中自定义按钮实现video暂停和播放相关推荐

最新文章

热门文章

vue 中 自定义按钮实现video暂停和播放

video视频中加暂停按钮

vue 中 自定义按钮实现video暂停和播放相关推荐

最新文章

热门文章

vue 中自定义按钮实现video暂停和播放

vue 中自定义按钮实现video暂停和播放相关推荐