{"id":19306408,"url":"https://github.com/fluse/splitplayer","last_synced_at":"2026-06-20T07:31:53.041Z","repository":{"id":57158581,"uuid":"47640092","full_name":"fluse/SplitPlayer","owner":"fluse","description":"SplitPlayer","archived":false,"fork":false,"pushed_at":"2020-10-28T15:09:30.000Z","size":605,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-06T00:43:59.887Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fluse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-08T18:09:52.000Z","updated_at":"2020-10-28T15:09:33.000Z","dependencies_parsed_at":"2022-09-07T21:01:05.934Z","dependency_job_id":null,"html_url":"https://github.com/fluse/SplitPlayer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluse%2FSplitPlayer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluse%2FSplitPlayer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluse%2FSplitPlayer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluse%2FSplitPlayer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fluse","download_url":"https://codeload.github.com/fluse/SplitPlayer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240405609,"owners_count":19796210,"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","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-11-10T00:05:56.881Z","updated_at":"2026-06-20T07:31:53.034Z","avatar_url":"https://github.com/fluse.png","language":"JavaScript","funding_links":["https://www.paypal.me/schauf"],"categories":[],"sub_categories":[],"readme":"# SplitPlayer\n\n[![Donate](https://img.shields.io/badge/donate-%20%E2%9D%A4%20-green.svg)](https://www.paypal.me/schauf)\n\n[![](http://player.splitplay.tv/dist/logo.png)](http://player.splitplay.tv)\n\n[![npm package](https://nodei.co/npm/splitplayer.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/splitplayer/)\n[![NPM](https://nodei.co/npm-dl/splitplayer.png?months=6\u0026height=3)](https://www.npmjs.com/package/splitplayer)\n\n\u003e SplitPlayer is a highly flexible extendable Video Player, that keeps multiple videos in sync. Let Videos Start at different seconds, to get them synchronous. Have a look at players features:\n\n## Features\n\n### Multi Videos\nWe are the new generation, that can't live with only one thing. We want to do or see more than one thing simultaneously.\nCreate more than one video instance and control them all together within one interface.\n\n### Start Time\nSo now you know thats possible to create more than one video, but where is the sense behind them?\nMaybe you want to add more than one perspective from one game or scene. Use the start time to bring all videos in sync.\n\n### Analytics\nI saw it in your eyes. You want to know, what your page visitors do with your player.\nThis Plugin will push play, pause, stop, volume events, automatically to google analytics.\n\n### SoundTrack Selection\nMany Videos many sounds. But you want only one of them?\nSelect a soundtrack initial or use this plugin to select the sound by a list.\n\n### Volume\nOne slider to rule them all! control the volume of all videos inside on player\n\n### TimePicker\nJump forward, go backward, select the part you want to watch.\nUse this plugin to select the time on a line, that keeps videos in sync.\n\n### Fullscreen\nYou can use it to set a custom area, to bring all videos together in fullscreen. Such delicacy. Yumyum.\n\n### CrossTab Control\nYes multi tab browsing is a nice thing, but you have open 2-3 player instances in different tabs?\nNo matter! This plugin will pause all other players in there tabs and set overall volume.\n\n### Remembering Time\nYou now nana the rapper? I remember the time, the time that we had?\nIf you in hurry and can't finish watching videos. No problem! This plugin remember the played time, saves it into storage and use it after reopening the videos.\n\n## Supported Hoster\n- Youtube\n- Native (experimental)\n\n## Planned\n- Synchronize Interface\n- Playlists\n- Hide or show specific videos\n- Auto Sound Select if Video ends\n- Picture in Picture Mode\n- Vimeo\n- remote browser sync\n- crosstab volume regulation\n- TimeLine Commentary\n\nProductive integration on http://splitplay.tv\n\nexample on http://player.splitplay.tv\n\n## Browser Compatibility\n- IE 9+\n- Chrome latest 2\n- Firefox latest 2\n- Safari latest\n- Android 5\n- iOS not working native yet\n\n# Installation and Usage\n\n## Install\n```shell\nnpm install splitplayer --save\n```\n\n## Include\n\non page include\n\n```html\n\u003c!-- unpacked --\u003e\n\u003cscript src=\"/dist/splitplayer.js\"\u003e\u003c/script\u003e\n\u003c!-- minified --\u003e\n\u003cscript src=\"/dist/splitplayer.min.js\"\u003e\u003c/script\u003e\n```\n\nrequire as node module\n\n```javascript\nvar SplitPlayer = require('splitplayer');\n```\n\n# Player\n\n## Create\n\n```javascript\nvar player = new SplitPlayer(options);\n```\n\n### Options\n\n```javascript\nvar options = {\n    videos: Array,\n    area: String,\n    maxVideos: Number,\n    volume: Number,\n    template: String\n};\n```\n\n| option        | type           | description  |\n| ------------- |:-------------:| :---------|\n| videos      | Array | list of videos with there settings |\n| area      | String      |   DOM droparea for player |\n| maxVideos | Number      |   set maximal video amount |\n| volume | Number      |    set intial volume |\n| template | String      |    wrapper for all videos |\n\n## Videos\n\n### Options\n```javascript\n\nvar video = {\n    hoster: String,\n    videoId: String,\n    startSeconds: Number,\n    isMuted: Boolean,\n    controls: Number\n}\n```\n\n| option        | type           | description  |\n| ------------- |:-------------:| :-----|\n| hoster      | String | set which service this video will use |\n| videoId      | String      |   id from youtube or other services |\n| startSeconds | Number      |    set seconds, where video will begin, this supports float values like 1.2 |\n| isMuted | Boolean      |    false or true do unmute or mute a video initial |\n| controls | Number      |    1 show controls 0 hide it initial 1 |\n\n### Examples\n```javascript\nvar video = {\n    hoster: 'youtube',\n    videoId: 'J4Ltw1ZA9ho',\n    startSeconds: 1.2,\n    isMuted: false\n}\n```\n\n#### add list of videos\n\n```javascript\n\nvar videoList = [{options}, {options}, {options}];\n\nvar player = new SplitPlayer(options);\n\n// add videos\nplayer.addVideos(videoList);\n```\n\n#### add one video\n\n```javascript\n// create new player\nvar player = new SplitPlayer(options);\n\n// add video\nplayer.addVideo({object});\n```\n\n### Plugins\n\n| Name        | description  | dependencies |\n| ------------|:-----| :-----|\n| TimeLine      | show played time on a line | TimeManager |\n| TimePicker      | this plugin will set your selected time as players current played time | TimeManager |\n| TimeDisplay      | show played time on a line | TimeManager |\n| Analytics      | if you have google analytcs running, you can include this plugin to track events | Analytics, TimeManager |\n| SoundTrack      | this plugin gives the possability to select a soundtrack from added videos | SoundManager |\n\n#### Add Plugin\n\nyou can add a plugin directy after you've created the player like this\n\n```javascript\nvar player = new SplitPlayer(options);\n\nvar playerTimeManager = player.addPlugin(SplitPlayerPlugins.TimeManager);\n```\n\n`addPlugin()` return created instance of given plugin\n\n#### Extend Plugin\n\nmaybe you want to add a new behavior to your playerTime, like an on hover show time\n\n```javascript\n\nvar player = new SplitPlayer(options);\n\nvar playerTimeManager = player.addPlugin(SplitPlayerPlugins.TimeManager);\n\nplayerTimeManager.extend(SplitPlayerPlugins.TimePicker);\n```\n\n`extend()` return the created instance of given module\n\n#### playerStates\n\n```javascript\n// player state constants\nconst playerState = {\n    unstarted: -1,\n    ended: 0,\n    playing: 1,\n    pause: 2,\n    buffering: 3,\n    loading: 6\n};\n```\n\n#### player hooks\n\nhooks are used to connect plugins to player behavior\n\n- onReady\n- onPlay\n- onPause\n- onStop\n- onUpdate\n- onTimeTo\n- onMute\n- onVolumeChange\n\n### Public Methods\n\nthese methods can be used outside\n\n#### play()\n\nplay all videos if videos ready\n\n```javascript\nplayer.play();\n```\n\n#### pause()\n\npause all videos\n\n```javascript\nplayer.pause();\n```\n\n#### toggle()\n\nToggle Video from play to pause vice versa\n\n```javascript\nplayer.toggle();\n```\n\n#### stop()\n\nstop all videos. The played time will be set to 0 + startSeconds\n\n```javascript\nplayer.stop();\n```\n\n#### removeVideo()\n\nremove a video from Player by calling following methods with argument videoId;\n\n```javascript\nplayer.removeVideo(videoId);\n```\n\n#### timeTo()\n\nsetTime for all Videos\n\n```javascript\nplayer.timeTo(Number); // float number supported\n```\n\n#### volumeTo()\n\nset Volume for non muted videos to given number\n\n```javascript\nplayer.volumeTo(Number); // 0-100\n```\n\n#### getPlayedTime()\n\nget current played time in seconds\n\n```javascript\nreturn seconds = player.getPlayedTime();\n```\n\n#### empty()\n\nyou want to delete all videos? use empty()\n\n```javascript\nplayer.empty();\n```\n\n#### destroy()\n\nyou want to delete the player? use following\n\n```javascript\nplayer.destroy();\n```\n\n#### all public methods can be chained\n\n```javascript\nplayer.play().stop().pause().volumeTo(0).timeTo(10).toggle();\n```\n\n## Dependencies\n- DOMtastic \u003e 0.12.x\n- underscore \u003e 1.8.x\n- node extend \u003e 3.x.x\n- YT iframe api\n\n## restriction and licence\n\nyou can use this player only for non commercial products and websites.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluse%2Fsplitplayer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffluse%2Fsplitplayer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluse%2Fsplitplayer/lists"}