SuperVideo - H5视频播放插件

今天给大家分享一个视频播放插件，支持发送弹幕的。

<!DOCTYPE html>
<html lang="cn"><head><link href="css/main-css.css" rel="stylesheet"></head><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>SuperVideo - H5视频播放插件</title><style>html,body {width: 100%;height: 100%;background-color: #292929;}* {padding: 0;margin: 0;}/* 设置视频外部容器样式 */#videoContainer {width: 800px;height: 500px;margin-left: auto;margin-right: auto;margin-top: 80px;}</style><body><!-- 设置视频插件容器 --><span>这个是视频标题显示的地方</span><div id="videoContainer"></div>
<script type="text/javascript" src="superVideo.js"></script></body><script>/* 以下将定义视频插件常用的几个控件 */// 实例化一个“下一个”按钮控件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) flv: 可播放flv视频// src: 视频路径，可以是本地路径亦可是网络路径type: 'mp4',src: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Winston_Recall.mp4'})/* 插件的常用配置参数 */var config = {// 是否自动播放（该功能受限于浏览器安全策略，可能会失效，解决思路为初始化时设置为静音，加载完毕后取消静音）autoplay: false,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)/* 以下是控件类常用的监听事件 */// 监听“下一个”按钮控件点击事件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('奥里给！！！！！！')//弹幕列表显示var dm_value = ["我是红色弹幕字体","我是蓝色弹幕字体"];var color_value = ['red','blue'];for(var i=0;i<dm_value.length;i++){// 初始化一个弹幕实例var barrage = new Super.Barrage(dm_value[i], {color: color_value[i],//fontSize: 30})// 将该弹幕加入播放器插件video.addBarrage(barrage);}</script>
</html>

这个是视频播放的一个截图下面附上一个下载文件，下载之后就可以直接看到效果

下载地址：SuperVideo - H5视频播放插件

SuperVideo - H5视频播放插件相关推荐

一款炫酷的H5视频播放插件
最近H5开发者常用的几款插件flv.js video.js等,这些都是功能非常强大的视频播放插件,但是笔者作为一个"有想法和敢于挑战"的年轻程序员,决定自己手撸一个H5视频播放插件 ...
php h5视频播放器,基于JSON数据HTML5视频播放器js插件
frame-player是一款基于JSON数据HTML5视频播放器js插件.该插件没有使用视频文件,只使用JSON格式的数据.在移动手机设备上使用图片帧的形式来播放视频文件. HTML5视频文件的一个 ...
让我为你介绍一个神器：Chimee，一套可扩展的 H5 视频播放器解决方案
Chimee(读"奇米", [tʃɪ'mɪ:])是由奇舞团开源的一套 H5 视频播放器解决方案,由奇舞团视频云前端团队结合在业务和视频编解码方向的沉淀积累倾心打造. Chimee ...
MuiPlayer - 一款优秀的 H5 视频播放器框架
Mui Player Gitee | Docs | 中文文档介绍 MuiPlayer 是一款 HTML5 视频播放插件,其默认配置了精美可操作的的播放控件,涉及了常用的播放场景,例如全屏播放.播放快 ...
使用vue二次开发海康监控H5视频播放
使用vue二次开发海康监控H5视频播放西瓜播放器示例demo 阿里云的示例demo 使用海康的H5视频开发包, 海康的api 页面中的使用第一步第二步第三步第四步切记 bug 由于公司项目 ...
让我为你介绍一个神器：Chimee，一套可扩展的 H5 视频播放器解决方案 1
Chimee(读"奇米", [tʃɪ'mɪ:])是由奇舞团开源的一套 H5 视频播放器解决方案,由奇舞团视频云前端团队结合在业务和视频编解码方向的沉淀积累倾心打造. Chimee ...
HTML5视频播放插件 video.js介绍
本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=kjab&title=HTML5%E8%A7%86%E9%A2%91%E6%92%AD ...
embedv.php_PHP与视频播放插件功能实现，非常简单
PHP与视频播放插件功能实现,非常简单龙行 PHP 2018-8-28 2579 0评论最近在研究maccms所以会接触到这个ckplayer播放器,那么如何 php与视频 ...
web视频播放插件:Video For Everybody
相比其它的web视频播放插件(video.js , jwplayer等)来说,Video For Everybody(极力推荐)是一款更好的视频播放插件,无需任何下载,支持html5以及flash播放 ...

SuperVideo - H5视频播放插件

SuperVideo - H5视频播放插件相关推荐

最新文章

热门文章