切图网是最早致力于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. python从excel中读取数据传给其他函数使用

    首先安装xlrd库 pip install xlrd 方法1: 表格内容如下: 场景描述,读取该表格A列数据,然后打印出数据 代码何解析如下: import xlrd #引入xlrd库 def exc ...

  2. 数据结构与算法 --- js描述栈

    js描述栈及栈的使用 栈的特性就是只能通过一端访问,这一段就是叫做栈顶.咖啡馆内的一摞盘子就是最形象的栈的例子: 根据栈的特性,就可以定义栈的一些特殊属性和方法;用js的描述栈的时候底层数据结构用的是 ...

  3. X-CTF(REVERSE入门) re1

    运行程序 32位ida打开,shift+f12查看运行时的中文,这里双击flag get字符串进入rdata段 双击后面的函数,进入text段,小的窗口视图里可以看见汇编代码调用函数的句子 右边的即是 ...

  4. ElasticSearch系列专栏

    最近我们公司因业务发展较快,不少服务遇到了一些瓶颈,影响最大的就是数据量的暴增带来的搜索效率的问题.虽然建立索引以及利用好缓存可以有效地缓解该问题,但是随着业务的发展,业务的复杂度也逐渐提升,原有的技 ...

  5. 外网通过frp进行windows远程文件共享

    需求 远程访问位于内网中的文件.例如,家里,公司内. 所需技术 frp windows文件共享 具有公网地址的服务器一台 实现过程 windows文件共享,首先自己在局域网内实现.这不是本文重点. 公 ...

  6. .NET Core学习笔记(4)——谨慎混合同步和异步代码

    原则上我们应该避免编写混合同步和异步的代码,这其中最大的问题就是很容易出现死锁.让我们来看下面的例子: private void ButtonDelayBlock_Click(object sende ...

  7. WTL设置对话框背影色

    MainDlg.h // MainDlg.h : interface of the CMainDlg class // //////////////////////////////////////// ...

  8. 谈恋爱就像TCP连接

    这是一张很内涵的漫画--爱情是靠不住的,即使你使用TCP连接也是如此.一心要握手成功,却被RST的男人就是个彻底的杯具-- 小知识: 一个虚拟连接的建立是通过三次握手来实现的. 第一次握手:建立连接时 ...

  9. for实例

    #-*- coding:utf-8 *-* salary = 5000 shop_list = [('iphone',9000),('mac book',10000),('python book',9 ...

  10. Codeforces_851

    A.分三种情况. #include<bits/stdc++.h> using namespace std; int n,k,t; int main() { ios::sync_with_s ...