最近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-1
showPictureInPicture: 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.value
console.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插件库下载最新的资源包
本文地址：https://blog.csdn.net/qq_38545849/article/details/107526564
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论