{"id":15462950,"url":"https://github.com/thuoe/mp4-video-player","last_synced_at":"2025-07-29T01:05:08.776Z","repository":{"id":38174698,"uuid":"173359339","full_name":"thuoe/mp4-video-player","owner":"thuoe","description":"A customisable MP4 video player web component made using Polymer.js.","archived":false,"fork":false,"pushed_at":"2023-07-10T17:15:48.000Z","size":82579,"stargazers_count":2,"open_issues_count":6,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-24T07:08:02.222Z","etag":null,"topics":["google","javascript","mp4","player","polymer","polymer-3","video","video-player","webcomponent","webcomponents"],"latest_commit_sha":null,"homepage":"mp4-video-player.thuoe.vercel.app","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/thuoe.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-01T19:48:42.000Z","updated_at":"2024-12-17T16:21:47.000Z","dependencies_parsed_at":"2025-03-03T10:42:22.670Z","dependency_job_id":null,"html_url":"https://github.com/thuoe/mp4-video-player","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/thuoe/mp4-video-player","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thuoe%2Fmp4-video-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thuoe%2Fmp4-video-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thuoe%2Fmp4-video-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thuoe%2Fmp4-video-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thuoe","download_url":"https://codeload.github.com/thuoe/mp4-video-player/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thuoe%2Fmp4-video-player/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267612827,"owners_count":24115530,"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":"2025-07-28T02:00:09.689Z","response_time":68,"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":["google","javascript","mp4","player","polymer","polymer-3","video","video-player","webcomponent","webcomponents"],"created_at":"2024-10-02T00:06:17.264Z","updated_at":"2025-07-29T01:05:08.754Z","avatar_url":"https://github.com/thuoe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\u0026lt;mp4-video-player\u0026gt;\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eA simple and customizable MP4 video player web component created using Polymer 3.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@thuoe/mp4-video-player\"\u003e\n    \u003cimg alt=\"npm (scoped with tag)\" src=\"https://img.shields.io/npm/v/@thuoe/mp4-video-player/latest\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://travis-ci.com/thuoe/mp4-video-player\"\u003e\n    \u003cimg src=\"https://travis-ci.com/thuoe/mp4-video-player.svg?branch=master\" alt=\"Build Status on mp4-video-player\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@thuoe/mp4-video-player\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dm/@thuoe/mp4-video-player\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\n![Player](player-screenshot.png)\n\n## Installation\n\n```\n$ npm install --save @thuoe/mp4-video-player\n```\n\n## Import within a Polymer 3 element\n\n```js\nimport { PolymerElement, html } from '@polymer/polymer';\nimport '@thuoe/mp4-video-player';\n\nclass SampleElement extends PolymerElement {\n  static get template() {\n    return html`\n      \u003cmp4-video-player\u003e\u003c/mp4-video-player\u003e\n    `;\n  }\n}\ncustomElements.define('sample-element', SampleElement);\n```\n\n## Running Demo\n\n```\n$ npm start\n```\nThis involves using the Polymer CLI  command `polymer serve`. \n\nFirst, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install the element's dependencies. This development server will transpile ES6 code to ES5 using [Babel](https://babeljs.io/) during runtime.\n\nThe live demo page will be available to view via `http://127.0.0.1:8081/components/@thuoe/mp4-video-player/`\n\n## Running Tests\n\n```\n$ npm test\n```\n\n## Running ESLint\n\n```\n$ npm run lint\n```\n\n## Video Player Properties\n\nThe following properties below are accessible and writable to use:\n\n| Property               | Description                                                                                           | Type    | Default Value |\n|------------------------|-------------------------------------------------------------------------------------------------------|---------|---------------| \n| `title`                | Title positioned on top of the video player                                                           | String  | `undefined`   |\n| `src`                  | File path to .mp4 video                                                                               | String  | `undefined`   |\n| `poster`               | File path to poster image. It can be a relative or absolute URL                                       | String  | `undefined`   |\n| `timelinePreview`      | Determines if the timeline preview above the track appears when hovering                              | Boolean | `false`       |\n| `autoPlay`             | Whether the video should start playing as soon as it is loaded                                        | Boolean | `false`       |\n| `loop`                 | Whether the video should start over again, every time it is finished                                  | Boolean | `false`       |\n| `volume`               | The volume scaled from 0-1                                                                            | Number  | `0.5`         |\n| `time`                 | The current time in seconds of the video playback                                                     | Number  | `0`           |\n| `skipBy`               | Skip ahead or behind (in seconds) the current time based on the right or left arrow keys respectively | Number  | `5`           |\n\n\n## Video Player Read-Only Properties\n\nThe following properties below are accessible but cannot be altered dynamically:\n\n| Read-only property | Description                                              | Type    | Default Value |\n|--------------------|----------------------------------------------------------|---------|---------------|\n| `duration`         | The total duration of the video file after it has loaded | Number  | `0`           |\n| `playing`          | If the video is playing                                  | Boolean | `false`       |\n| `muted`            | If the video is muted                                    | Boolean | `false`       |\n| `ended`            | If the video has ended                                   | Boolean | `false`       |\n| `fullscreen`       | If the video is in fullscreen mode                       | Boolean | `false`       |\n\n## Custom CSS Properties\n\nThe following custom CSS variables are also available for custom styling the video player:\n\nCustom property | Description | Default Value\n------------------------------------------|-------------------------------------------------------------|----------------------\n`--video-title-color`                     | Color of the video title                | `rgba(255,255,255,.9)`\n`--video-large-play-button-color`         | Large play button color                 | `#d32f2f`\n`--video-large-play-button-hover-color`   | Large play button hover color           | `#9a0007`\n`--video-track-fill-color`                | Track fill color                        | `#d32f2f`\n`--video-thumb-color`                     | Thumb color used for dragging           | `#fff`\n`--video-control-icons-background-hover-color` | Control icons background hover color  | `#d32f2f`\n`---video-time-preview-background-color`  | Timeline preview background color       | `#d32f2f`\n`--video-menu-background-color`           | Menu background color                   | `rgba(255,255,255,.9)`\n`--video-menu-item-color`                 | Menu item background color              | `rgba(255,255,255,.9)`\n`--video-menu-item-icon-color`            | Menu icon color                         | `black`\n`--video-menu-item-hover-color`           | Menu item hover color                   | `#d32f2f`\n`--video-menu-item-icon-hover-color`      | Menu icon hover color                   | `white`\n`--video-tooltip-background-color`        | Tooltip background color                | `rgba(255,255,255,.9)`\n`--video-pulse-icon-color`                | Pulse icon background color              | `#d32f2f`\n`--video-font-family`                     | Font-family used throughout video player | `Arial`, `Helvetica`, `sans-serif`\n\n\n### HTML Example:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes\"\u003e\n    \u003ctitle\u003emp4-video-player demo\u003c/title\u003e\n    \u003cscript type=\"module\"\u003e\n        import '@webcomponents/webcomponentsjs/webcomponents-loader.js';\n        // custom-style element invokes the custom properties polyfill\n        import '@polymer/polymer/lib/elements/custom-style.js';\n        import '@thuoe/mp4-video-player/mp4-video-player.js'\n    \u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ch3\u003eVideo player using custom CSS properties\u003c/h3\u003e\n    \u003c!-- ensure that custom props are polyfilled on browsers that don't support them --\u003e\n    \u003ccustom-style\u003e\n        \u003cstyle is=\"custom-style\"\u003e\n            mp4-video-player {\n                /* Set the values for the custom CSS properties */\n                --video-thumb-color: red;\n                --video-tooltip-background-color: orange;\n                --video-menu-item-hover-color: magenta;\n            }\n        \u003c/style\u003e\n    \u003c/custom-style\u003e\n    \u003cmp4-video-player\u003e\u003c/mp4-video-player\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nOr you can dynamically change the CSS properties at runtime..\n\n```js\nwindow.addEventListener('WebComponentsReady', () =\u003e {\n  // when the video player element has finished initializing..\n  const player = document.querySelector('mp4-video-player');\n  player.updateStyles({\n      '--video-min-width': '750px',\n      '--video-min-height': '300px',\n      '--video-title-color': 'red'\n      ...\n  });  \n});\n```\n## Keyboard Shortcuts\n\nThis video player has intergrated the following shortcuts to further enhance\nplayback experience:\n\n| Keyboard Shortcut | Intended Action   |\n|-------------------|-------------------|\n| `space` or `p`    | Toggle play       |\n| `m`               | Toggle mute       |\n| `f`               | Toggle fullscreen |\n| `→`               | Skip ahead        |\n| `←`               | Skip behind       |\n| `↑`               | Volume up         |\n| `↓`               | Volume down       |\n\n\n## Custom Events\n\nThe player has a suite of events created using the CustomEvent API at your disposal to listen out for:\n\n\n| Event             | Description                                         | `event.detail` properties |\n|-------------------|-----------------------------------------------------|---------------------------|\n| `play`            | When the video begins to play                       | `currentTime`             |\n| `pause`           | When the video has been paused                      | `currentTime`             |\n| `ended`           | When the video has ended                            | `currentTime`             |\n| `exitFullscreen`  | When exiting fullscreen mode                        | `currentTime`             |\n| `enterFullscreen` | When entering fullscreen mode                       | `currentTime`             |\n| `timeUpdated`     | When the current time has updated to a new position | `currentTime`             |\n| `volumeChange`    | When the volume has been changed                    | `volume`                  |\n\nCode Example: \n\n```js \nconst videoPlayer = document.querySelector('mp4-video-player');\nvideoPlayer.addEventListener('timeUpdated', (event) =\u003e {\n  console.log('Time Updated!', event.detail.currentTime);\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthuoe%2Fmp4-video-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthuoe%2Fmp4-video-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthuoe%2Fmp4-video-player/lists"}