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

由于我用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. k8s如何管理Pod(rc、rs、deployment)

    是豆荚,可以把容器想像成豆荚里的豆子,把一个或多个关系紧密的豆子包在一起就是豆荚(一个Pod).在k8s中我们不会直接操作容器,而是把容器包装成Pod再进行管理(关于Pod,大家可以参考第十期的分享“ ...

  2. Google-403-Forbidden

    Author:KillerLegend Date:2014.8.14 From:http://www.cnblogs.com/killerlegend/p/3913554.html www.googl ...

  3. Why is my Spring @Autowired field null?

    spring有@Autowired 空指针异常 https://stackoverflow.com/questions/19896870/why-is-my-spring-autowired-fiel ...

  4. meeting,symposium,seminar 等区别

    meeting,symposium,seminar 等区别 会议分类的方式可说是不胜枚举,这点初步由英文对会议名称的写法,就可看出端倪,像是Assembly,Caucus,Colloquium, Co ...

  5. 20155201 2016-2017-2 《Java程序设计》第五周学习总结

    20155201 2016-2017-2 <Java程序设计>第五周学习总结 教材学习内容总结 第八章 异常处理 程序设计本身的错误,建议使用Exception或其子类实例来表现,称错误处 ...

  6. 在xampp与phpstorm环境下安装xdebug[转]

    XDebug是什么 很多PHP程序员调试使用echo.print_r().var_dump().printf()等,虽然对于有较丰富开发经验的程序员来说这些也已经足够了,他们往往可以在程序执行的过程中 ...

  7. ZYNQ. GPIO

    GPIO General Purpose I/O ,网上能找到很多关于znyq gpio 的文章. 分类:EMIO .MIO .AXI_GPIO 硬件系统 MIO和EMIO是在zynq核中配置的,MI ...

  8. 3.微信公众号开发:配置与微信公众平台服务器交互的URL接口地址

    微信开发基本原理: 1.首先有3个对象 分别是微信用户端 微信公众平台服务器 开发者服务器(也就是放自己代码的服务器) 三者间互相交互 2.微信公众平台服务器 充当中间者角色 (以被动回复消息为例) ...

  9. 分模块开发创建Action子模块——(九)

    web层选择war打包方式. 1.右击父工程新建maven模块

  10. 【转载】chmod命令详解

    查看linux文件的权限:ls -l 文件名称 查看linux文件夹的权限:ls -ld 文件夹名称(所在目录) 修改文件及文件夹权限: sudo chmod -(代表类型)×××(所有者)×××(组 ...