由于公司的项目是网上教育的,像网易云课堂那种教育网站,因而会有很多课程需要在线观看的,所以视频插件是必不可少的。

由于我用vue开发项目,所以找视频插件也找和vue贴近的。最后选择了vue-video-player。这个视频插件还是挺好用的,好多事件都是可控的,挺方便的。

首先 npm install vue-video-player -S;

然后再main.js进行配置:

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

常用参数:

然后就可以按需使用一些事件,由于我们项目需要播放的时候进行视频埋点,还有暂停的时候需要统计用户的暂停时间,还有等视频播放完

之后加个评分弹窗。因而我使用了三个事件,播放事件,暂停事件,播放结束之后事件。

如何动态切换视频源呢?

就先写这些,后面想到关于该插件的其他信息再补充。

vue-video-player的使用总结的更多相关文章

  1. HTML5 Video player jQuery plugin

    <!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8&qu ...

  2. Embed MP4 in HTML using flash-player(html5 video player)

    https://stackoverflow.com/questions/1000851/embed-mp4-in-html-using-flash-player ******************* ...

  3. Free Video Player All In One

    Free Video Player All In One VLC media player https://github.com/videolan/vlc VideoLAN https://www.v ...

  4. HTML5 stream video player

    HTML5 stream video player Aliplayer https://player.alicdn.com/aliplayer/index.html https://help.aliy ...

  5. vue video.js使用

    插件github地址:https://github.com/videojs/video.js 这边做一个切换视频vue url的解决记录 this.$nextTick(() => { let u ...

  6. vue video全屏播放

    需求: 1.视频为长方形,页面初始化打开为横屏全屏播放视频. 2.微信不支持自动播放,故自动播放需求删除. 方法: 1.vue-video-player插件 因需求较简单,仅要求播放本地一个视频,故未 ...

  7. Unity 播放 带 alpha 通道的视频(Video Player组件)

    孙广东  2017.6.18 http://blog.csdn.NET/u010019717 通常是  .webm类型文件!!!!!  你可以下载这个文件到本地: Http://tsubakit1.s ...

  8. 高性能流媒体服务器EasyDSS前端重构(四)- webpack + video.js 打造流媒体服务器前端

    接上篇 接上篇<高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui> 本文围绕着实现EasyDSS高性能流 ...

  9. video.js--很赞的H5视频播放库

    video.js是一款很流行的html5视频播放插件.很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8.官网:http://videojs.com/    git& ...

  10. video.js-H5视频播放库

    video.js是一款很流行的html5视频播放插件.很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8.官网:http://videojs.com/    git& ...

随机推荐

  1. PowerDesigner使用64位JDK连接MYSQL填坑记.md

    你在这座城市,做过最孤独的事是什么? 曾经试过销声匿迹,最终只是无人问及! 系统环境 利用powerdesigner反向生成表结构时报: ** connection test failed** 胖先 ...

  2. C语言复习---获取矩阵的对角和

    #include <stdio.h> #include <stdlib.h> #include <math.h> #define MAX 5 int main() ...

  3. Web性能优化系列(1):Web性能优化分析

    本文由 伯乐在线 - 鸭梨山大 翻译,sunbiaobiao 校稿.未经许可,禁止转载!英文出处:gokulkrishh.github.io.欢迎加入翻译小组. 如果你的网站在1000ms内加载完成, ...

  4. Python3之外部文件调用Django程序操作model等文件实现

    import os import sys import django sys.path.append(r'C:\Users\Administrator\PycharmProjects\your pro ...

  5. 求矩形的周长(线段树+扫描线) Picture POJ - 1177

    题目链接:https://cn.vjudge.net/problem/POJ-1177 题目大意:求矩形外部的周长 具体思路:借用一下bin巨的一张图片. 我们按照y周从下往上的扫描线进行扫描,第一下 ...

  6. python 入门基础23 选课系统 项目

    选课系统 代码地址:github_code # 选课系统 # 角色:学校.学员.课程.讲师 # 要求: # 1. 创建北京.上海 2 所学校 # 2. 创建linux , python , go 3个 ...

  7. CSS text系列

    text-shadow 语法规则: h-shadow(必需,水平阴影的位置,可负): v-shadow(必需,垂直阴影的位置,可负): blur(可选,模糊距离): color(可选,阴影的颜色). ...

  8. imperva 更改agent的注册密码

    imperva agent 在注册到网关的时候显示账号密码错误 如下图 这是一个数据库审计的设备由于当初最开始实施的时候并不是我安装的,所以账号密码我也不清楚,客户留的账号密码也不确定.因此导致账号密 ...

  9. sublime sftp 打开远程文件夹

    2014-04-29 13:19:09 总结: 本文介绍两种方法,推荐第二种方法(samba+windows映射) 先贴出sublime打开远程(Linux)目录所需的配置文件(sublime是通过s ...

  10. 批量初始化数组和memset函数

    对于数组的初始化有一下三种方式: int  a[]={1,2,3,4,5} //通过判断初始化值得个数来却仍数组长度 int b[5]={1,2,3} //数组长度为5,可是初始值却只有三个,因此,不 ...