{"id":28504731,"url":"https://github.com/tapioca24/videojs-logo","last_synced_at":"2025-07-06T04:30:54.075Z","repository":{"id":35491240,"uuid":"217996372","full_name":"tapioca24/videojs-logo","owner":"tapioca24","description":"A video.js plugin to display a logo image on the player. If you think it's good, give me a star! :star:","archived":false,"fork":false,"pushed_at":"2023-03-26T05:24:17.000Z","size":3097,"stargazers_count":21,"open_issues_count":9,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-08T18:47:46.355Z","etag":null,"topics":["branding","video","videojs"],"latest_commit_sha":null,"homepage":"https://tapioca24.github.io/videojs-logo/api/Logo.html","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/tapioca24.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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},"funding":{"github":"tapioca24","patreon":null,"open_collective":null,"ko_fi":"tapioca24","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":"https://tzprofiles.com/view/mainnet/tz2PAo222y74mShW4wRon24BKaR5HcKhFqY8"}},"created_at":"2019-10-28T08:12:15.000Z","updated_at":"2024-04-28T02:01:13.000Z","dependencies_parsed_at":"2024-06-19T11:18:22.586Z","dependency_job_id":"65ec5c4c-1e87-404f-981c-38150012beca","html_url":"https://github.com/tapioca24/videojs-logo","commit_stats":{"total_commits":73,"total_committers":5,"mean_commits":14.6,"dds":0.5753424657534247,"last_synced_commit":"c936c0fb4f0849d2ab9be5bcda3431e0f305393e"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/tapioca24/videojs-logo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tapioca24%2Fvideojs-logo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tapioca24%2Fvideojs-logo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tapioca24%2Fvideojs-logo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tapioca24%2Fvideojs-logo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tapioca24","download_url":"https://codeload.github.com/tapioca24/videojs-logo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tapioca24%2Fvideojs-logo/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263848695,"owners_count":23519496,"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":["branding","video","videojs"],"created_at":"2025-06-08T18:30:37.045Z","updated_at":"2025-07-06T04:30:54.070Z","avatar_url":"https://github.com/tapioca24.png","language":"JavaScript","funding_links":["https://github.com/sponsors/tapioca24","https://ko-fi.com/tapioca24","https://tzprofiles.com/view/mainnet/tz2PAo222y74mShW4wRon24BKaR5HcKhFqY8"],"categories":[],"sub_categories":[],"readme":"# videojs-logo\n\nA video.js plugin to display a logo image on the player.\n\n- Abundant customization options\n- TypeScript support\n\n![video-js-logo-sample](./img/videojs-logo-sample.png)\n\nIf you think it's good, give me a star! :star:\n\n## Table of Contents\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Script tag](#script-tag)\n  - [ES Modules](#es-modules)\n  - [CommonJS](#commonjs)\n  - [TypeScript](#typescript)\n- [Configuration](#configuration)\n- [Methods](#methods)\n- [Compatibility](#compatibility)\n- [License](#license)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n## Installation\n\nUsing npm:\n\n```sh\nnpm install videojs-logo\n```\n\nUsing yarn:\n\n```sh\nyarn add videojs-logo\n```\n\nUsing jsDelivr CDN:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/videojs-logo@latest/dist/videojs-logo.min.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/videojs-logo@latest/dist/videojs-logo.css\"\u003e\n```\n\nUsing unpkg CDN:\n\n```html\n\u003cscript src=\"https://unpkg.com/videojs-logo@latest/dist/videojs-logo.min.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/videojs-logo@latest/dist/videojs-logo.css\"\u003e\n```\n\n## Usage\n\nTo include videojs-logo on your website or web application, use any of the following methods.\n\n### Script tag\n\nThis is the simplest case. \\\nGet the script in whatever way you prefer and include the plugin _after_ you include [video.js][videojs], so that the `videojs` global is available.\n\n```html\n\u003c!-- include stylesheets --\u003e\n\u003clink href=\"//path/to/video-js.min.css\" rel=\"stylesheet\"\u003e\n\u003clink href=\"//path/to/videojs-logo.css\" rel=\"stylesheet\"\u003e\n\n\u003c!-- include scripts --\u003e\n\u003cscript src=\"//path/to/video.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"//path/to/videojs-logo.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- initialize videojs-logo --\u003e\n\u003cscript\u003e\n  var player = videojs('my-video');\n\n  player.logo({\n    image: 'my_logo.png'\n  });\n\u003c/script\u003e\n```\n\n### ES Modules\n\nInstall videojs-logo via npm and `import` the plugin as you would any other module. \\\nYou will also need to import the stylesheet in some way.\n\n```js\nimport videojs from 'video.js';\n\n// The actual plugin function is exported by this module, but it is also\n// attached to the `Player.prototype`; so, there is no need to assign it\n// to a variable.\nimport 'videojs-logo';\nimport 'videojs-logo/dist/videojs-logo.css';\n\nconst player = videojs('my-video');\n\nplayer.logo({\n  image: 'my_logo.png'\n});\n```\n\n### CommonJS\n\nInstall videojs-logo via npm and `require` the plugin as you would any other module. \\\nYou will also need to import the stylesheet in some way.\n\n```js\nvar videojs = require('video.js');\n\n// The actual plugin function is exported by this module, but it is also\n// attached to the `Player.prototype`; so, there is no need to assign it\n// to a variable.\nrequire('videojs-logo');\nrequire('videojs-logo/dist/videojs-logo.css);\n\nvar player = videojs('my-video');\n\nplayer.logo({\n  image: 'my_logo.png'\n});\n```\n\n### TypeScript\n\nWhen using with TypeScript, you can use the `VideoJsLogo` namespace.\n\n```ts\nimport videojs, { VideoJsLogo } from 'video.js';\nimport 'videojs-logo';\nimport 'videojs-logo/dist/videojs-logo.css';\n\nconst player = videojs('my-video');\n\nconst options: VideoJsLogo.Options = {\n  image: 'my_logo.png'\n};\nplayer.logo(options);\n```\n\n## Configuration\n\n| Property    | Attributes   | Type         | Default value | Description                                                                                          |\n| ----------- | ------------ | ------------ | ------------- | ---------------------------------------------------------------------------------------------------- |\n| **image**   | **Required** | **String**   |               | **The URL to the logo image.**                                                                       |\n| url         | Optional     | String       |               | A url to be linked to from the logo. If the user clicks the logo the link will open in a new window. |\n| position    | Optional     | String       | \"top-right\"   | The location to place the logo (top-left, top-right, bottom-left, or bottom-right).                  |\n| offsetH     | Optional     | Number       | 0             | Horizontal offset (px) from the edge of the video.                                                   |\n| offsetV     | Optional     | Number       | 0             | Vertical offset (px) from the edge of the video.                                                     |\n| width       | Optional     | Number       |               | The width of the logo image (px). If not specified, it will be the width of the original image.      |\n| height      | Optional     | Number       |               | The height of the logo image (px). If not specified, it will be the height of the original image.    |\n| padding     | Optional     | Number       | 5             | Padding around the logo image (px).                                                                  |\n| fadeDelay   | Optional     | Number, Null | 5000          | Time until fade-out begins (msec). If `null` is specified, automatic fade-out is not performed.      |\n| hideOnReady | Optional     | Boolean      | false         | Do not show the logo image when the player is ready.                                                 |\n| opacity     | Optional     | Boolean      | 1             | The opacity of the logo (from `[0, 1]`). If not specified, it will default to 1.                     |\n\n## Methods\n\nYou can also manually show / hide the logo image at any time.\n\n```js\n// To show the logo image on the player's play event:\nplayer.on('play', () =\u003e {\n  player.logo().show();\n});\n```\n\n| Method | Description         |\n| ------ | ------------------- |\n| show() | Show the logo image |\n| hide() | Hide the logo image |\n\n## Compatibility\n\nvideojs-logo vs video.js\n\n| videojs-logo | video.js |\n| ------------ | -------- |\n| v3.x         | v8.x     |\n| v2.x         | v7.x     |\n\n## License\n\nMIT. Copyright (c) tapioca24\n\n\n[videojs]: http://videojs.com/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftapioca24%2Fvideojs-logo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftapioca24%2Fvideojs-logo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftapioca24%2Fvideojs-logo/lists"}