视频播放特效.zips资源-CSDN文库

共3个文件

html：1个

js：1个

css：1个

视频播放特效.zip

需积分: 5 11 浏览量 2023-03-25 14:40:16 上传评论收藏 147KB ZIP 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源推荐

资源详情

资源评论

收起资源包目录

视频播放特效.zip （3个子文件）

视频播放特效

HTML

css

main-css.css 15KB

superVideo.js 515KB

index.html 6KB

<!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></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> <noscript> <strong>We're sorry but soucecode doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript>  <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-1 showPictureInPicture: 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.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文档 —— https://hulalalalala.github.io/superVideo/api/index.html 开源不易，希望各位爱心人士点个STAR支持以下 —— https://github.com/hulalalalala/superVideo */ </script> </html>

评论收藏

内容反馈