{"id":16760320,"url":"https://github.com/ryanve/tunes","last_synced_at":"2025-04-10T17:36:55.452Z","repository":{"id":5451659,"uuid":"6645401","full_name":"ryanve/tunes","owner":"ryanve","description":"HTML5 audio and video playlists","archived":false,"fork":false,"pushed_at":"2015-02-21T19:28:39.000Z","size":392,"stargazers_count":11,"open_issues_count":3,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T18:56:28.068Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/tunes","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/ryanve.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":"2012-11-11T22:24:37.000Z","updated_at":"2023-08-08T21:07:40.000Z","dependencies_parsed_at":"2022-08-03T16:15:23.141Z","dependency_job_id":null,"html_url":"https://github.com/ryanve/tunes","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Ftunes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Ftunes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Ftunes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Ftunes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanve","download_url":"https://codeload.github.com/ryanve/tunes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248262043,"owners_count":21074236,"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-10-13T04:23:06.903Z","updated_at":"2025-04-10T17:36:55.432Z","avatar_url":"https://github.com/ryanve.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [Tunes](../../)\n### HTML5 `\u003caudio\u003e` and `\u003cvideo\u003e` playlists\n#### \u003cb\u003eTunes\u003c/b\u003e (formerly \u003cb\u003ecue\u003c/b\u003e) is an opensource [jQuery](#dependencies) plugin that uses [JSON](http://en.wikipedia.org/wiki/JSON) and [data attributes](http://dev.opera.com/articles/view/an-introduction-to-datasets/) to make HTML5 audio and video playlists possible.\n\n## Goals\n\n1. Provide semantic storage and performant access to playlist data.\n2. Provide succinct semantic controls that can be styled in [CSS](tunes.css).\n3. Be minimal, but extensible.\n\n## Types\n\n### [Compatibility](https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements#Browser_compatibility): the more filetypes, the better\n#### Full coverage in modern browsers requires \u003cb\u003e2+\u003c/b\u003e types\n\n- \u003cb\u003eaudio\u003c/b\u003e: Use `.mp3` and `.ogg`  (Converters: [media.io](http://media.io))\n- \u003cb\u003evideo\u003c/b\u003e: Use `.mp4` and `.webm` (Converters: [ffmpeg](http://ffmpeg.org), [Miro](http://mirovideoconverter.com) ([issues](http://stackoverflow.com/a/13449719/770127)))\n\n## URIs\n\n- To simplify the examples, most of the file URIs shown are relative. In production you probably want to use full URIs.\n- AJAX-loaded `.json` files must be on the same domain due to cross-domain restrictions.\n\n## API ([0.6](../../releases))\n\n### `[data-tunes]`\n\n`[data-tunes]` is the data attribute in which the JSON playlist is stored. It is designed to be placed on a container element that holds the media element and related informational elements such as credits or captions. It can contain inline JSON **or** the filename of a `.json` file to load via AJAX. Inline JSON is more performant and more stable than loading AJAX requests. \n\n```html\n\u003cdiv data-tunes=\"playlist.json\"\u003e\n    \u003cvideo controls\u003e\n        \u003csource src=\"default.mp4\" type=\"video/mp4\"\u003e\n        \u003csource src=\"default.webm\" type=\"video/webm\"\u003e\n    \u003c/video\u003e\n\u003c/div\u003e\n```\n\n### `[data-tunes-insert]`\n\n`[data-tunes-insert]` makes it possible to insert values from the properties in your media object into your HTML.\n\n```html\n\u003cfigure data-tunes=\"playlist.json\"\u003e\n    \u003cvideo controls\u003e\n        \u003csource src=\"default.mp4\"\u003e\n        \u003csource src=\"default.webm\"\u003e\n    \u003c/video\u003e\n    \u003cfigcaption data-tunes-insert=\"caption\"\u003e\n        Caption for the default video. The value of the \"caption\"\n        property gets inserted here when the video changes.\n    \u003c/figcaption\u003e\n\u003c/figure\u003e\n```\n\n### `[data-tunes-attr]`\n\n`[data-tunes-attr]` makes it possible to update arbitrary HTML attributes based on the properties in your media object. It takes a JSON object that maps attribute names to the property names from the media object that should fill them.\n\n```html\n\u003cfigure data-tunes=\"playlist.json\"\u003e\n    \u003cvideo controls\u003e\n        \u003csource src=\"default.mp4\"\u003e\n        \u003csource src=\"default.webm\"\u003e\n        \u003cp\u003e\n            To watch this video please \u003ca href=\"http://browsehappy.com\"\u003eupdgrade your browser\u003c/a\u003e\n            or \u003ca href=\"default.mp4\" data-tunes-attr='{\"href\": \"mp4\"}'\u003edownload the .mp4\u003c/a\u003e\n        \u003c/p\u003e\n    \u003c/video\u003e\n\u003c/figure\u003e\n```\n\n### JSON\n\nThe format for the JSON playlist data is an array of \u003cem\u003emedia objects\u003c/em\u003e containing data about each media file. Please [validate your JSON](http://jsonlint.com) to prevent syntax errors. The media objects provide several capabilities. A simple `\u003cvideo\u003e` example would look something like this:\n\n```json\n[{\n    \"mp4\": \"identity.mp4\"\n  , \"webm\": \"identity.webm\"\n },{\n    \"mp4\": \"supremacy.mp4\"\n  , \"webm\": \"supremacy.webm\"\n },{\n    \"mp4\": \"ultimatum.mp4\"\n  , \"webm\": \"ultimatum.webm\"\n}]\n```\n\n**Alternate syntax:** You can achieve the same as above by setting the `src` property to an array of URIs. If you mix the 2 syntaxes, the named extension props take precedence over the `src` prop. In either case **tunes** will choose the most appropriate file based on the feature detection.\n\n```json\n[{\n    \"src\": [\"identity.mp4\", \"identity.webm\"]\n },{\n    \"src\": [\"supremacy.mp4\", \"supremacy.webm\"]\n },{\n    \"src\": [\"ultimatum.mp4\", \"ultimatum.webm\"]\n}]\n```\n\nIn your media objects, you can include whatever extra properties you want for use with `[data-tunes-insert]` and/or `[data-tunes-attr]`. The purpose of these attributes is to enable you to include relavent credits, captions, or links.\n\n```json\n[{\n    \"mp4\": \"identity.mp4\"\n  , \"webm\": \"identity.webm\"\n  , \"title\": \"The Bourne Identity\"\n  , \"imbd\": \"http://www.imdb.com/title/tt0258463/\"\n },{\n    \"mp4\": \"supremacy.mp4\"\n  , \"webm\": \"supremacy.webm\"\n  , \"title\": \"The Bourne Supremacy\"\n  , \"imdb\": \"http://www.imdb.com/title/tt0372183/\"\n },{\n    \"mp4\": \"ultimatum.mp4\"\n  , \"webm\": \"ultimatum.webm\"\n  , \"title\": \"The Bourne Ultimatum\"\n  , \"imdb\": \"http://www.imdb.com/title/tt0440963/\"\n}]\n```\n\n## MIME types\n\nTo play media files, your server must recognize the correct MIME types. \n\n##### Make sure your `.htaccess` includes these rules (via [H5BP](https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess))\n\n```apache\n# MIME types for audio and video files\nAddType audio/mp4                      m4a f4a f4b\nAddType audio/ogg                      oga ogg\nAddType video/mp4                      mp4 m4v f4v f4p\nAddType video/ogg                      ogv\nAddType video/webm                     webm\nAddType video/x-flv                    flv\n```\n\n## Fallbacks\n\nFallbacks and graceful degradation for pre-HTML5 browsers are possible through smart use of `[data-tunes-insert]` and `[data-tunes-attr]`. It's a [vanilla diet approach](http://coding.smashingmagazine.com/2012/11/13/the-vanilla-web-diet/) and \u003cb\u003eno\u003c/b\u003e Flash is used.\n\n## Troubleshoot\n\n1. Does your JSON validate? Use: [jsonlint.com](http://jsonlint.com)\n2. Does your HTML validate? Use: [html5.validator.nu](http://html5.validator.nu)\n3. Did jQuery load? Is it version 1.7 or higher? jQuery must run *before* tunes.\n4. Are there any JavaScript errors in the console?\n5. Is your server configured to serve the correct MIME types? See section above.\n6. Are your URIs correct? AJAX-loaded playlists must be on the same server.\n7. Ask [@ryanve](http://twitter.com/ryanve) or [submit an issue](../../issues).\n\n## Dependencies\n\nRequires [jQuery](http://jquery.com/) 1.7+ or an [ender](http://ender.jit.su/) build that implements compatible versions of:\n\n- `$()`\n- `$.ajax()` *needed only for AJAX playlists\n- `$.contains()`\n- `$.get()`  *needed only for AJAX playlists\n- `$.fn.on()`\n- `$.fn.addClass()`\n- `$.fn.attr()`\n- `$.fn.children()`\n- `$.fn.empty()`\n- `$.fn.find()`\n- `$.fn.html()`\n- `$.fn.insertAfter()`\n- `$.fn.ready()`\n- `$.fn.removeAttr()`\n- `$.fn.removeClass()`\n\n## Resources\n\n- [html5rocks.com: HTML5 Video](http://www.html5rocks.com/en/tutorials/video/basics/)\n- [dev.opera.com: HTML5 Video and Audio](http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/)\n- [MDN: Media Formats](https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements#Browser_compatibility)\n- [MDN: Media Events](https://developer.mozilla.org/en-US/docs/DOM/Media_events)\n- [MDN: HTMLMediaElement](https://developer.mozilla.org/en-US/docs/DOM/HTMLMediaElement)\n\n## License: [MIT](http://opensource.org/licenses/MIT)\n\nCopyright (C) 2013 by [Ryan Van Etten](https://github.com/ryanve)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanve%2Ftunes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanve%2Ftunes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanve%2Ftunes/lists"}