web端、移动端视频播放器（原创）

所属分类：媒体-音频和视频

20097 96 查看评论 (17)

分享到微信朋友圈

查看演示立即下载

插件描述：一款支持web端、移动端、支持mp4 flv hls 视频格式的视频播放器

更新时间：2021-11-08 10:16:01

video-PluginVideo

指南一款界面精美的视频播放插件 - 自定义主色调 - 支持 mp4、hls、flv 格式 - 兼容web端 - 兼容移动端 - 支持移动端手势操作 - 常用的事件监听 - 丰富的接口

使用

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	当播放倍速发生变化时触发