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

由于我用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. 个推数据统计产品(个数)iOS集成实践

    最近业务方给我们部门提了新的需求,希望能一站式统计APP的几项重要数据.这次我们尝试使用的是个推(之前专门做消息推送的)旗下新推出的产品“个数·应用统计”,根据官方的说法,个推的数据统计产品通过专业的 ...

  2. python---django中models配置修改数据库引擎

    Django支持多种数据库,sqlite,mysql,oracle等,其默认数据库是sqlite 在settings文件中可以发现: DATABASES = { 'default': { 'ENGIN ...

  3. 基于 Express 搭建一个node项目 - 起步

    一,如何基于 Express 搭建一个node项目 什么是Express 借用官方的介绍,Express是一个基于Node.js平台的极简.灵活的web应用开发框架,它提供了一系列强大的特性,帮助你创 ...

  4. 用matplotlib制作的比较满意的蜡烛图

    用matplotlib制作的比较满意的蜡烛图 2D图形制作包, 功能强大, 习练了很久, 终于搞定了一个比较满意的脚本. 特点: 使用方面要非常简单 绘制出来的图要非常的满意, 具有如下的特点 时间和 ...

  5. 使用WebHelper调用Asp.net WebAPI

    1.WebHelper using System; using System.Collections.Generic; using System.Collections.Specialized; us ...

  6. [转载]JavaScript 运行机制详解:再谈Event Loop

    https://app.yinxiang.com/shard/s8/sh/b72fe246-a89d-434b-85f0-a36420849b84/59bad790bdcf6b0a66b8b93d5e ...

  7. 怎样提高WebService的性能

    服务器端WebService程序: using System.Runtime.Serialization.Formatters.Binary; using System.IO; using Syste ...

  8. es6笔记(4) Set数据结构

    概要 介绍: 集合是由一组无序且唯一的项组成的,这个数据结构使用了与有限集合相同的数学概念,应用在计算机的数据结构中. ES6提供了数据结构Set.它类似于数组,但是没有重复的值. 特点: key与v ...

  9. Expression Tree Build

    The structure of Expression Tree is a binary tree to evaluate certain expressions.All leaves of the ...

  10. 【linux kernel】 中断处理-中断上半部【转】

    转自:http://www.cnblogs.com/embedded-tzp/p/4451354.html 欢迎转载,转载时需保留作者信息,谢谢. 邮箱:tangzhongp@163.com 博客园地 ...