vue基于video.js实现视频播放暂停---切图网
切图网是最早致力于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实现视频播放暂停---切图网的更多相关文章
- 在vue中继续使用layer.js来做弹出层---切图网
layer.js是一个方便的弹出层插件,切图网专注于PSD2HTML等前端切图多年,后转向Vue开发.在vue开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导 ...
- vue使用video.js解决m3u8视频播放格式
今天被这个关于m3u8视频播放不了搞了一下午,这个项目所有的视频流都是m3u8格式的,后台给我们返回的都是m3u8格式的视频流,解决了好长时间,看了好多博客,只有这个博客给我点启发,去解决这个问题,请 ...
- Video.js web视频播放器
免费视频播放器videojs中文教程 Video.js是一款web视频播放器,支持html5和flash两种播放方式.更多关于video.js的介绍,可以访问官方网站介绍,我之前也写过一篇关于vide ...
- Video.js网页视频播放插件
插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器. ...
- vue使用 video.js动态切换视频源视频源不刷新问题
网上的垃圾代码太多,最后翻了video.js的官方文档,就这么简单,浪费了我这么久,注:我这里使用的vue //html <video id="my-player" con ...
- video.js html5 视频播放器
我个人感觉很不错 https://github.com/videojs/video.js <head> <title>Video.js | HTML5 Video Player ...
- vue添加swiper的正确方式亲测---切图网
在vue项目中,我们在做图片轮播的方式和传统切图不同,传统切图中我们一般采用非常强大的swiper来完成,而在vue中一般依赖vue-awesome-swiper组件来完成(vue-awesome-s ...
- vue自定义分页组件---切图网
vue2.5自定义分页组件 Pagination.vue,可设置每页显示条数,带跳转框直接跳转到相应页面,亲测有用.目前很多框架自带有分页组件比如elementUI,不过在面对一个拿到PSD稿,然后重 ...
- 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 ...
随机推荐
- 用VLC搭建流媒体服务器
用vlc搭建简单流媒体服务器(UDP和TCP方式) 这段时间用到了流媒体数据传输的TCP和UDP方式,感觉vlc可以做这方面的demo,这里总结下,也方便我以后查阅. 简介 VLC主页:http:// ...
- Maven debug异常:Source not found.
异常 用Maven debug 时出现了Source not found.,在调试过程中尝试添加源码也没有效果 解决方案 先把当前正在运行中的项目停止 右键项目 -> Debug As -> ...
- 1757: 成绩稳定的学生(武汉科技大学结构体oj)
#include<stdio.h>#include<string.h>struct student{ long no; char name[9]; int ch[20]; in ...
- POJ_3627_贪心
题目描述: 给你N个数和一个总和,要求求出最少个数的数相加大于等于这个总和. 思路: 很简单的贪心,先排序,从大到小加一次,比较一次,直到符合条件. 我用了优先队列,运行时间好像多了一倍= = #in ...
- Docker容器到底是什么?
Docker是一个开源的应用容器引擎,是近些年最火的技术之一,Docker公司从Docker项目开源之后发家致富把公司商标改为了Docker,收购了fit项目,整合为了docker-compose,前 ...
- Windows搭建IIS服务器使用NATAPP实现内网穿透
目的:外网可以访问本地网页. 步骤: 一.实现内网访问 1.Win+Q搜索[控制面板],选择[程序],点击[启用或关闭Windows功能], 2.勾选[Internet Information Ser ...
- 新的征程TestOps
TestOps 概念是什么时候提出来的没有去考察,知道TestOps测试运维是在DevOps这个概念下抽象的结果. DevOps,现在几乎每家公司都在谈DevOps,都已经实施,在实施,或者在准备实施 ...
- [Effective Java 读书笔记] 第三章类和接口 第二十三-- ??条
第二十三条 请不要再新代码中使用原生态类型 1 使用原生态类型,就失去了泛型在安全性和表述性方面的所有优势,所以新代码中不要使用原生态类型 2 List<String>可以传递给List作 ...
- Redis中RDB和AOF持久化区别和联系
RDB和AOF持久化 RDB持久化 RDB是什么? 原理是redis会单独创建(fork) 一个与当前进程一模一 样的子进程来进行持久化,这个子进程的所有数据(变量.环境变量,程序程序计数器等) ...
- 来看看你对Python变量理解到位了没有
变量是编程的基础概念,Python 的变量也看似很简单,但是如果理解不当,生搬硬套,可能会遇到一些麻烦. 下面用 10 个代码示例展示 Python 的 变量 本质. 以下内容有对应的 视频 手把手详 ...