{"id":13671221,"url":"https://github.com/robinma/videoplayer","last_synced_at":"2026-01-10T19:01:48.328Z","repository":{"id":19260316,"uuid":"22496257","full_name":"robinma/videoplayer","owner":"robinma","description":"this is a html5 video player","archived":false,"fork":false,"pushed_at":"2018-09-26T07:57:50.000Z","size":116,"stargazers_count":106,"open_issues_count":1,"forks_count":52,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-27T14:38:43.806Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/robinma.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-08-01T05:29:25.000Z","updated_at":"2025-04-25T07:46:31.000Z","dependencies_parsed_at":"2022-08-01T04:48:02.578Z","dependency_job_id":null,"html_url":"https://github.com/robinma/videoplayer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/robinma/videoplayer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinma%2Fvideoplayer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinma%2Fvideoplayer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinma%2Fvideoplayer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinma%2Fvideoplayer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robinma","download_url":"https://codeload.github.com/robinma/videoplayer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinma%2Fvideoplayer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28257483,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2026-01-10T02:00:06.867Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T09:01:03.367Z","updated_at":"2026-01-10T19:01:48.302Z","avatar_url":"https://github.com/robinma.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"videoplayer（**[demo view](http://htmlpreview.github.io/?https://github.com/robinma/videoplayer/blob/master/demo/videoplayer.html)**）\n===========\n\n\n#一 简介\n------\n此组件，主要是实现html5 video player 视频播放功能，主要实再现了视频的通常的播放控制功能。\n##1.1 主要功能##\n- 播放暂停功能\n- 进度条控制及拖放\n- 音量控制\n- 全屏控制，分为虚拟全屏和原生全屏\n- ...\n\n##1.2 问题反馈\n- email: ahmzj@163.com\n- QQ: 316933268\n\n#二 how to use\n-----\nthe player plugin relative jquery.1.7 +\n##2.1 include files##\nat fire,you have to include js file and style sheet.\n\n     \u003clink rel=\"stylesheet\" href=\"../src/css/videoplayer.css\"\u003e\n     \u003cscript type=\"text/javascript\" src=\"../src/js/videoplayer.js\"\u003e\u003c/script\u003e\n     \n##2.2 init to do\n\n    /**\n     * param {String} videoSelector,is a dom id or jquery selector\n     * param {Data} params.it set videoplayer params and some events\n     */\n    var videoplayer = videoPlayer(videoSelector,params);\n    \n**demo**\n\n    var videoplayer2=videoPlayer('mod_player2',{\n            autoPlay:false,\n            muted:true,\n            setSource:function(canplayType){\n                \n                //if(canplayType == 'mp4'){\n                //    return 'http://mediaelementjs.com/media/echo-hereweare.mp4'\n                //}\n                if (canplayTypes.indexOf('m3u8') \u003e= 0) {\n                    return 'http://play.ergeyy.com/vedios/stream/xiaopingguo.m3u8'\n                }\n            },\n            success:function(videoElement,node,videoObj){\n                console.log('----success ',arguments)\n                videoElement.addEventListener('timeupdate',function(){\n\t\t\t\t//when timeupdata event to do ...\n                },false);\n\n                videoObj.timeupdate(function(currentTime){\n\t\t\t\t//when video play to do, speed is 1s\n                });\n            },\n            //fires when a problem is detected\n            error:function(){\n\n            }\n\n        });\n##params##\n\n###width###\n*width {Number ::853}：播放器默认宽度*\n\n        var videoplayer2=videoPlayer('mod_player2',{\n            //....\n            width:853,\n            //...\n        });\n\n###height###\n*height {Number ::480}：播放器默认高度*\n\n        var videoplayer2=videoPlayer('mod_player2',{\n            //....\n            height:480,\n            //...\n        });\n        \n###muted###\n\n*muted {boolean :: false}:默认是否静音*\n\n\n    var videoplayer2=videoPlayer('mod_player2',{\n            //....\n            muted:true,\n            //...\n        });\n\n###setSource###\n    *setSource {function}:设置视频源地址*\n\n        var videoplayer2=videoPlayer('mod_player2',{\n                setSource:function(canplayType){\n                    //canplayType : ['mp4', 'ogg', 'webm']\n                    if (canplayTypes.indexOf('m3u8') \u003e= 0) {\n                        return 'http://play.ergeyy.com/vedios/stream/xiaopingguo.m3u8'\n                    }\n                    //if(canplayType == 'mp4'){\n                    //    return 'http://mediaelementjs.com/media/echo-hereweare.mp4'\n                    //}\n                }            \n            });\n###success###\n*success {function}:播放成功时执行*\n\n       var videoplayer2=videoPlayer('mod_player2',{\n            success:function(videoElement,node,videoObj){\n                /**\n                 *params videoElement {domObj} is video dom object\n                 *params videoObj {videoPlayerObject} is videoPlayer object\n                 */\n                videoElement.addEventListener('timeupdate',function(){\n\t\t\t\t//when timeupdata event to do ...\n                },false);\n\n                videoObj.timeupdate(function(currentTime){\n\t\t\t\t//when video play to do, speed is 1s\n                });\n            },\n        });\n###canfast###\n*canfast {boolean ::false}:是否可以快进*\n\n    var videoplayer2=videoPlayer('mod_player2',{\n            //....\n            canfast:true,\n            //...\n        }); \n###virtualFullScreen###\n*virtualFullScreen｛boolean ::true｝ 是否虚拟全屏*\n\n    var videoplayer=videoPlayer('mod_player',{\n\n       virtualFullScreen:true,\n\n    });\n\n\n\n------\n------\n##API##\n\n###videoplyer 方法###\n\n***play([showControllBar])  播放视频***\n\u003e @showControllBar [boolean :false] 是否显示控制板，默认为false,主要配合pause使用。\n\n    var videoplayer = photofigure(imgdata,2);\n\tvideoplayer.play();\n\t//or\n    var videoplayer2=videoPlayer('mod_player2',{\n        success:function(videoElement,node,videoObj){\n\t\t\t//use play method\n            videoObj.play();\n\t\t\t//user video Element default method\n\t\t\tvideoElement.play();\n        },\n    });\n\t\n***pause([hideControllBar]) 暂停视频***\n\u003e@hideControllBar [boolean:false] 是否隐藏控制面板，默认为false,不隐藏。\n\n\n    var videoplayer = photofigure(imgdata,2);\n\tvideoplayer.pause();\n\t//or\n    var videoplayer2=videoPlayer('mod_player2',{\n        success:function(videoElement,node,videoObj){\n\t\t\t//use pause method\n            videoObj.pause();\n\t\t\t//user video Element default method\n\t\t\tvideoElement.pause();\n        },\n    });\n***fullScreen() 进入全屏模式***\n\n    var videoplayer = photofigure(imgdata,2);\n\tvideoplayer.fullScreen();\n\t//or\n    var videoplayer2=videoPlayer('mod_player2',{\n        success:function(videoElement,node,videoObj){\n\n\t\t\t//use fullScreen method\n            videoObj.fullScreen();\n\n        },\n    });\n\n***unFullScreen() 退出全屏模式***\n\n    var videoplayer = photofigure(imgdata,2);\n\tvideoplayer.unFullScreen();\n\t//or\n    var videoplayer2=videoPlayer('mod_player2',{\n        success:function(videoElement,node,videoObj){\n\t\t\t//use unFullScreen method\n            videoObj.unFullScreen();\n        },\n    });\n\n***setCurrentTime(newTime) 设置当前播放点,单位：秒***\n\n\t  var videoplayer = photofigure(imgdata,2);\n\t  videoplayer.setCurrentTime(23);\n\t  //or\n\tvar videoplayer2=videoPlayer('mod_player2',{\n\t    success:function(videoElement,node,videoObj){\n\t      //use video element set currentTime\n\t      videoElement.currentTime=23\n\t      //or\n\t      //set currentTime\n\t      videoObj.setCurrentTime(23);\n\t    },\n\t});\n\n***getContiune() {boolean} 获取是否可以连续的值***\n\n***timeupdate(callback) 监控更新时间，时间间隔为 1s***\n\n    var videoplayer = photofigure(imgdata,2);\n\tvideoplayer.timeupdate(function(currenTime){\n\t\tconsole.log('currenTime:',currenTime)\t\n\t});\n\t//or\n    var videoplayer2=videoPlayer('mod_player2',{\n        success:function(videoElement,node,videoObj){\n\t\t\t//use timeupdate method\n            videoObj.timeupdate(function(currenTime){\n\t\t\t\tconsole.log('currenTime:',currenTime)\n\t\t\t});\n        },\n    });\n\n\n\n\u003e待整理。。。\n######\n\n----\n\n\u003e chrome55+，系统全屏时，会有下载按钮，解决方式是添加css\n\n\n    \n\tvideo::-internal-media-controls-download-button {\n\tdisplay:none;\n\t}\n\n\tvideo::-webkit-media-controls-enclosure {\n\toverflow:hidden;\n\t}\n\n\tvideo::-webkit-media-controls-panel {\n\twidth: calc(100% + 30px); /* Adjust as needed */\n\t}\n\n##videoPlayer Events事件方法##\n\n***videoObj.on('next',function) 当点击next时，触发***\n\n    var videoplayer = photofigure(imgdata,2);\n\tvideoplayer.on('next',function(){\n\t\tconsole.log('switch next one');\n\t})\n\t//or\n    var videoplayer2=videoPlayer('mod_player2',{\n        success:function(videoElement,node,videoObj){\n\t\t\t//use next event\n            videoplayer.on('next',function(){\n\t\t\t\tconsole.log('switch next one');\n\t\t\t})\n        },\n    });\n\n***videoObj.on('continue',function) 当点击连播时，触发***\n\n    var videoplayer = photofigure(imgdata,2);\n\tvideoplayer.on('continue',function(currentStatus){\n\t\tconsole.log('can contnue play:',currentStatus);\n\t})\n\t//or\n    var videoplayer2=videoPlayer('mod_player2',{\n        success:function(videoElement,node,videoObj){\n\t\t\t//use continue event\n            videoplayer.on('continue',function(currentStatus){\n\t\t\t\tconsole.log('can contnue play:',currentStatus);\n\t\t\t})\n        },\n    });\n\n\n\u003e待整理。。。\n\n#下面是video标签的属性，方法 和事件#\n\n##\u003cvideo\u003e标签的属性##\n----\n- src ：视频的属性\n- poster：视频封面，没有播放时显示的图片\n- preload：预加载\n- autoplay：自动播放\n- loop：循环播放\n- controls：浏览器自带的控制条\n- width：视频宽度\n- height：视频高度\n\n**html 代码**\n\n      \u003cvideo id=\"media\" src=\"http://www.sundxs.com/test.mp4\" controls width=\"400px\" heigt=\"400px\"\u003e\u003c/video\u003e  \n      //audio和video都可以通过JS获取对象,JS通过id获取video和audio的对象\n\n**获取video对象**\n\n      Media = document.getElementById(\"media\"); \n\n##Media方法和属性：##\n\u003eHTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement\n\n- Media.error; //null:正常  \n- Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效\n\n***//网络状态 ***  \n- Media.currentSrc; //返回当前资源的URL \n- Media.src = value; //返回或设置当前资源的URL  \n- Media.canPlayType(type); //是否能播放某种格式的资源  \n-  Media.networkState; //0.此元素未初始化  1.正常但没有使用网络  2.正在下载数据  3.没有找到资源  \n- Media.load(); //重新加载src指定的资源  \n- Media.buffered; //返回已缓冲区域，TimeRanges  \n- Media.preload; //none:不预载 metadata:预载资源信息 auto:\n  \n***//准备状态 ***\n- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA\n- Media.seeking; //是否正在seeking \n\n***//回放状态 ***\n\n- Media.currentTime = value; //当前播放的位置，赋值可改变位置  \n- Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0  \n- Media.duration; //当前资源长度 流返回无限  \n- Media.paused; //是否暂停  \n- Media.defaultPlaybackRate = value;//默认的回放速度，可以设置  \n- Media.playbackRate = value;//当前播放速度，设置后马上改变  \n- Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文  \n- Media.seekable; //返回可以seek的区域 TimeRanges  \n- Media.ended; //是否结束  \n- Media.autoPlay;  //是否自动播放  \n- Media.loop;  //是否循环播放  \n- Media.play();    //播放  \n- Media.pause();   //暂停  \n\n*** //视频控制  ***\n\n- Media.controls;//是否有默认控制条  \n- Media.volume = value; //音量  \n- Media.muted = value; //静音  \n***TimeRanges(区域)对象  ***\n- TimeRanges.length; //区域段数  \n- TimeRanges.start(index) //第index段区域的开始位置  \n- TimeRanges.end(index) //第index段区域的结束位置  \n\n***//相关事件***\n\n      var eventTester = function(e){\n         Media.addEventListener(e,function(){\n             console.log((new Date()).getTime(),e)\n         },false);\n     }\n\n- eventTester(\"loadstart\");   //客户端开始请求数据  \n- eventTester(\"progress\");    //客户端正在请求数据 \n- eventTester(\"suspend\");     //延迟下载  \n- eventTester(\"abort\");       //客户端主动终止下载（不是因为错误引起）\n-  eventTester(\"loadstart\");   //客户端开始请求数据  \n- eventTester(\"progress\");    //客户端正在请求数据  \n- eventTester(\"suspend\");     //延迟下载  \n- eventTester(\"abort\");       //客户端主动终止下载（不是因为错误引起），  \n- eventTester(\"error\");       //请求数据时遇到错误  \n- eventTester(\"stalled\");     //网速失速  \n- eventTester(\"play\");        //play()和autoplay开始播放时触发  \n- eventTester(\"pause\");       //pause()触发  \n- eventTester(\"loadedmetadata\");  //成功获取资源长度  \n- eventTester(\"loadeddata\");  //  \n- eventTester(\"waiting\");     //等待数据，并非错误  \n- eventTester(\"playing\");     //开始回放  \n- eventTester(\"canplay\");     //可以播放，但中途可能因为加载而暂停  \n- eventTester(\"canplaythrough\"); //可以播放，歌曲全部加载完毕  \n- eventTester(\"seeking\");     //寻找中  \n- eventTester(\"seeked\");      //寻找完毕  \n- eventTester(\"timeupdate\");  //播放时间改变  \n- eventTester(\"ended\");       //播放结束  \n- eventTester(\"ratechange\");  //播放速率改变  \n- eventTester(\"durationchange\");  //资源长度改变  \n- eventTester(\"volumechange\");    //音量改变  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobinma%2Fvideoplayer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobinma%2Fvideoplayer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobinma%2Fvideoplayer/lists"}