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

由于我用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. Java基础-标识符与关键字

    Java基础-标识符与关键字 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.什么是标识符 标识符就是程序员在编写程序时,给类,变量,方法等起的名字. 二.标识符的命名规则 1& ...

  2. 初学Python-搞了一个linux用户登录监测小工具

    这几天突发奇想,想学习一下Python.看了点基础,觉得有点枯燥,所以想搞点什么.想了想,就随便弄个检测Linux用户登录的小工具吧~ 首先,明确一下功能: 1.能够捕获 linux 用户登录的信息. ...

  3. bzoj千题计划232:bzoj4727: [POI2017]Turysta

    http://www.lydsy.com/JudgeOnline/problem.php?id=4727 竞赛图tarjan缩点后得到的拓扑图一定是一条链 因为竞赛图任意两点的前后顺序确定,只有一种拓 ...

  4. Lua程序设计(四)面向对象类继承

    1.类继承 ①代码 Sharp = { _val = } --① 父类 function Sharp:new() local new_sharp = { } self.__index = self - ...

  5. Jenkins mac pkg安装 后默认配置文件/启动路径

    自启动文件路径 /Library/LaunchDaemons/org.jenkins-ci.plist jenkins.war 执行文件路径 /Applications/Jenkins/jenkins ...

  6. python爬虫-图片批量下载

    # 爬起摄图网的图片批量下载# coding:utf-8 import requests from bs4 import BeautifulSoup from scipy.misc import im ...

  7. 联通-长春处,FDD和TDD宏站,数据业务接入时延期望值默认值应为80ms

    有小坑 备注:若已经跑过V5.40.00_Alpha1_Baseline.sql或V5.30.02_Beta_TO_V5.40.00_Alpha1.sql的脚本,再次运行升级脚本修改不成功,需手动在数 ...

  8. Python 优雅获取本机 IP 方法

    原文 见过很多获取服务器本地IP的代码,个人觉得都不是很好,例如以下这些 不推荐:靠猜测去获取本地IP方法 #!/usr/bin/env python # -*- coding: utf-8 -*- ...

  9. u_boot移植之内存基础知识DDR【转】

    转自:http://blog.chinaunix.net/uid-25909619-id-4938411.html

  10. Android Studio之代码提示快捷键冲突设置

    1.原代码提示快捷键为:Ctrl+空格,与Windows输入法冲突,所以将代码提示快捷键设置为:Ctrl+反斜杠.