切图网是最早致力于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. [校内训练19_09_05]ca

    题意 对于任意1 ≤k≤N,求有多少个左右区分的恰有k个叶子节点的二叉树,满足对于每个节点要么没有叶子节点要么有两个节点,同时不存在一个叶子节点,使得根到它的路径上有不少于M条向左的边. 答案对998 ...

  2. 内网IP的解释

    https://baike.baidu.com/item/%E5%86%85%E7%BD%91ip/8881186?fr=aladdin

  3. Python里的装饰器

    装饰器 装饰器是干什么用的? 装饰器可以在不修改某个函数的情况下,给函数添加功能. 形象点来说,从前有一个王叔叔,他一个人住在家里,每天打扫家,看书.于是定义如下一个函数: def uncle_wan ...

  4. 学习记录(安装Scala)

    安装完spark之后根据教程安装Scala,在安装的时候提出警告,等了好长时间之后发现无法下载,最后搜索之后发现1.8版本的jdk无法安装,今天又重装了jdk换成了1.7.0的openjdk jdk安 ...

  5. Lua使用luasocket http请求例子

    local http=require("socket.http"); local request_body = [[login=user&password=123]] lo ...

  6. HotSpot虚拟机对象创建

    2.3.1对象创建 Java是一门面向对象的语言,在Java程序的运行过程中无时无刻都有新的对象被创建出来.从语言的层面看,创建对象通常仅仅是一个new关键字而已,从虚拟机的角度看,创建对象又是怎样的 ...

  7. Deeplab

    Deeplab系列是谷歌团队的分割网络. DeepLab V1 CNN处理图像分割的两个问题 下采样导致信息丢失 maxpool造成feature map尺寸减小,细节信息丢失. 空间不变性 所谓空间 ...

  8. 这个 Spring 循环依赖的坑,90% 以上的人都不知道

    1. 前言 这两天工作遇到了一个挺有意思的Spring循环依赖的问题,但是这个和以往遇到的循环依赖问题都不太一样,隐藏的相当隐蔽,网络上也很少看到有其他人遇到类似的问题.这里权且称他非典型Spring ...

  9. js + php服务器推送see(自定义推送时间)

    //javascript code var source = new EventSource("./main.php"); source.onmessage=function(ev ...

  10. 中小企业自建云WAF有多难?只需20分钟!而且:全程免费!

    以往,运营型的web为了安全目的,才使用WAF进行安全防护. 而现如今,WAF对企业web来说,已然成了刚需.为何?等保.网络安全法的硬性要求! 当然,这样要求显然是对的:没有网络安全,就没有国家安全 ...