H5 web端、移动端视频播放器

更新时间: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, {
    src: 'http://vjs.zencdn.net/v/oceans.mp4', // 播放地址  
    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 当播放倍速发生变化时触发

此处内容需要回复后才能查看

本文作者:舞夕博客
文章标题:H5 web端、移动端视频播放器
本文链接:http://www.57bk.xyz/archives/123
THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录