一款炫酷的H5视频播放插件

最近H5开发者常用的几款插件flv.js video.js等，这些都是功能非常强大的视频播放插件，但是笔者作为一个“有想法和敢于挑战”的年轻程序员，决定自己手撸一个H5视频播放插件，当然，既然要做，就做颜值比较高，功能勉强看的过去的作品！

经过我两个月断断续续的开发，居然还让我做出来了。

成品图：

这款插件，我给它起了个响亮的名号 —— SuperVideo ，给它寄予厚切的希望。
目前该插件支持的视频播放格式有两种：mp4 和 m3u8
后续我会继续完善，争取支持更多的视频格式。
当前版本为 1.0.7

该插件运用了面向对象的编程思想，大到播放器对象，小到每一条弹幕，都是一个可实例化的类。

下面是基础的使用方式，可能看起来比较复杂，但是这绝逼是原汁原味的面向对象开发！

/* 设置视频外部容器样式 */#videoContainer {width: 800px;height: 500px;margin-left: auto;margin-right: auto;margin-top: 80px;}

 <!-- 设置视频插件容器 --><div id="videoContainer"></div>

/* 以下将定义视频插件常用的几个控件 */// 实例化一个“下一个”按钮控件var nextControl = new Super.NextControl()// 实例化一个倍速控件var Dbspeen = new Super.DbspeenControl()// 实例化一个弹幕输入框控件var BarrageControl = new Super.BarrageControl()// 实例化一个全屏按钮控件var fullScreenControl = new Super.FullScreenControl()// 实例化视频播放资源var source = new Super.VideoSource({// type: 视频类型 mp4:可播放浏览器支持的常见格式的视频文件(mp4/ogg/webm) m3u8: 可播放Hls形式推流直播视频(***.m3u8)// src: 视频路径，可以是本地路径亦可是网络路径type: 'mp4',src: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Winston_Recall.mp4'})/* 插件的常用配置参数 */var config = {// 是否自动播放（该功能受限于浏览器安全策略，可能会失效，解决思路为初始化时设置为静音，加载完毕后取消静音）autoplay: true,currentTime: 0, // 设置视频初始播放时间，单位为秒loop: false, // 是否循环播放muted: false, // 是否默认静音playbackRate: 1, // 视频默认播放速度poster: '', // 视频首帧图片路径volume: 0.5, // 视频默认音量 0-1showPictureInPicture: true, // 是否启用画中画模式按钮（>=Chrome10有效）source: source, // 为视频插件设置资源leftControls: [nextControl], // 在底部控件栏左侧插入 “下一个”按钮控件rightControls: [Dbspeen, fullScreenControl], // 在底部控件栏左侧插入 “倍速” 控件和 “全屏” 控件centerControls: [BarrageControl] // 在底部控件栏中间插入 “弹幕输入控件”}//初始化插件superVideo('videoContainer')请对应好html中的插件容器id.var video = new Super.Svideo('videoContainer', config)// 顺便写下解决无法自动播放的思路：设置静音，视频就绪后取消静音，自动播放便可以生效（听说腾讯视频就是这么干的）video.setMuted(true) // 设置静音模式/* 以下是控件类常用的监听事件 */// 监听“下一个”按钮控件点击事件nextControl.addEventListener('click', function(event) {alert('click next menu !!!')})// 监听进入全屏模式后触发（点击进入全屏按钮）fullScreenControl.addEventListener('fullscreen', function(event) {console.log('is fullscreen !!!')})// 监听退出全屏模式后触发（点击退出全屏按钮）fullScreenControl.addEventListener('cancelfullscreen', function(event) {console.log('cancel fullscreen !!!')})// 监听发送弹幕输入框输入并发送弹幕后触发BarrageControl.addEventListener('send', function(event) {var value = event.target.option.valueconsole.log('send ' + value)})/* 以下是video类常用的监听事件 */// 视频准备就绪video.addEventListener('ready', function() {console.log('is ready!')})// 开始播放video.addEventListener('play', function() {console.log('is play!')})// 暂停播放video.addEventListener('pause', function() {console.log('is pause!')})// 监听进入全屏模式后触发video.addEventListener('fullscreen', function(event) {console.log('is fullscreen !!!')})// 监听退出全屏模式后触发video.addEventListener('cancelfullscreen', function(event) {console.log('cancel fullscreen !!!')})/* 下面将演示弹幕类的用法 */// 初始化一个弹幕实例var barrage1 = new Super.Barrage('我是一条红色的超大号字体弹幕', {color: 'red',fontSize: 30})// 将该弹幕加入播放器插件video.addBarrage(barrage1)// 还可以在弹幕中插入一些dom节点var vipDom = document.createElement('span')vipDom.innerHTML = 'V'vipDom.style.color = 'green'vipDom.style.fontSize = '20px'vipDom.style.fontWeight = '600'vipDom.style.marginRight = '4px'var barrage2 = new Super.Barrage('我是超级会员VIP', {color: 'orange',fontSize: 15,leftDom: vipDom // 将DOM插入弹幕左侧})video.addBarrage(barrage2)// 当然也可以这样简单的使用video.addBarrage('冲鸭~~~~~~')video.addBarrage('奥里给！！！！！！')

结语：
superVideo还有许多实用的方法/事件/属性，想深入使用的请参考API文档 —— 参考文档
开源不易，如果该项目对您有所启发或者帮助，那就点个Star支持一下 —— github
或者您可以到Jquery插件库下载最新的资源包Jquery插件库

一款炫酷的H5视频播放插件相关推荐

h5优秀控件_推荐六款炫酷的HTML5效果插件
1. HTML5 3D图片阴影翻转动画效果很酷分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果.这和HTML5 ...
炫酷实用的jQuery插件涵盖菜单、按钮、图片
新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...
html5波浪线条,HTML5 svg炫酷波浪线条动画插件
这是一款HTML5 svg炫酷波浪线条动画插件.该波浪动画插件基于tweenMax和SVG,也可以作为jQuery插件来使用,可以制作出漂亮的波浪线条动画特效. 使用方法在页面中引入jquery和T ...
超炫酷的HTML5视频播放器支持手机移动页面
前几天在工作中遇到一个问题就是要在网页中放入视频,那么问题来了H5自己的播放器不太漂亮.这样子的怎么可能拿得出手呢.要的就是要有装B范对不对啊嘻嘻(●''●)- - 今天给大家介绍一个超级炫酷的HTM ...
10款炫酷的HTML5动画特效，附源码
HTML5确实非常强大,很多时候我们可以利用HTML5中的新技术实现非常炫酷效果时,这些效果也非常消耗电脑的CPU,但是这些HTML5效果确实能给用户带来不一样的用户体验. 今天我要跟大家分享一些HT ...
html5怎么把图片做成按钮,炫酷实用的jQuery插件涵盖菜单、按钮、图片 | HTML5资源教程...
新的一周开始了,今天我们要为大家分享一些全新的 1.CSS3书本翻页动画书本翻页效果逼真今天我们要分享一款炫酷而且实用的CSS3动画效果,它是模拟书本翻页的动画特效.当鼠标滑过书本右上角时,书本即 ...
10款超炫html5游戏,10款炫酷的HTML5动画特效，附源码
HTML5确实非常强大,很多时候我们可以利用HTML5中的新技术实现非常炫酷效果时,这些效果也非常消耗电脑的CPU,但是这些HTML5效果确实能给用户带来不一样的用户体验. 今天我要跟大家分享一些HT ...
一款炫酷Loading动画--载入成功
简单介绍昨天在简书上看到一篇文章.介绍了一个载入动画的实现过程一款Loading动画的实现思路(一) 仅仅可惜原动画是IOS上制作的.而看了一下.作者的实现思路比較复杂,于是趁着空暇写了一个And ...
Android 炫酷动画APP,21 款炫酷动画开源框架，照亮你的APP
原标题:21 款炫酷动画开源框架,照亮你的APP 2017年安卓巴士全球开发者论坛-上海站前言最近对应用的UI视觉效果突然来了兴致,所以找了一些合适开源控件,这样更加省时,再此分享给大家,希望能对 ...

一款炫酷的H5视频播放插件

一款炫酷的H5视频播放插件相关推荐

最新文章

热门文章