切图网是最早致力于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实现视频播放暂停---切图网的更多相关文章

  1. 在vue中继续使用layer.js来做弹出层---切图网

    layer.js是一个方便的弹出层插件,切图网专注于PSD2HTML等前端切图多年,后转向Vue开发.在vue开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导 ...

  2. vue使用video.js解决m3u8视频播放格式

    今天被这个关于m3u8视频播放不了搞了一下午,这个项目所有的视频流都是m3u8格式的,后台给我们返回的都是m3u8格式的视频流,解决了好长时间,看了好多博客,只有这个博客给我点启发,去解决这个问题,请 ...

  3. Video.js web视频播放器

    免费视频播放器videojs中文教程 Video.js是一款web视频播放器,支持html5和flash两种播放方式.更多关于video.js的介绍,可以访问官方网站介绍,我之前也写过一篇关于vide ...

  4. Video.js网页视频播放插件

        插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器. ...

  5. vue使用 video.js动态切换视频源视频源不刷新问题

    网上的垃圾代码太多,最后翻了video.js的官方文档,就这么简单,浪费了我这么久,注:我这里使用的vue //html <video  id="my-player" con ...

  6. video.js html5 视频播放器

    我个人感觉很不错 https://github.com/videojs/video.js <head> <title>Video.js | HTML5 Video Player ...

  7. vue添加swiper的正确方式亲测---切图网

    在vue项目中,我们在做图片轮播的方式和传统切图不同,传统切图中我们一般采用非常强大的swiper来完成,而在vue中一般依赖vue-awesome-swiper组件来完成(vue-awesome-s ...

  8. vue自定义分页组件---切图网

    vue2.5自定义分页组件 Pagination.vue,可设置每页显示条数,带跳转框直接跳转到相应页面,亲测有用.目前很多框架自带有分页组件比如elementUI,不过在面对一个拿到PSD稿,然后重 ...

  9. 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 ...

随机推荐

  1. 异想家Win7系统安装的软件与配置

    C盘推荐一个硬盘,256G以上,安装好驱动,激活Win7,备份一次系统(纯净)! 1.Mac.Linux时间同步(双系统时配置): 开始->运行->CMD,打开命令行程序(以管理员方式打开 ...

  2. Liunx创建到部署ASP.NET Core项目从零开始-----使用Centos7

    一.搭建环境 1..注册Microsoft密钥和源 执行命令:sudo rpm -Uvh https://packages.microsoft.com/config/centos/7/packages ...

  3. java实现字符串翻转

    public class StringReverse { /*一共写了三个函数func1 func2 func3 * 时间: 2019年9月12日9:00 * func1用的反向输出到一个新的字符串中 ...

  4. 简单总结关于阿里云CDN的知识

    CDN概念剖析 这里解释一下几个概念,摘自阿里云官方文档. 源站: 源站决定了回源时,请求到哪个IP 回源host:回源host决定回源请求访问到该IP上的哪个站点 例子1:源站是域名 源站为 www ...

  5. 简单看看读写锁ReentantReadWriteLock

    前面我们看了可重入锁ReentrantLock,其实这个锁只适用于写多读少的情况,就是多个线程去修改一个数据的时候,适合用这个锁,但是如果多个线程都去读一个数据,还用这个锁的话会降低效率,因为同一时刻 ...

  6. .net core3.1 web api中使用newtonsoft替换掉默认的json序列化组件

    在微软的文档中,有着较为详细的替换教程 https://docs.microsoft.com/zh-cn/aspnet/core/web-api/advanced/formatting?view=as ...

  7. 漏洞利用:验证绕过,XSS利用,Cookic盗用,文件上传

    1.      文件上传 低级别 写好上传的内容 选择好上传的文件 上传成功. 测试:访问文件,执行代码 中级别 修改文件后缀为png 上传该文件 抓包修改文件后缀为php,然后允许数据包通过. 上传 ...

  8. 创建一个圆类Circle的对象,分别设置圆的半径计算并分别显示圆半径、圆面积、圆周长。

    编写一个圆类Circle,该类拥有: ①一个成员变量 Radius(私有,浮点型): // 存放圆的半径: ②两个构造方法 Circle( ) // 将半径设为0 Circle(double r ) ...

  9. java核心技术----接口

    接口:用来描述类具有什么功能,而并不给出每个功能的具体实现. 一个类可以实现一个或多个接口. 克隆(深拷贝):创建一个新对象,且新的对象的状态与原始对象的状态相同.当对克隆的新对象进行修改时,不会影响 ...

  10. gdiplus exception

    <span style="font-size:14px;">#include <windows.h> #include <gdiplus.h> ...