{"id":13553322,"url":"https://github.com/quasarframework/quasar-ui-qmediaplayer","last_synced_at":"2025-04-04T11:13:54.261Z","repository":{"id":39649738,"uuid":"172698897","full_name":"quasarframework/quasar-ui-qmediaplayer","owner":"quasarframework","description":"QMediaPlayer for Quasar","archived":false,"fork":false,"pushed_at":"2023-08-30T18:10:31.000Z","size":49504,"stargazers_count":211,"open_issues_count":13,"forks_count":52,"subscribers_count":8,"default_branch":"dev","last_synced_at":"2024-05-16T16:44:42.940Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://quasarframework.github.io/quasar-ui-qmediaplayer","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/quasarframework.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["hawkeye64","rstoenescu"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-02-26T11:30:39.000Z","updated_at":"2024-03-15T16:05:35.000Z","dependencies_parsed_at":"2024-02-06T01:01:56.452Z","dependency_job_id":"35bc3202-e2a4-4ca6-934c-70524ffd1ae0","html_url":"https://github.com/quasarframework/quasar-ui-qmediaplayer","commit_stats":{"total_commits":645,"total_committers":29,"mean_commits":22.24137931034483,"dds":"0.16124031007751938","last_synced_commit":"eb0bc001ec226d04fe7d61d11f05d6220b5ed9ca"},"previous_names":["quasarframework/app-extension-qmediaplayer"],"tags_count":77,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quasarframework%2Fquasar-ui-qmediaplayer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quasarframework%2Fquasar-ui-qmediaplayer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quasarframework%2Fquasar-ui-qmediaplayer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quasarframework%2Fquasar-ui-qmediaplayer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quasarframework","download_url":"https://codeload.github.com/quasarframework/quasar-ui-qmediaplayer/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247166168,"owners_count":20894654,"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-08-01T12:02:22.098Z","updated_at":"2025-04-04T11:13:54.218Z","avatar_url":"https://github.com/quasarframework.png","language":"JavaScript","funding_links":["https://github.com/sponsors/hawkeye64","https://github.com/sponsors/rstoenescu"],"categories":["JavaScript"],"sub_categories":[],"readme":"QMediaPlayer (Vue Plugin, UMD and Quasar App Extension)\n===\n\n![@quasar/quasar-ui-qmediaplayer](https://img.shields.io/npm/v/@quasar/quasar-ui-qmediaplayer.svg?label=@quasar/quasar-ui-qmediaplayer)\n![@quasar/quasar-app-extension-qmediaplayer](https://img.shields.io/npm/v/@quasar/quasar-app-extension-qmediaplayer.svg?label=@quasar/quasar-app-extension-qmediaplayer)\n[![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/quasarframework/quasar-ui-qmediaplayer.svg)]()\n[![GitHub repo size in bytes](https://img.shields.io/github/repo-size/quasarframework/quasar-ui-qmediaplayer.svg)]()\n\n\u003e If you are looking for QMediaPlayer v2.+ (with Quasar v2/Vue v3 support) look into the `next` branch. For v2.+ documentation, go [here](https://qmediaplayer.netlify.app/).\n\n# Structure\n\n* [/ui](ui) - standalone npm package (go here for more information)\n* [/app-extension](app-extension) - Quasar app extension\n* [/demo](demo) - docs, demo and examples project\n* [live demo](https://quasarframework.github.io/quasar-ui-qmediaplayer/docs) - live docs, demo and examples\n\n# Demo Workflow\nIf you fork or download this project, make sure you have the Quasar CLI globally installed:\n\n```\n$ npm i -g @quasar/cli\n```\n\nThe workflow to build the demo, on a fresh project, is as follows:\n```\n$ cd ui\n$ yarn\n$ yarn build\n$ cd ../demo\n$ yarn\n$ quasar dev\n```\n\n# Language Files\n\nWe need help translating the language files. They are all currently using English. If you know another language, please PR and help us out.\n\n## Completed languages\n- English\n- German/Deutsch ([@mstaack](https://github.com/mstaack)/[@smolinari](https://github.com/smolinari))\n- Polish/Polski ([@kubawolanin](https://github.com/kubawolanin))\n- Chinese/中文 ([@songzhi](https://github.com/songzhi))\n- Dutch ([stefanvanherwijnen](https://github.com/stefanvanherwijnen))\n- Čeština ([@valasek](https://github.com/valasek))\n- Slovenčina ([@valasek](https://github.com/valasek))\n- Português (BR) ([TobyMosque](https://github.com/TobyMosque))\n- 中文(繁體) ([618457](https://github.com/618457))\n- Română ([@pdanpdan](https://github.com/pdanpdan)/[@rstoenescu](https://github.com/rstoenescu))\n- Slovenski Jezik ([@borutjures](https://github.com/borutjures))\n- العربية (Arabic) (Khalid)\n- Français ([@fmarquis](https://github.com/fmarquis)\n- Español ([@luismiguelgilbert](https://github.com/luismiguelgilbert))\n- Svensk ([@Someone92](https://github.com/Someone92))\n- русский/Russian ([@Dmitrij-Polyanin](https://github.com/Dmitrij-Polyanin))\n- 日本語 (にほんご) ([@mesqueeb](https://github.com/mesqueeb))\n- 한국어 ([@bichikim](https://github.com/bichikim))\n- Turkish ([@Anaxilaus](https://github.com/Anaxilaus))\n- Persian/فارسی ([@neokazemi](https://github.com/neokazemi))\n\n\n# Example Code\n\n## Video example\n\n```html\n\u003cq-media-player\n  type=\"video\"\n  background-color=\"black\"\n  :muted=\"muted\"\n  radius=\"1rem\"\n  :autoplay=\"true\"\n  :show-big-play-button=\"true\"\n  :sources=\"video.sources\"\n  :poster=\"video.poster\"\n  :tracks=\"video.tracks\"\n  track-language=\"English\"\n  @ended=\"onEnded\"\n\u003e\n  \u003ctemplate v-if=\"overlay\" v-slot:overlay\u003e\n    \u003cdiv\u003e\n      \u003cimg\n        src=\"quasar-logo.png\"\n        style=\"width: 30vw; max-width: 50px; opacity: 0.25;\"\n      \u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n\u003c/q-media-player\u003e\n```\n\nand the data...\n\n```js\ndata () {\n  return {\n    video: {\n      label: 'Tears of Steel',\n      poster: 'media/TearsOfSteel/TearsOfSteel.jpeg',\n      sources: [\n        {\n          src: 'http://ftp.nluug.nl/pub/graphics/blender/demo/movies/ToS/tears_of_steel_720p.mov',\n          type: 'video/mp4'\n        }\n      ],\n      tracks: [\n        {\n          src: 'media/TearsOfSteel/TOS-en.vtt',\n          kind: 'subtitles',\n          srclang: 'en',\n          label: 'English'\n        },\n        {\n          src: 'media/TearsOfSteel/TOS-de.vtt',\n          kind: 'subtitles',\n          srclang: 'de',\n          label: 'German'\n        },\n        {\n          src: 'media/TearsOfSteel/TOS-es.vtt',\n          kind: 'subtitles',\n          srclang: 'es',\n          label: 'Spanish'\n        },\n        {\n          src: 'media/TearsOfSteel/TOS-fr-Goofy.vtt',\n          kind: 'subtitles',\n          srclang: 'fr',\n          label: 'French'\n        },\n        {\n          src: 'media/TearsOfSteel/TOS-it.vtt',\n          kind: 'subtitles',\n          srclang: 'it',\n          label: 'Italian'\n        },\n        {\n          src: 'media/TearsOfSteel/TOS-nl.vtt',\n          kind: 'subtitles',\n          srclang: 'nl',\n          label: 'Dutch'\n        }\n      ]\n    }\n  }\n}\n```\n\n## Audio example\n\n```js\naudio: {\n  sources: [\n    {\n      src: 'https://raw.githubusercontent.com/quasarframework/quasar-ui-qmediaplayer/dev/demo/public/media/Scott_Holmes_-_04_-_Upbeat_Party.mp3',\n      type: 'audio/mp3'\n    }\n  ]\n}\n```\n\n# Other\n\n## Fullscreen\n\nIt is important to note that if you desire fullscreen, then you must add Quasar's `AppFullscreen` plug-in to your `quasar.conf.js`. For more information, please refer to the [documentation](https://quasar.dev/quasar-plugins/app-fullscreen):\n\n```js\n// quasar.conf.js\n\nreturn {\n  framework: {\n    plugins: [\n      'AppFullscreen'\n    ]\n  }\n}\n```\n\n## cross-origin\n\nWhether to use CORS for fetching assets.\n\n1. **anonymous** - CORS requests for this element will not have the credentials flag set.\n2. **use-credentials** - CORS requests for this element will have the credentials flag set; this means the request will provide credentials.\n3. **null** - do not use CORS.\n\nFor more detailed information [go here](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes).\n\n## preload\n\nThis enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:\n\n1. **none**: Indicates that the audio should not be preloaded.\n2. **metadata**: Indicates that only audio metadata (e.g. length) is fetched.\n3. **auto**: Indicates that the whole audio file can be downloaded, even if the user is not expected to use it.\n\nFor more detailed information [go here](https://html.spec.whatwg.org/multipage/media.html#attr-media-preload).\n\n## networkState\nYou can capture the `networkState` with the `@networkState` event.\n```js\n  NETWORK_EMPTY = 0\n  NETWORK_IDLE = 1\n  NETWORK_LOADING = 2\n  NETWORK_NO_SOURCE = 3\n```\nFor more detailed information [go here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/networkState).\n\n## MediaError\nYou can capture the `MediaError` with the `@error` event.\n```js\n  MEDIA_ERR_ABORTED = 1\n  MEDIA_ERR_NETWORK = 2\n  MEDIA_ERR_DECODE = 3\n  MEDIA_ERR_SRC_NOT_SUPPORTED = 4\n```\nFor more detailed information [go here](https://developer.mozilla.org/en-US/docs/Web/API/MediaError).\n\n## iOS\nIf you want to use the `playsinline` property with iOS, you will need to add the following to the `config.xml` for your iOS build:\n```html\n\u003cpreference name=\"AllowInlineMediaPlayback\" value=\"true\" /\u003e\n```\n\n# Direct Access\n\nIf you find you have a need access to the underlying media player, you can set up a `ref` on QMediaPlayer and access `$media` directly, even capturing and handling your own events.\n\n```html\n  \u003cq-media-player\n    ref=\"myPlayer\"\n    ...\n  /\u003e\n```\n\nthen\n\n```js\n// in code some where\nthis.$refs.myPlayer.$media\n\n// examples to call native functions directly:\n// this.$refs.myPlayer.$media.pause()\n// this.$refs.myPlayer.$media.play()\n\n// or via QMediaPlayer\n// this.$refs.myPlayer.pause()\n// this.$refs.myPlayer.play()\n```\n\n# Donate\nIf you appreciate the work that went into this, please consider donating to [Quasar](https://donate.quasar.dev) or [Jeff](https://github.com/sponsors/hawkeye64).\n\n# License\nMIT (c) Jeff Galbraith \u003cjeff@quasar.dev\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquasarframework%2Fquasar-ui-qmediaplayer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquasarframework%2Fquasar-ui-qmediaplayer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquasarframework%2Fquasar-ui-qmediaplayer/lists"}