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 ...
随机推荐
- C语言寒假大作战02
2.2.1 寒假大作战 问题 回答 这个作业属于哪个课程 2019软件四班C语言寒假作业大作战 这个作业要求在哪里 作业要求 我在这个课程的目标是 用switch完成一个menu基本框架 这个作业在那 ...
- livego+obs+flv.js 搭建视频直播
一.流程 主播通过 obs软件通过直播 ->推流到->直播服务器 客户通过浏览器 访问站点->flv.js拉取直播服务器视频流并播放 二.环境 centos7 直播服务器 https ...
- 代码中理解CPU结构及工作原理
一.前言 从研究生开始到工作半年,陆续在接触MCU SOC这些以CPU为核心的控制器,但由于专业的原因一直对CPU的内部结构和工作原理一知半解.今天从一篇博客中打破一直以来的盲区.特此声明,本文设计思 ...
- laravel自动生成model
laravel自动生成model 添加PHP扩展 composer require krlove/eloquent-model-generator --dev config/app注册Generato ...
- 解决warning: #181-D: argument is incompatible with corresponding format string conversion警告
uint8_t NetRSSI=0;uint8_t NetBer=0;uint8_t failtime=0; sscanf(&USART_RX_BUF[0],"%*s%u,%u&qu ...
- SpringCloud与微服务Ⅲ --- SpringCloud入门概述
一. 什么是SpringCloud SpringCloud基于SpringBoot提供了一套微服务解决方案,包括服务注册与发现,配置中心,全链路监控,服务网关,负载均衡,熔断器等组件,除了基于NetF ...
- 九 Shell中的数组
数组:用一个变量存储一组数据,并能够对这组数据中的某一个数据单独操作. 数组的类型:一维数组.二维数组.多维数组 变量的类型 Shell中默认无类型 变量的值默认均视为文本 用在数字运算中时,自动将其 ...
- 深入理解JVM-类加载及类加载器
深入理解JVM 2020年02月06日22:43:09 - 记录学习过程 终于开始了.在学习这个之前,看了zhanglong老师的 java 8 和springboot 迫不及待了.先开始吧. 写在前 ...
- 从Libra看区块链的机遇
一番码客 : 挖掘你关心的亮点.http://www.efonmark.com 关于未来的思考 记得去年扎克伯格搞Libra的时候,引起了世界的关注.但随着美国国会听证会的阻力,渐渐很少听见Libra ...
- 每日一练_PAT_B_真题
A+B和C (15) 时间限制 1000 ms 内存限制 32768 KB 代码长度限制 100 KB 判断程序 Standard (来自 小小) 题目描述 给定区间[-2的31次方, 2的31次方] ...