vue-video-player的使用总结
由于公司的项目是网上教育的,像网易云课堂那种教育网站,因而会有很多课程需要在线观看的,所以视频插件是必不可少的。
由于我用vue开发项目,所以找视频插件也找和vue贴近的。最后选择了vue-video-player。这个视频插件还是挺好用的,好多事件都是可控的,挺方便的。
首先 npm install vue-video-player -S;
然后再main.js进行配置:


然后就可以在组件中使用了。

常用参数:


然后就可以按需使用一些事件,由于我们项目需要播放的时候进行视频埋点,还有暂停的时候需要统计用户的暂停时间,还有等视频播放完
之后加个评分弹窗。因而我使用了三个事件,播放事件,暂停事件,播放结束之后事件。

如何动态切换视频源呢?

就先写这些,后面想到关于该插件的其他信息再补充。
vue-video-player的使用总结的更多相关文章
- HTML5 Video player jQuery plugin
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8&qu ...
- Embed MP4 in HTML using flash-player(html5 video player)
https://stackoverflow.com/questions/1000851/embed-mp4-in-html-using-flash-player ******************* ...
- Free Video Player All In One
Free Video Player All In One VLC media player https://github.com/videolan/vlc VideoLAN https://www.v ...
- HTML5 stream video player
HTML5 stream video player Aliplayer https://player.alicdn.com/aliplayer/index.html https://help.aliy ...
- vue video.js使用
插件github地址:https://github.com/videojs/video.js 这边做一个切换视频vue url的解决记录 this.$nextTick(() => { let u ...
- vue video全屏播放
需求: 1.视频为长方形,页面初始化打开为横屏全屏播放视频. 2.微信不支持自动播放,故自动播放需求删除. 方法: 1.vue-video-player插件 因需求较简单,仅要求播放本地一个视频,故未 ...
- Unity 播放 带 alpha 通道的视频(Video Player组件)
孙广东 2017.6.18 http://blog.csdn.NET/u010019717 通常是 .webm类型文件!!!!! 你可以下载这个文件到本地: Http://tsubakit1.s ...
- 高性能流媒体服务器EasyDSS前端重构(四)- webpack + video.js 打造流媒体服务器前端
接上篇 接上篇<高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui> 本文围绕着实现EasyDSS高性能流 ...
- video.js--很赞的H5视频播放库
video.js是一款很流行的html5视频播放插件.很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8.官网:http://videojs.com/ git& ...
- video.js-H5视频播放库
video.js是一款很流行的html5视频播放插件.很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8.官网:http://videojs.com/ git& ...
随机推荐
- UML类图学习笔记
http://note.youdao.com/noteshare?id=d5af220db7081dda73511fcb7b4da390
- 模拟QQ聊天与视频聊天同时进行-------java基础知识总结
前言:多线程的知识 代码: package com.day13.math; /** * 类说明 :模拟QQ聊天与视频聊天同时进行 * @author 作者 : chenyanlong * @versi ...
- 【CSS】clear清除浮动
clear清除浮动1.作用: 规定元素的某一侧不允许存在浮动元素 2.值: 3.应用: 清除其他浮动元素对其产生的影响 <!DOCTYPE html> <html lang=&quo ...
- C#string与stringBuilder的区别
string的缺点是每次字符串变量的内容发生了改变时,都必须重新分配内存.你想想,如果创建一个迭代100000次的循环,每次迭代都将一个字符连接到字符串,这样内存中就会有100000个字符串,每个字符 ...
- HDU 1729 类NIM 求SG
每次有n个盒子,每个盒子有容量上限,每次操作可以放入石头,数量为不超过当前盒子中数量的平方,不能操作者输. 一个盒子算一个子游戏. 对于一个盒子其容量为s,当前石子数为x,那么如果有a满足 $a \t ...
- alloffthelights使用方法
官网上的demo没有用,因为官网用的jquery是谷歌的CDN,download下来的demo也没有用,因为demo的路径下少了jquery.所以自己写demo的时候要把jquery和alloffth ...
- 《Linux命令行与shell脚本编程大全》23章24章
第二十三章 使用其他shell bash shell是linux发行版中最广泛使用的shell.但是它并不是唯一的选择,还有其他的shell可以供你选择. 23.1 什么是dash shell 百度百 ...
- Memcached命令:简单获取缓存value用法
Memcached:命令用法1.cmd 输入telnet ip 端口 进入memcached服务端窗口比如:xxx.Token_T1435622096xxx为key获取此key的memcached ...
- python垃圾回收二
由于循环引用的存在,我们在删除了a跟b之后,引用计数是1,这样,现有的垃圾回收机制是永远不可能把她们删除了.他们将永远存在于内存中. 我们当然不能对这种情况置之不理,于是,我们又添加了两种新的回收机制 ...
- 分享一个C#创建Barcode的DLL
用于工作需要产生Barcode,随手从网上找了一个DLL(原文地址忘了) http://files.cnblogs.com/panchunting/barcode_bin.zip 使用非常简单,只需添 ...