| 西瓜播放器 | 您所在的位置：网站首页 › 全屏弹幕怎么循环播放 › 西瓜播放器 |
|
# 配置 播放器在实例化的时候提供配置选项，开发者可以根据自己的需求进行选择性地配置。 播放器容器和视频资源地址是生成播放器示例必须提供的内容。 # 必选配置# 选择器播放器实例化的时候需要明确DOM的占位，video将要输出到该DOM下，播放器的尺寸与占位DOM一致。 new Player({ id:'mse' })播放器容器id也可以用容器的 DOM 实例来代替。 new Player({ el:document.querySelector('#mse'), }) # 视频源new Player({ el:document.querySelector('#mse'), url: '//abc.com/**/*.mp4' });注意 选择器和视频源是播放器必须提供的配置项，缺一不可。 # 可选配置# 尺寸开发者可以为播放器设置尺寸大小。 new Player({ el:document.querySelector('#mse'), url: 'video_url', width: 600, height: 337.5 }); 配置项：width, height默认值：600, 337.5# 流式布局设置为流式布局，可使播放器宽度跟随父元素的宽度大小变化，且高度按照配置项中的高度和宽度的比例来变化（播放器宽高未设置时按照内部默认值来计算）。 new Player({ el:document.querySelector('#mse'), url: 'video_url', fluid: true }); 配置项：fluid默认值：false参考值：true | false# 自适应视频内容宽高可设置三种模式：1、fitVideoSize设置为fixWidth，表示容器宽度固定，容器高度按照视频内容比例增大或减小；2、fitVideoSize设置为fixHeight，表示容器高度固定，容器宽度按照视频内容比例增大或减小；3、fitVideoSize设置为auto，表示容器高度或宽度按照视频内容比例增大。 new Player({ el:document.querySelector('#mse'), url: 'video_url', fitVideoSize: 'auto' }); 配置项：fitVideoSize默认值：undefined参考值：'fixWidth' | 'fixHeight' | 'auto'# 音量开发者可以为播放器预设音量大小。 new Player({ el:document.querySelector('#mse'), url: 'video_url', volume: 0.6 }); 配置项：volume默认值：0.6参考值：0 ~ 1# 自动播放目前大多数浏览器厂商不建议播放器自动播放视频，开发者对此有特殊需求时可通过该配置项打开。 new Player({ el:document.querySelector('#mse'), url: 'video_url', autoplay: true }); 配置项：autoplay默认值：false参考值：true | false注意 播放器的 autoplay 行为会受到浏览器规则限制 参考。 # 循环播放new Player({ el: document.querySelector('#mse'), url: 'video_url', loop: true }); 配置项：loop默认值：false参考值：true | false# 初始化显示视频首帧播放器默认不会初始化视频，如果需要在没有设置poster的情况下显示视频首帧，可通过设置videoInit配置项实现。 注意 该配置在移动端无效。 该配置与autoplay配置项不可同时设置为true。 new Player({ el: document.querySelector('#mse'), url: 'video_url', videoInit: true }); 配置项：videoInit默认值：false参考值：true | false# 封面图封面图是当播放器初始化后在用户点击播放按钮前显示的图像。 new Player({ el:document.querySelector('#mse'), url: 'video_url', poster: '//abc.com/**/*.png' }); 配置项：poster默认值：''参考值：'https://i.ytimg.com/vi/lK2ZbbQSHww/hqdefault.jpg'# 倍速播放播放器支持设置视频的当前播放速度。可通过defaultPlaybackRate设置初始速度。可通过playbackRateUnit设置倍速展示单位。 new Player({ el:document.querySelector('#mse'), url: 'video_url', playbackRate: [0.5, 0.75, 1, 1.5, 2], defaultPlaybackRate: 1.5 }); 配置项：playbackRate默认值：''参考值：[0.5, 0.75, 1, 1.5, 2]配置项：defaultPlaybackRate默认值：''参考值：1.5配置项：playbackRateUnit默认值：'x'参考值：'X'# 记忆播放播放器支持设置视频起播时间。 new Player({ el:document.querySelector('#mse'), url: 'video_url', lastPlayTime: 20, //视频起播时间（单位：秒） lastPlayTimeHideDelay: 5, //提示文字展示时长（单位：秒） }); 配置项：lastPlayTime默认值：0参考值：20配置项：lastPlayTimeHideDelay默认值：0参考值：5# 视频旋转用户点击旋转按钮后，视频会旋转90度。同时播放器已将旋转方法API暴露出来方便开发者直接调用，详见 API let player = new Player({ el:document.querySelector('#mse'), url: 'video_url', rotate: { //视频旋转按钮配置项 innerRotate: true, //只旋转内部video clockwise: false // 旋转方向是否为顺时针 } }); player.on('rotate',function(deg) { console.log(deg);// 旋转时会触发rotate事件，角度有四个值90，180，270，0 }) 默认值：{ innerRotate: false, clockwise: false }注意 当innerRotate为false时，播放器的宽高需要与视频的分辨率一致。 # 样式横屏全屏部分移动端场景的系统默认全屏功能不支持横屏，播放器支持通过配置 rotateFullscreen: true 使触发全屏时实现样式横屏全屏。使用该配置时不需配置rotate和cssFullscreen。 let player = new Player({ el:document.querySelector('#mse'), url: 'video_url', rotateFullscreen: true }); # 预览用户将鼠标指针移动到进度条某处时进度条上方会出现该时刻的视频预览图，服务端提供sprite图(由多张视频预览小图组成)作为预览图资源。 new Player({ el:document.querySelector('#mse'), url: 'video_url', thumbnail: { pic_num: 44, width: 160, height: 90, col: 10, row: 10, urls: ['./xgplayer-demo-thumbnail-1.jpg','./xgplayer-demo-thumbnail-2.jpg'], isShowCoverPreview: false }, }); 配置项含义pic_num该视频资源所需预览小图数量width预览小图宽度height预览小图高度colsprite图每列的预览小图数量rowsprite图每行的预览小图数量urlssprite图的源地址数组isShowCoverPreview预览图是否在播放器中央显示，默认false# 下一集视频跳转播放下一集，需提供视频资源列表。 let player = new Player({ el: document.querySelector('#mse'), url: 'url0', playNext: { urlList: [ 'url1', 'url2', 'url3' ], } }); # 视频下载视频下载控件，点击后下载视频。 let player = new Player({ download: true //设置download控件显示 }); 配置项：download默认值：false参考值：true | false# 弹幕用户观看视频时弹出的评论性字幕。与其它播放器弹幕效果不同的是，西瓜播放器通过算法设计实现了多条弹幕之间的不重叠和不碰撞，具体参考 前端算法之弹幕设计。 注意 从 [email protected] 版本开始支持以下弹幕使用方法。 new Player({ el:document.querySelector('#mse'), url: 'video_url', danmu: { comments: [ //弹幕数组 { duration: 15000, //弹幕持续显示时间,毫秒(最低为5000毫秒) id: '1', //弹幕id，需唯一 start: 3000, //弹幕出现时间，毫秒 prior: true, //该条弹幕优先显示，默认false color: true, //该条弹幕为彩色弹幕，默认false txt: '长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕', //弹幕文字内容 style: { //弹幕自定义样式 color: '#ff9500', fontSize: '20px', border: 'solid 1px #ff9500', borderRadius: '50px', padding: '5px 11px', backgroundColor: 'rgba(255, 255, 255, 0.1)' }, mode: 'top' //显示模式，top顶部居中，bottom底部居中，scroll滚动，默认为scroll // el: DOM //直接传入一个自定义的DOM元素作为弹幕，使用该项的话会忽略所提供的txt // eventListeners: [{ //支持自定义DOM设置DOM监听事件 // event: 'click', // listener: function (e) { // console.log('click') // }, // useCapture: false, // }] } ], area: { //弹幕显示区域 start: 0, //区域顶部到播放器顶部所占播放器高度的比例 end: 1 //区域底部到播放器顶部所占播放器高度的比例 }, closeDefaultBtn: true, //开启此项后不使用默认提供的弹幕开关，默认使用西瓜播放器提供的开关 defaultOff: true //开启此项后弹幕不会初始化，默认初始化弹幕 } }); 配置项含义comments弹幕数组area弹幕显示区域closeDefaultBtn开启此项后不使用默认提供的弹幕开关，默认使用西瓜播放器提供的开关defaultOff开启此项后弹幕不会初始化，默认初始化弹幕弹幕控制相关API： player.danmu.start() //弹幕初始化并播放(内部默认已调用) player.danmu.pause() //弹幕暂停 player.danmu.play() //弹幕继续播放 player.danmu.stop() //弹幕停止并消失 player.danmu.sendComment({ //发送弹幕 duration: 15000, id: 'id', start: 3000, txt: '弹幕内容', style: { color: '#ff9500', fontSize: '20px', border: 'solid 1px #ff9500', borderRadius: '50px', padding: '5px 11px', backgroundColor: 'rgba(255, 255, 255, 0.1)' } }) player.danmu.setCommentDuration (id, duration) //按照id改变某一个弹幕的持续显示时间 player.danmu.setAllDuration (mode, duration) //改变所有已加入队列弹幕的持续显示时间 player.danmu.setCommentID (oldID, newID) //改变某一个弹幕的id player.danmu.hide (mode) //屏蔽某一类弹幕(参数可选值 scroll | top | bottom | color) player.danmu.show (mode) //显示某一类弹幕(参数可选值 scroll | top | bottom | color) player.danmu.updateComments (comments, isClear) //更新弹幕数据（isClear默认为true，表示清空旧数据） # 弹幕控制面板将弹幕的屏蔽类型，不透明度，弹幕速度，字体大小等控制功能集成到控制面板，可对弹幕显示方式进行即时设置，提高西瓜播放器的用户体验度。 注意 该控制面板属于弹幕配置中的子配置，需要在弹幕配置中进行打开或关闭 new Player({ el:document.querySelector('#mse'), url: 'video_url', danmu: { panel: true, //弹幕面板 comments: [], //弹幕数组 area: { //弹幕显示区域 start: 0, //区域顶部到播放器顶部所占播放器高度的比例 end: 1 //区域底部到播放器顶部所占播放器高度的比例 }, closeDefaultBtn: true, //开启此项后不使用默认提供的弹幕开关，默认使用西瓜播放器提供的开关 defaultOff: true //开启此项后弹幕不会初始化，默认初始化弹幕 } }); 配置项: panel默认值: false参考值: true | false弹幕控制面板相关功能: 控制功能内容屏蔽类型滚动弹幕 顶部弹幕 底部弹幕 彩色弹幕显示区域弹幕显示区为播放器可视区顶部到底部, 0 1/4屏 1/2屏 3/4屏 全屏不透明度控制显示弹幕的透明度弹幕速度通过显示时长控制弹幕速度,慢[15000ms] 中[10000ms] 快[5000ms]字体大小控制弹幕字体大小, 小[10px] 中[20px] 大[30px]# 外挂字幕播放器支持加载多条WebVTT格式的外挂字幕，并可在播放过程中切换或关闭、打开字幕。外挂字幕格式可参考 WebVTT MDN。 另外，可通过textTrackActive配置项修改外挂字幕控件的触发方式（hover或click）。 new Player({ el:document.querySelector('#mse'), url: 'video_url', textTrack: [ { src: "./textTrack-1.vtt", kind: "subtitles", label: "字幕1", srclang: "zh", default: true }, { src: "./textTrack-2.vtt", kind: "subtitles", label: "字幕2", srclang: "en", default: false } ], textTrackStyle: { "background-color": "#ff0", "color": "#000", "font-size": "26px", }, textTrackActive: 'click' }); 配置项：textTrack含义：多条字幕信息组成的数组默认值：[]参数意义可选值src字幕文件的URL，必需kind字幕类型，可选参考label字幕标签，必需srclang字幕文本语言，可选zh, en...default默认字幕true, false配置项：textTrackStyle含义：字幕相关CSS样式配置默认值：{}配置项：textTrackActive默认值：'hover'参考值：'hover' | 'click'外挂字幕相关API： player.setSubTitles([ //更换字幕源 { src: "./textTrack-3.vtt", kind: "subtitles", label: "字幕3", srclang: "zh", default: true }, { src: "./textTrack-4.vtt", kind: "subtitles", label: "字幕4", srclang: "en", default: false } ]) # 画中画画中画功能支持用户调用系统API以小窗的形式观看视频。 new Player({ el:document.querySelector('#mse'), url: 'video_url', pip: true }); 配置项：pip默认值：false参考值：true | false# 迷你播放器迷你播放器功能支持用户在浏览网页其它内容时继续以小窗的形式观看视频，同时可以拖拽改变小窗在页面中的fix位置。 new Player({ el:document.querySelector('#mse'), url: 'video_url', miniplayer: true, miniplayerConfig: { bottom: 200, right: 0, width: 320, height: 180 } });配置项：miniplayer 默认值：false 参考值：true | false 配置项：miniplayerConfig 含义：小窗位置配置项 # 网页样式全屏样式全屏功能不会隐藏当前浏览器的标签栏，导航栏，只是在当前页面内部全屏显示。 new Player({ el:document.querySelector('#mse'), url: 'video_url', cssFullscreen: true }); 配置项：cssFullscreen默认值：false参考值：true | false# 截图截图功能支持用户对当前视频播放窗口进行即时截屏，截图尺寸即为当前视频播放窗口的尺寸，截图默认为 .png 格式 new Player({ el:document.querySelector('#mse'), url: 'video_url', screenShot: { saveImg: true, quality: 0.92, type: 'image/png', format: '.png' } }) 配置项：saveImg含义：是否下载截图默认值：true参考值：true | false配置项：quality含义：截图质量默认值：0.92配置项：type含义：图片格式默认值：'image/png'配置项：format含义：下载截图后缀名默认值：'.png'# 预览本地视频支持用户在线预览本地视频。 new Player({ el:document.querySelector('#mse'), url: 'video_url', preview: { uploadEl: uploadDom } }); 配置项：uploadEl含义：Dom元素，用于放置上传视频文件的相关控件# 进度条特殊点标记支持在进度条上标出重要的位置。 new Player({ el:document.querySelector('#mse'), url: 'video_url', progressDot: [ { time: 10, //展示标记的时间 text: '标记文字', //鼠标hover在标记时展示的文字 duration: 8, //标记段长度（以时长计算） style: { //标记样式 background: 'blue' } }, { time: 22, text: '标记文字' }, { time: 56, duration: 8, }, { time: 76, } ] }); 配置项：progressDot含义：标记点所对应的播放时间支持动态增加/删除标记 player.addProgressDot(time, text, duration, style) //添加标记（参数含义同上，后3项可选传入） player.removeProgressDot(time) //删除标记 player.removeAllProgressDot() //删除所有标记 # 键盘快捷键可通过该配置项开启键盘快捷键：按 → 键快进10秒， 按 ← 键后退10秒，按 ↑ 键调高音量，按 ↓ 键调低音量，按 space 键切换播放/暂停状态。 new Player({ el: document.querySelector('#mse'), url: 'video_url', keyShortcut: 'on', keyShortcutStep: { //设置调整步长 currentTime: 15, //播放进度调整步长，默认10秒 volume: 0.2 //音量调整步长，默认0.1 } }); 配置项：keyShortcut默认值：'on'参考值：'on' | 'off'# 自定义错误提示可通过该配置项自定义播放器出现错误时的文字提示HTML内容。 new Player({ el: document.querySelector('#mse'), url: 'video_url', errorTips: `请刷新试试` }); 配置项：errorTips默认值：''# 插件生效前执行播放器使用自执行的插件机制，如需要在插件生效前执行某些方法，开发者可将相关方法写在execBeforePluginsCall配置项数组中 new Player({ el: document.querySelector('#mse'), url: 'video_url', execBeforePluginsCall: [() => { console.log('Execute before plugins call') }] }); 配置项：execBeforePluginsCall默认值：[]# 其它交互配置播放器默认有以下行为： video触发click事件后视频切换播放/暂停状态，可通过closeVideoClick关闭video触发dblclick事件后进入/退出全屏，可通过closeVideoDblclick关闭移动端下默认video触发touchend事件后视频切换播放/暂停状态，可通过closeVideoTouch关闭鼠标移出播放器范围时触发blur事件，可通过closePlayerBlur关闭；另外可通过leavePlayerTime配置项来实现延迟触发blur事件的效果鼠标移出播放器控制条范围时触发focus事件，可通过closeControlsBlur关闭播放器范围时移动鼠标时触发video focus，可通过closeFocusVideoFocus关闭播放器触发play事件时触发video focus，可通过closePlayVideoFocus关闭播放器范围内禁止右键菜单，可通过enableContextmenu启用右键菜单可通过设置 disableProgress: true 禁止进度条拖动交互（播放器被接管或劫持时无效，比如iOS或安卓部分环境下）可通过设置 allowSeekPlayed: true 支持进度条只能拖动到已播过部分（播放器被接管或劫持时无效，比如iOS或安卓部分环境下）支持视频播放结束后的交互行为：允许点击播放控件allowPlayAfterEnded，允许拖动进度条allowSeekAfterEnded可通过设置 closeVideoPreventDefault: true 关闭点击播放器video元素的阻止默认动作行为可通过设置 closeVideoStopPropagation: true 关闭点击播放器video元素的阻止冒泡行为可通过设置 closeInactive: true 使播放器控制栏常驻不隐藏可通过设置 enableVideoDbltouch: true 使移动端支持双击暂停/播放这些行为可通过相关配置项来关闭。 new Player({ el: document.querySelector('#mse'), url: 'video_url', closeVideoClick: true, closeVideoDblclick: true, closeVideoTouch: true, closePlayerBlur: true, closeControlsBlur: true, closeFocusVideoFocus: true, closePlayVideoFocus: true, enableContextmenu: true, disableProgress: true, allowSeekPlayed: true, allowPlayAfterEnded: true, allowSeekAfterEnded: true, closeVideoPreventDefault: true, closeVideoStopPropagation: true, closeInactive: true, enableVideoDbltouch: true, }); # 清晰度切换配置清晰度插件配置虽然属于内置控件但是比较特殊，不采用传统的配置项而是采用事件驱动的方式。因为我们的清晰度设计更加抽象，不仅支持明确的视频地址列表，还要支持虚拟地址列表，所以采用事件驱动。 另外，可通过definitionActive配置项修改清晰度控件的触发方式（hover或click）。 示例 let player = new Player({ el:document.querySelector('#mse'), url: 'video_url', definitionActive: 'click' }); player.emit('resourceReady', [{name: '高清', url: 'url1'}, {name: '超清', url: 'url2'}]); 配置项：definitionActive默认值：'hover'参考值：'hover' | 'click'注意 如果不想使用清晰度切换功能，不激活 resourceReady 事件就可以；如果视频地址列表只有一个地址，清晰度切换控件也会自动关闭。 # 关闭内置控件xgplayer播放器对于原生video的基本功能进行了优化和封装，如果不想使用xgplayer内置控件，可以通过ignores配置项关闭，使用自己开发的相同功能插件进行替换。 new Player({ el:document.querySelector('#mse'), url: 'video_url', ignores: ['replay'] }); 配置项：ignores默认值：[]参考值： ['time', 'definition', 'error', 'fullscreen', 'i18n', 'loading', 'mobile', 'pc', 'play', 'poster', 'progress', 'replay', 'volume']参数意义time当前播放时间/视频时长definition清晰度切换error报错提示fullscreen全屏切换i18n多语种切换loading加载提示mobile手机交互pc桌面视频交互play控制条的播放、暂停按钮poster封面图插件progress视频进度条replay重播交互与提示volume音量控制注意 start控件(画面中间的播放按钮)不支持ignore，可以用css覆盖方式隐藏 # 关闭控制条播放器控制条由播放/暂停、定位、音量、全屏切换等元素组成，开发者可通过controls:false 将其全部关闭。 new Player({ el:document.querySelector('#mse'), url: 'video_url', controls: false }); 配置项：controls默认值：true参考值 true | false# 控制条选项配置选择关闭部分控制条选项可以通过配置controlsList选项实现。 new Player({ el:document.querySelector('#mse'), url: 'video_url', controlsList: ['nodownload'] }); 配置项：controlsList默认值：['nodownload'],参考值：['nodownload','nofullscreen','noremoteplayback']注意 只对原生video有效，对自定义UI请使用ignores选项 # 播放镜像开启airplay选项可以将iOS设备上的视频传送到支持airplay的设备上进行播放，具体 参考。 new Player({ el:document.querySelector('#mse'), url: 'video_url', airplay: false }); 配置项：airplay默认值：''参考值：true | false# 功能插件开关配置通过播放器的配置可以实现插件动态开启和关闭，只要在功能插件读取该配置即可。 new Player({ el:document.querySelector('#mse'), url: 'video_url', pluginRule: ()=>{return true} }); 配置项：pluginRule默认值：''参考值：function(){return true|false}比如：xgplayer-mp4插件想做流量测试，一半用户开启功能，一半用户不开启，就可以通过如下代码实现： new Player({ pluginRule:function(){return Math.random()>0.5} }) # 国际化西瓜播放器的文本提示支持多语种显示，目前支持中文、英文、日文。如有更多语种需求请在github中提issue。 import Player from 'xgplayer'; let player=new Player({ id:'mse', url: 'video_url', lang: 'en' }); 配置项：lang默认值：'zh-cn'参考值：'zh-cn' | 'en' | 'jp'# 内联模式该选项在手机观看时，开启ios和微信的内联模式，配置项：playsinline 知识 参考 new Player({ el:document.querySelector('#mse'), url: 'video_url', playsinline: false }); 配置项：playsinline默认值：false参考值：true | false# 手机调试要使用该功能，请先在开发者电脑安装 weinre，命令： npm -g install weinre。调试手机的时候，debug选项配置好，然后在命令行开启服务，具体命令页面中会提示。关于weinre知识 参考 new Player({ el:document.querySelector('#mse'), url: 'video_url', debug: { host:'10.2.106.238', port:9090 } }); 配置项：debug默认值：{host:'127.0.0.1',port:9090}参考值：{host:${开发者电脑ip},port:9090}# 微信同层播放同层播放 参考 new Player({ el:document.querySelector('#mse'), url: 'video_url', 'x5-video-player-type': 'h5', playsinline: false }); 配置项：x5-video-player-type默认值：''参考值：'h5'# 微信全屏播放具体 参考 new Player({ el:document.querySelector('#mse'), url: 'video_url', 'x5-video-player-fullscreen': false }); 配置项：x5-video-player-fullscreen默认值：''参考值：true | false# 微信横竖屏控制具体 参考 new Player({ el:document.querySelector('#mse'), url: 'video_url', 'x5-video-orientation': 'portraint' });配置项：x5-video-orientation 默认值：'' 参考值：'landscape' | 'portraint' 'landscape' 横屏'portraint' 竖屏# 自定义配置如果自定义插件，想通过播放器初始化的时候传递配置参数进来，可以直接定义。 new Player({ el:document.querySelector('#mse'), url: 'video_url', customConfig:{ // } });在插件内部通过player.config.customConfig拿到配置。其中 player 是插件定义函数都具备的当前播放器实例，customConfig是可以随便定义的，示例只是举例。 |
| CopyRight 2018-2019 实验室设备网 版权所有 |