切图网是最早致力于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. atx测试框架实现手机应用UI自动化测试

    最近工作中遇到游戏APP需要实现UI自动化测试,这个app中真的是典型的混合App,有Android原生控件,有webview控件,以及游戏操作页面.研究了Appium,发现appium实现跨应用操作 ...

  2. 爬虫之 cookie , 验证码,模拟登陆,线程

    需求文档的定制 糗事百科的段子内容和作者(xpath的管道符)名称进行爬取,然后存储到mysql中or文本 http://sc.chinaz.com/jianli/free.html爬取简历模板 HT ...

  3. mac系统安装、启动与关闭redis

    一.下载 打开官网:https://redis.io/ Download---Stable---Download5.0.4,下载最新稳定版,看具体情况而定我这里是5.0.4版本. 二.安装 下载完成后 ...

  4. IDEA更换banner(娱乐专用)

    1.佛祖保佑 永无bug _ooOoo_ o8888888o 88" . "88 (| -_- |) O\ = /O ____/`---'\____ .' \\| |// `. / ...

  5. Unicode标准以及其常见的编码方案

    目录 基本概念 码位 码位的类型 编码方案 UTF-32 UTF-16 UTF-8 参考资料 Unicode标准为每一个字符提供一个唯一的数字,而不用区分平台.语言等因素. The Unicode S ...

  6. 面试官:"谈谈分库分表吧?"

    转自:学习Java的小姐姐 www.cnblogs.com/chenchen0618/p/11624480.html 1.什么是分库分表 从字面上简单理解,就是将原本存储在一个库的数据分块存储在多个库 ...

  7. SpringBoot学习(3) - jdbc

    数据库使用MySQL 5.7.18版本. 装配DataSource的步骤:1.加入数据库驱动 pom.xml: <project xmlns="http://maven.apache. ...

  8. centos6安装lamp

    1.安装Apache [root@localhost ~]# yum -y install httpd 设置开启自启动 [root@localhost ~]# chkconfig httpd on 启 ...

  9. PostMan向企业微信机器人传送数据测试

    1 在企业微信中创建机器人  获取:webhook 地址 2.在Postman软件中创建Post文件 Post文件请求类型要与机器人所接受的类型一致.Get  或者 Post Url地址为上面webh ...

  10. python之reload用法

    一.python2和python3的区别 python2中可以直接使用reload().python3中需要从库中导入,有两种方法: >>> from imp import relo ...