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& ...
随机推荐
- OpenStack 计算服务 Nova介绍和控制节点部署(七)
介绍 Nova是openstack最早的两块模块之一,另一个是对象存储swift.在openstack体系中一个叫做计算节点,一个叫做控制节点.这个主要和nova相关,我们把安装为计算节点nova-c ...
- Java基础-JVM调优策略简介
Java基础-JVM调优策略简介 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.JVM结构分析 1>.JVM结构图 2>.JVM运行时数据区功能说明 JVM管理的内 ...
- Spark记录-org.apache.spark.sql.hive.HiveContext与org.apache.spark.sql.SQLContext包api分析
HiveContext/SQLContext val hiveContext=new HiveContext(new SparkContext(new SparkConf().setAppName(& ...
- bzoj千题计划272:bzoj4557: [JLoi2016]侦察守卫
http://www.lydsy.com/JudgeOnline/problem.php?id=4557 假设当前到了x的子树,现在是合并 x的第k个子树 f[x][j] 表示x的前k-1个子树该覆盖 ...
- prefab内容分析
写在前面: 当前使用的unity版本:5.3.7p4. 如果打开prefab文件是乱码: 把editer的asset Srialization改为Force Text即可. 一.什么是Prefab P ...
- Yii 自定义模型路径
例如现有两个 Yii 项目,分别是 test1 和 test2.在 test1 中,已经有模型了,test2 直接调用 test1 中的模型,其实添加个别名,然后修改下配置即可. 先在 index.p ...
- LCA 算法(二)倍增
介绍一种解决最近公共祖先的在线算法,倍增,它是建立在任意整数的二进制拆分之上. 代码: //LCA:Doubly #include<cstdio> #define swap(a, ...
- C - 青蛙的约会 POJ - 1061 (扩展欧几里得)
题目链接:https://cn.vjudge.net/contest/276376#problem/C 题目大意:中文题目. 具体思路:扩展gcd,具体证明过程看图片(就这麽个题我搞了一天,,,). ...
- 【源码阅读】Mimikatz一键获取远程终端凭据与获取明文密码修改方法
1.前言 mimikatz框架是非常精妙的,粗浅讲一下修改的思路. 它的模块主要由各个结构体数组组成,根据传入的命令搜索执行相应命令的模块 mimikatz.c 部分代码: NTSTATUS mimi ...
- cefSharp获取百度搜索结果页面的源码
using CefSharp; using CefSharp.WinForms; using System; using System.Collections.Generic; using Syste ...