切图网是最早致力于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. 小程序--->小程序图片上传阿里OSS使用方法

    小程序图片上传阿里OSS使用方法 首先看下参考文档 ( http://blog.csdn.net/qq_38125123/article/details/73870667) 这里只将一些运用过程中遇到 ...

  2. ubuntu18.04系统下无外部显示问题解决

    记录一下自己作死过程. 由于学习的需要,在windows10下装了ubuntu18.04系统,第一次装这个系统时,也出现了无外部显示,那时候是老师帮忙搞好的,当时没太在意,只是走马关花的看了老师操作了 ...

  3. javase第一章(了解java)

    ------------恢复内容开始------------ java介绍 java这门语言,如果你是一名IT从业者,那么就一定是会有所耳闻的,毕竟,这是编程史上其商业化最成功的一门语言,当然, 编程 ...

  4. 批处理版MPlayer播放器(甲兵时代原创批处理)(下)

    注意,由于空间不支持显示退格键,需要自己手动补上,方法如上图: 接上篇: 批处理版音视频播放器上(甲兵时代原创批处理) :Bc cls COLOR 2F echo. call :colour &quo ...

  5. python学习记录(二)

    0824--https://www.cnblogs.com/fnng/archive/2013/02/24/2924283.html 如果需要写一个非常非常长的字符串,它需要跨多行,那么,可以使用三个 ...

  6. CCF_201612-4_交通规划

    http://115.28.138.223/view.page?gpid=T44 好像也没想象中的那么难,没办法,当初连个优先队列dij都不会写= = 在优先队列dij算法上加上相等的时候的处理就可以 ...

  7. CCF_201612-1_最大波动

    http://115.28.138.223/view.page?gpid=T47 水. #include<iostream> #include<cstring> #includ ...

  8. POJ_1363_模拟

    题目描述: 列车出入站是一种栈的机制,每组数据给予一个n,进站按1-n顺序,给定一组出站顺序,判断能否实现. 思路: 直接用了queue,in记录当前准备入站的列车编号,out记录已经出站的辆数+1. ...

  9. js - 构造函数-静态属性/方法-原型对象 - 前端第八课

    先来个普通对象 var duixiang={ a:"111", b:function (s) { return s+"886"; } }; console.lo ...

  10. 《Python学习手册 第五版》 -第8章 列表与字典

    前面已经讲过数值类型(第5章)和字符串类型(第7章),本章继续其他数据类型的讲解:列表和字典 本章的核心内容 1.列表 1)什么是列表 2)基本列表操作 3)列表迭代和推导 4)索引.分片和矩阵 5) ...