vue基于video.js实现视频播放暂停---切图网
切图网是最早致力于PSD2HTML切图等web前端外包服务的,随着前端技术的更新迭代,现在也已经全面投入了vue的浪潮了,下面是vue中实现视频播放的方法。
vue.js中引入video视频播放器
main.js中引入
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video
html页面
<video id="vide" class="video-js v2 ani resize" autoplay :src="视频地址" type="video/mp4" @click="suspend" style="background-color:white;"></video>
export default {
name: "TestTwo",
methods: {
suspend(){
var vide=document.getElementById("vide");
if(vide.paused){
vide.play();
}else if(vide.play()){
vide.pause();
}
}
}
}
vue基于video.js实现视频播放暂停---切图网的更多相关文章
- 在vue中继续使用layer.js来做弹出层---切图网
layer.js是一个方便的弹出层插件,切图网专注于PSD2HTML等前端切图多年,后转向Vue开发.在vue开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导 ...
- vue使用video.js解决m3u8视频播放格式
今天被这个关于m3u8视频播放不了搞了一下午,这个项目所有的视频流都是m3u8格式的,后台给我们返回的都是m3u8格式的视频流,解决了好长时间,看了好多博客,只有这个博客给我点启发,去解决这个问题,请 ...
- Video.js web视频播放器
免费视频播放器videojs中文教程 Video.js是一款web视频播放器,支持html5和flash两种播放方式.更多关于video.js的介绍,可以访问官方网站介绍,我之前也写过一篇关于vide ...
- Video.js网页视频播放插件
插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器. ...
- vue使用 video.js动态切换视频源视频源不刷新问题
网上的垃圾代码太多,最后翻了video.js的官方文档,就这么简单,浪费了我这么久,注:我这里使用的vue //html <video id="my-player" con ...
- video.js html5 视频播放器
我个人感觉很不错 https://github.com/videojs/video.js <head> <title>Video.js | HTML5 Video Player ...
- vue添加swiper的正确方式亲测---切图网
在vue项目中,我们在做图片轮播的方式和传统切图不同,传统切图中我们一般采用非常强大的swiper来完成,而在vue中一般依赖vue-awesome-swiper组件来完成(vue-awesome-s ...
- vue自定义分页组件---切图网
vue2.5自定义分页组件 Pagination.vue,可设置每页显示条数,带跳转框直接跳转到相应页面,亲测有用.目前很多框架自带有分页组件比如elementUI,不过在面对一个拿到PSD稿,然后重 ...
- vue基于Blob.js和 Export2Excel.js做前端导出
1安装三个依赖包 npm install -S file-saver@2.0.2 npm install -S xlsx@0.15.6 npm install -D script-loader@0.7 ...
随机推荐
- docker-Gitlab、GitLab Runner安装
以下操作均在CentOs下操作 1.Gitlab install ① 启动gitlab docker run --detach \ --hostname 115.30.149.35 \ --publi ...
- 一个注解搞懂 Sentinel,@SentinelResource 总结
在前面的博客中,我给大家演示了使用 @SentinelResource 定义资源完成限流的例子, 下面就从源码解析开始,看下SentinelResource是如何实现限流的,以及@SentinelRe ...
- 简述java的ArrayList
java的ArrayList 基础知识: ArrayList集合长度可以发生改变 泛型 自动装箱和自动拆箱 部分常用的接口方法 boolean add(E obj) E add(int index,E ...
- 解决keil5不支持Samsung 2440A等较旧型号Soc的方法
手上有一块mini2440,最近想拿来跑一下程序.于是去下了最新版的Keil5,结果发现创建工程时没有Samsung一系列型号的CPU选项. 没有办法,去网上找了很久,才发现原因是新版的Keil5 ...
- artTemplate--模板使用自定义函数(1)
案例 因为公司业务需要频繁调用接口,后端返回的都是json树对象,需要有些特殊的方法做大量判断和数据处理,显然目前简单语法已经不能满足业务需要了,需要自己定制一些 方法来处理业务逻辑. 例如后台返回的 ...
- 一些可以查询IP地理位置、身份证所在地、手机归属地的接口
查询IP http://ip.dnsexit.com/ 新浪的IP查询接口: 新浪的:http://counter.sina.com.cn/ip?ip=IP地址 返回Js数据,感觉不是很精确,可以把问 ...
- PTA 7-10 树的遍历(二叉树基础、层序遍历、STL初体验之queue)
7-10 树的遍历(25 分) 给定一棵二叉树的后序遍历和中序遍历,请你输出其层序遍历的序列.这里假设键值都是互不相等的正整数. 输入格式: 输入第一行给出一个正整数N(≤30),是二叉树中结点的个数 ...
- Pycharm学习记录---同一目录下无法import明明已经存在的.py文件
转自:https://blog.csdn.net/l8947943/article/details/79874180 问题描述: 如图:同目录下明明存在相应文件,在导入时却出现带有红色波浪线,说没有相 ...
- Guava入门使用教程
Guava入门使用教程 Guava Maven dependency In our examples, we use the following Maven dependency. <depen ...
- layui父子页面方法互调
父级页面调用子页面方法 layer.open({ type: 2, content: 'test/iframe.html', success: function(layero, index){ var ...