web端、移动端视频播放器(原创)

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

 17896  89  查看评论 (15)
分享到微信朋友圈
X
web端、移动端视频播放器(原创) ie兼容12

更新时间: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,默认mp4string
poster封面路径string
loop视频是否应在结束时再次播放boolean
themeColor主题颜色,默认rgb(99,108,255)string
volume默认音量 0~1 默认0.5string
playbackRate播放速度 默认1Number
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)设置视频的crossOriginnone
getPicture( )返回当前视频帧的截图 base64base64字符串
showShotMenu( )显示拍照按钮none
hideShotMenu( )隐藏拍照按钮none
showPlayMenu( )显示暂停/播放按钮none
hidePlayMenu( )隐藏暂停/播放按钮none
showRefreshMenu( )显示刷新按钮|nonenone
hideRefreshMenu( )隐藏刷新按钮none
showRateMenu( )显示倍速按钮none
hideRateMenu( )隐藏倍速按钮none
showVolumeMenu( )显示音量按钮none
hideVolumeMenu( )隐藏倍速按钮none
showFullScreenMenu( )显示全屏按钮none
hideFullScreenMenu( )隐藏全屏按钮none
getPlayMenu( )获取暂停/播放按钮DOMDOM Element
getRefresh( )获取刷新按钮DOMDOM Element
getRateMenu( )获取倍速按钮DOMDOM Element
getFullScreenMenu( )获取全屏按钮DOMDOM 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当播放倍速发生变化时触发
相关插件-音频和视频

完美仿网易网页侧边隐藏音乐播放器

非常好用的网页侧边音乐播放器(在服务器下完美运行)
  音频和视频
 47496  435

jQuery视频弹窗插件

样式已经写好,使用方法也简单。
  音频和视频
 63821  466

jQuery+HTML5类似百度音乐网页播放器代码

一款jQuery+HTML5类似百度音乐网页播放器代码免费下载,在HTML5盛行的今天,jQuery+HTML5取代了大量的程序开发工作,一款类似百度音乐播放器代码,功能灰常强大!支持火狐、IE9以上等支持HTML5+CSS3浏览器。(兼容测试:FireFox、Chrome、Safari、Opera等支持HTML5/CSS3浏览器)
  音频和视频
 55373  462

jQuery自定audio音频

jQuery自定义audio音频样式,包括功能。
  音频和视频
 26876  319

讨论这个项目(15)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    呆瓜 0
    2023/11/28 15:47:57
    苹果默认调原生播放器啊 楼主有办法解决嘛~
        ELLIPSIS0
        2024/1/4 16:03:18
        给video加个属性就行,移动端如果兼容苹果建议别用这个了,当时开发时没有考虑苹果系统,因为当时我还买不起苹果手机😀。后来我实际项目用到了,我修改花了好大力气
    回复
    灰色男生 0
    2023/5/30 21:20:18
    感谢分享,请问rtmp可以播放么?
        ELLIPSIS1
        2023/6/29 17:35:11
        flash已经被淘汰了,建议用flv或者m3u8,直播用flv格式,点播用m3u8
    回复
    LiveU 0
    2023/3/2 13:33:40
    m3u8地址播不出来啊!为什么!
        ELLIPSIS1
        2023/5/9 10:27:40
        type属性设置为 'hls'
    回复
    tory123000 0
    2023/2/28 3:35:09
    如何设置播放时不全屏? 回复
    李鹏飞 0
    2022/5/8 17:28:45
    screenshot --> screenshotMenu 初始化的时候展示,要浅改一下
        ELLIPSIS0
        2022/5/11 15:51:11
        最近没有调整的档期,你用css隐藏掉就行啦,影响不大
    回复
    李鹏飞 0
    2022/5/8 17:24:22
    screenshot 这个属性设置 false 没有生效 -- 截图这个 回复
    李鹏飞 0
    2022/5/8 17:23:34
    screenshot 这是指false没有生效
        ELLIPSIS0
        2022/6/20 16:58:03
        暂时用CSS设置隐藏掉就行了😀
        淡至若无0
        2022/8/4 18:01:42
        CSS隐藏声音那就有问题了,不可以拉动了
    回复
    ? InTime 0
    2022/4/23 22:14:52
    进度条挡住字幕了,怎么调整?
        ? InTime0
        2022/4/23 22:29:18
        没注意看说明哈,开启就可以了
        slideControl: true, // 是否空闲时隐藏控件栏
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复