插件描述：一款支持web端、移动端、支持mp4 flv hls 视频格式的视频播放器
更新时间：2021-11-08 10:16:01
video-PluginVideo
指南 一款界面精美的视频播放插件 - 自定义主色调 - 支持 mp4、hls、flv 格式 - 兼容web端 - 兼容移动端 - 支持移动端手势操作 - 常用的事件监听 - 丰富的接口
使用
1 2 3 4 5 6 7 8 | var videoDom = document.getElementById('video') var video = PluginVideo.create(videoDom, { type: 'mp4', slideControl: false, // 是否空闲时隐藏控件栏 autoplay: true // 自动播放}) video.addEventListener('error', (event) => { console.log(event)}) |
option
注意option中的按钮显隐是指插件初始化时是否生成该按钮，与方法中的显隐有本质上的区别
| 参数 | 说明 | 类型 |
| src| | 视频路径 | string |
| type| | 视频类型,可取值:mp4 hls flv,默认mp4 | string |
| poster | 封面路径 | string |
| loop | 视频是否应在结束时再次播放 | boolean |
| themeColor | 主题颜色,默认rgb(99,108,255) | string |
| volume | 默认音量 0~1 默认0.5 | string |
| playbackRate | 播放速度 默认1 | Number |
| muted | 是否静音,默认否 | boolean |
| autoplay | 是否自动播放,由于浏览器的局限性,为了能够顺利自动播放,所以启用此属性后播放器将会静音.默认否 | boolean |
| slideControl | 在操作空闲期是否隐藏控件栏 默认否 | boolean |
| screenshot | 是否显示截屏功能按钮，默认 是 | boolean |
| resetMenu | 是否显示刷新功能按钮，默认 是 | boolean |
| volumeMenu | 是否显示音量按钮和音量条，默认 是 | boolean |
| fullScreenMenu | 是否显示全屏功能按钮，默认 是 | boolean |
| bigPlayMenu | 是否显示大号的播放按钮，默认 是 | boolean |
method
| 方法名 | 说明 | 返回值 |
| play( ) | 播放 | none |
| pause( ) | 暂停 | none |
| setThemeColor(themeColor) | 更换主题色 | none |
| setPoster(poster) | 设置封面路径 | none |
| setSrc(src) | 设置视频路径 | none |
| serCurrentTime(seconds) | 跳转至指定播放秒数 | none |
| setVolume(volume) | 设置音量 | none |
| setMuted(isMuted) | 是否静音 | none |
| setScreen(isScreen) | 是否进入全屏 | none |
| setLoop(loop) | 是否应在结束时再次播放 | none |
| setPlaybackRate(playbackRate) | 设置倍速 | none |
| setCrossOrigin(crossOrigin) | 设置视频的crossOrigin | none |
| getPicture( ) | 返回当前视频帧的截图 base64 | base64字符串 |
| showShotMenu( ) | 显示拍照按钮 | none |
| hideShotMenu( ) | 隐藏拍照按钮 | none |
| showPlayMenu( ) | 显示暂停/播放按钮 | none |
| hidePlayMenu( ) | 隐藏暂停/播放按钮 | none |
| showRefreshMenu( ) | 显示刷新按钮|none | none |
| hideRefreshMenu( ) | 隐藏刷新按钮 | none |
| showRateMenu( ) | 显示倍速按钮 | none |
| hideRateMenu( ) | 隐藏倍速按钮 | none |
| showVolumeMenu( ) | 显示音量按钮 | none |
| hideVolumeMenu( ) | 隐藏倍速按钮 | none |
| showFullScreenMenu( ) | 显示全屏按钮 | none |
| hideFullScreenMenu( ) | 隐藏全屏按钮 | none |
| getPlayMenu( ) | 获取暂停/播放按钮DOM | DOM Element |
| getRefresh( ) | 获取刷新按钮DOM | DOM Element |
| getRateMenu( ) | 获取倍速按钮DOM | DOM Element |
| getFullScreenMenu( ) | 获取全屏按钮DOM | DOM Element |
| addCustomMenu(element, appendTo) | 添加自定义控件，参数1 按钮dom，参数2 将该按钮插入到指定dom后，一般来说，我们可以将自定义按钮插入到其它按钮后边，插件已有按钮的dom节点可以通过以上提供的方法来获取。如果参数2不传值，则默认插入到控件栏最后一个 | none |
| destruction( ) | 销毁当前插件对象 | none |
event
| 事件名称 | 说明 |
| timeupdate | 随着视频播放进度实时触发 |
| loadstart | 当视频开始加载资源时触发 |
| waiting | 当视频出现缓冲状态时触发 |
| play | 当视频开始播放时触发 |
| pause | 当视频暂停时触发 |
| speeking | 当点击视频进度条跳转播放进度时触发 |
| ended | 视频播放结束后触发 |
| error | 视频播放报错时触发 |
| playing | 当视频可以播放时触发 |
| muted | 当视频状态转为静音时触发 |
| volumechange | 当视频音量发生变化时触发 |
| loadedmetadata | 当视频加载成功后触发 |
| screenfull | 当播放器全屏状态法生变化时触发 |
| ratechange | 当播放倍速发生变化时触发 |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery移动端产品列表展示布局
- 下一个特效： 网站常用留言模板