{"id":28673323,"url":"https://github.com/jplayer/jplayer.injector","last_synced_at":"2025-06-13T20:10:03.550Z","repository":{"id":136979657,"uuid":"13019423","full_name":"jplayer/jPlayer.injector","owner":"jplayer","description":"Injects jPlayer's skin HTML and instantiates the plugin.","archived":false,"fork":false,"pushed_at":"2015-12-23T17:19:04.000Z","size":350,"stargazers_count":9,"open_issues_count":0,"forks_count":5,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-17T05:22:27.471Z","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/jplayer.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":"2013-09-22T19:27:55.000Z","updated_at":"2017-04-17T20:23:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"f572ece5-eb62-470a-aa6e-d15735a8e6aa","html_url":"https://github.com/jplayer/jPlayer.injector","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/jplayer/jPlayer.injector","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jplayer%2FjPlayer.injector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jplayer%2FjPlayer.injector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jplayer%2FjPlayer.injector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jplayer%2FjPlayer.injector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jplayer","download_url":"https://codeload.github.com/jplayer/jPlayer.injector/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jplayer%2FjPlayer.injector/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259712415,"owners_count":22900041,"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":"2025-06-13T20:10:01.675Z","updated_at":"2025-06-13T20:10:03.507Z","avatar_url":"https://github.com/jplayer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#jPlayer.injector\n\n* Injects jPlayer's skin HTML and instantiates the plugin.\n* Automates the creation of HTML and unique IDs for jPlayer.\n* Supports multiple supplied formats. EG., MP3 and OGA (ogg)\n\n*Inspired by [Nathan Loyer's](https://github.com/namlet) project: [jPlayer-Autofill](https://github.com/namlet/jPlayer-Autofill).*\n\n##To use *injector*\n* Include the skin CSS files:\n```html\n\t\u003clink href=\"skin/pink.flag/jplayer.pink.flag.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n```\n\n* Include *injector* files after jPlayer:\n```html\n\t\u003cscript type=\"text/javascript\" src=\"js/jplayer.injector.js\"\u003e\u003c/script\u003e\n```\n\n* Insert the HTML tags where you want the media to appear as follows:\n```html\n\t\u003cdiv\n\t\tclass=\"video\"\n\t\tdata-mp3=\"path/to/video.mp3\"\n\t\tdata-poster=\"path/to/image.png\"\n\t\tdata-title=\"Movie Title\"\u003e\n\t\u003c/div\u003e\n```\n\n* Call *injector* from JavaScript:\n```javascript\n\tjPlayerInjector({\n\t\tselector: \".classname\",\n\t\ttemplate: \"path/to/template.html\"\n\t});\n```\n\n* The *injector* has many options:\n```javascript\n\tjPlayerInjector({\n\t\tselector: \".classname\",\n\t\ttemplate: \"path/to/template.html\",\n\t\tpauseOthers: true, // Stop multiple instances playing\n\t\tmarker: { // RegExp of markers\n\t\t\tjPlayer: /::JPLAYER::/,\n\t\t\tcssSelectorAncestor: /::WRAPPER::/,\n\t\t\ttitle: /::TITLE::/\n\t\t},\n\t\tprefix: { // Prefix of IDs\n\t\t\tjPlayer: \"jquery_jplayer_\",\n\t\t\tcssSelectorAncestor: \"jp_container_\"\n\t\t},\n\t\tjPlayer: {} // jPlayer options\n\t});\n```\n\n* Typically, you will call *injector* from within a jQuery ready function:\n```javascript\n\t$(document).ready(function() {\n\t\tjPlayerInjector({\n\t\t\tselector: \".audio\",\n\t\t\ttemplate: \"path/to/audio_template.html\"\n\t\t});\n\t});\n```\n\n* Example code is given in the root HTML files, and are of the form:\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\t\u003chead\u003e\n\t\t\u003cmeta charset=\"utf-8\" /\u003e\n\t\t\u003ctitle\u003eMy Sweet Music\u003c/title\u003e\n\t\t\u003clink href=\"skin/pink.flag/jplayer.pink.flag.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\t\t\u003cscript type=\"text/javascript\" src=\"lib/jquery-1.10.2.js\"\u003e\u003c/script\u003e\n\t\t\u003cscript type=\"text/javascript\" src=\"lib/jquery.jplayer.js\"\u003e\u003c/script\u003e\n\t\t\u003cscript type=\"text/javascript\" src=\"js/jplayer.injector.js\"\u003e\u003c/script\u003e\n\t\t\u003cscript type=\"text/javascript\"\u003e\n\t\t\t$(document).ready(function() {\n\t\t\t\tjPlayerInjector({\n\t\t\t\t\tselector: \".audio\",\n\t\t\t\t\ttemplate: \"skin/pink.flag/jplayer.pink.flag.audio.html\",\n\t\t\t\t\tjPlayer: {\n\t\t\t\t\t\tswfPath: \"lib\"\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t\t\u003c/script\u003e\n\t\u003c/head\u003e\n\t\u003cbody\u003e\n\t\t\u003cdiv\n\t\t\tclass=\"audio\"\n\t\t\tdata-mp3=\"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3\"\n\t\t\tdata-oga=\"http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg\"\n\t\t\tdata-title=\"Bubble\"\u003e\n\t\t\u003c/div\u003e\n\t\u003c/body\u003e\n\u003c/html\u003e\n```\n\n##FAQ\n\n###Why does my template not work?\nThere could be many reason, so consider:\n* Check the selector matches the class name you used.\n* Check the markers in the template match the injector's defaults or the options you set.\n* Check that you included the skin's CSS in your page.\n* Check you included jQuery and jPlayer in your page.\n* Check you only included jQuery once.\n* Check that your template is on the same domain.\n* Look in the browser console and see if there are any error messages.\n\n###How do I specify multiple formats to satisfy HTML5 browsers?\nThese days you tend to only need either **MP3** or **M4A** for audio and **M4V** for video.\nThe [essential formats](http://jplayer.org/latest/developer-guide/#jPlayer-essential-formats) and optional counterpart formats follow those detailed in the [jPlayer dev guide](http://jplayer.org/latest/developer-guide/).\n\nYou can add them using:\n```html\n\u003cdiv\n\tclass=\"video\"\n\tdata-m4v=\"http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v\"\n\tdata-ogv=\"http://jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv\"\n\tdata-webmv=\"http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm\"\n\tdata-poster=\"http://jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png\"\n\tdata-title=\"Big Buck Bunny Trailer\"\u003e\n\u003c/div\u003e\n```\n\n###Why is the JavaScript in 2 places?\nThat is purely to distinguish between the JavaScript being developed in this project and those that are part of other projects.\nThe *jPlayer.injector* code is in the `js` folder, while the external JavaScript libraries are in the `lib` folder.\n\n###Why does this not work with jPlayer 2.5.0?\nYes that is a problem.\nDuring the development of jPlayer, a bug slipped in at jPlayer 2.4.2 that conflicted with this project.\nThis bug was fixed in jplayer 2.5.4 and it has been updated in this project.\n(Or to the latest jPlayer version since 2.5.4)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjplayer%2Fjplayer.injector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjplayer%2Fjplayer.injector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjplayer%2Fjplayer.injector/lists"}