{"id":21330582,"url":"https://github.com/friendsofredaxo/plyr","last_synced_at":"2025-07-12T09:30:35.600Z","repository":{"id":39970498,"uuid":"103269914","full_name":"FriendsOfREDAXO/plyr","owner":"FriendsOfREDAXO","description":"Video-/Audio-Player :: Plyr,  Unterstützt: lokale Videos, externe Videos, Vimeo, YouTube und mp3.  ","archived":false,"fork":false,"pushed_at":"2024-03-01T14:14:41.000Z","size":12687,"stargazers_count":48,"open_issues_count":3,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-15T00:27:50.538Z","etag":null,"topics":["hacktoberfest","mp3player","player","redaxo","redaxo-addon","responsive","video","vimeo","youtube"],"latest_commit_sha":null,"homepage":"","language":"PHP","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/FriendsOfREDAXO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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}},"created_at":"2017-09-12T12:49:04.000Z","updated_at":"2024-03-01T14:23:28.000Z","dependencies_parsed_at":"2024-03-01T15:28:58.283Z","dependency_job_id":"a4d0c4bb-f514-40a9-bea6-7774f634776f","html_url":"https://github.com/FriendsOfREDAXO/plyr","commit_stats":null,"previous_names":[],"tags_count":62,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Fplyr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Fplyr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Fplyr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Fplyr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FriendsOfREDAXO","download_url":"https://codeload.github.com/FriendsOfREDAXO/plyr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225810073,"owners_count":17527596,"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":["hacktoberfest","mp3player","player","redaxo","redaxo-addon","responsive","video","vimeo","youtube"],"created_at":"2024-11-21T22:22:20.770Z","updated_at":"2024-11-21T22:22:21.408Z","avatar_url":"https://github.com/FriendsOfREDAXO.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# REDAXO-AddOn: Plyr\n\n🚨 Die Entwicklung dieses AddOns wurde eingestellt und wurde daher archiviert.\n\nDas AddOn stellt den Video-/Audio-Player [Plyr](https://plyr.io) zur Verfügung.\n\n![Screenshot](https://raw.githubusercontent.com/FriendsOfREDAXO/video/assets/mediapool.jpg)\n\n\nEs können lokale Audio-Dateien (mp3), Videos und Youtube- sowie Vimeo-Videos eingebunden werden.  \nWir haben uns bewusst gegen eine automatische Einbindung im Frontend entschieden um dem Entwickler alle Freiheiten zu lassen. \n\n## AddOn Features\n- Statische PHP Methode zur Ausgabe des Videos\n- REX_PLYR[] Variable zur schnellen Ausgabe in einem Modul \n- Einbindung des Players im Backend\n- Plyr bindet sich in die Detailseite des Medienpools ein\n- Methoden zur Ermittlung des Videotyps\n- Methode zur Erstellung von Playlists \n- Controls können je Ausgabe definiert werden\n- JQuery wird für Playlists benötigt\n\n\u003e Bei Medien aus dem Medienpool muss nur der Dateiname angegeben werden. Bei Youtube und Vimeo immer die vollständige URL. \nDiese Methode bietet sich an um evtl. mehrere Videos z.B. aus einer Datenbank oder Medialist zu verarbeiten.\n\n## Ausgabe eines Mediums\n\nDie Ausgabe erfolgt über die Methode outputMedia(). \n\nEinzelmedium:\n\n```php\necho rex_plyr::outputMedia($fileOrUrl,$config,$poster);\n```\n\noder über die REX_VALUE für Einzelmedien: \n\n`REX_PLYR[id=1 controls=\"play,progress\"]`\n\nPlayLists werden wie folgt ausgegeben: \n\n`rex_plyr::outputMediaPlaylist($media_filenames,$setup)`\n\n\n\n## Standard-Player \n\n### Einbindung im Frontend\n\nDie nötigen Dateien findet man im Assets-Ordner. \nEigene CSS und JS sollten nach Möglichkeit an anderer Stelle abgelegt werden um Probleme nach einem Update zu vermeiden. \n\nPlyr benötigt 2 JS-Dateien und eine CSS. In der `plyr_video.js` wird der Player initialisiert. \n\n#### CSS für Plyr\n\n```html\n\u003clink rel=\"stylesheet\" href=\"\u003c?= rex_url::base('assets/addons/plyr/vendor/plyr/dist/plyr.css') ?\u003e\"\u003e\n```\n\n#### JS für Plyr\n\n```php\n\u003cscript src=\"\u003c?= rex_url::base('assets/addons/plyr/vendor/plyr/dist/plyr.min.js') ?\u003e\"\u003e\u003c/script\u003e\n\u003cscript src=\"\u003c?= rex_url::base('assets/addons/plyr/plyr_init.js') ?\u003e\"\u003e\u003c/script\u003e\n```\n\n\u003eAlle weiteren Infos zur Konfiguration der Skripte oder der Controls der Ausgaben, finden sich auf der GitHub-Site von [Plyr](https://plyr.io). \n\n\n### Einfaches Modulbeispiel für lokale Videos mit Poster\n\n#### Eingabe\n\n```php\n\u003cdiv class=\"form-horizontal\"\u003e\n    \u003cdiv class=\"form-group\"\u003e\n        \u003clabel class=\"col-sm-2 control-label\"\u003eVideo\u003c/label\u003e\n            \u003cdiv class=\"col-sm-10\"\u003e\n                 REX_MEDIA[id=1 widget=1 types=mp4]\n            \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"form-group\"\u003e\n        \u003clabel class=\"col-sm-2 control-label\"\u003eVorschaubild (optional)\u003c/label\u003e\n            \u003cdiv class=\"col-sm-10\"\u003e\n                 REX_MEDIA[id=2 widget=1 types=jpg]\n            \u003c/div\u003e\n    \u003c/div\u003e       \n\u003c/div\u003e  \n```\n\n### Ausgabe\n\n```php\n\u003c?php\n$preview = $out = '';\nif ('REX_MEDIA[2]'!='')\n{\n    $preview = rex_media_manager::getUrl('video_cover','REX_MEDIA[2]'); \n}\necho rex_plyr::outputMedia('REX_MEDIA[1]','play-large,play,fullscreen,mute,volume,progress,airplay,pip,nopreload',$preview);\n?\u003e\n```\n\n\n\n### Modul-Beispiel mit MFORM CustomLink für externe und lokale Videos\n\nDas CustomLink-Widget bietet sich an, weil die Redaktion damit lokale und externe Medien verlinken kann. \n\n#### Eingabe\n\n```php\n// mform ab 7.0 \n$mform = MForm::factory()\n-\u003eaddFieldsetArea('Video', MForm::factory()\n-\u003eaddCustomLinkField(\"1\", array('label'=\u003e'Medium', 'data-tel'=\u003e'disable', 'data-mailto'=\u003e'disable', 'data-formlink'=\u003e'disable', 'data-intern'=\u003e'disable'))\n-\u003eaddMediaField(1, array('label'=\u003e'Image'))\n);\necho $mform-\u003eshow();\n```\n\n#### Ausgabe über `rex_plyr::outputMedia`\n\n```php\necho rex_plyr::outputMedia('REX_VALUE[1]','play-large,play,fullscreen,mute,volume,progress,airplay,pip,autoplay,loop,nopreload','/media/cover/REX_MEDIA[1]');\n```\n\u003e Beispiel mit allen Parametern, die nicht gewünschten Parameter bitte entfernen\n\n## Playlist-Player\n\n![Screenshot](https://raw.githubusercontent.com/FriendsOfREDAXO/video/assets/playlist.jpg)\n\n### CSS für Playlist\n\nFalls nicht bereits schon eingebunden: \n\n```html\n\u003clink rel=\"stylesheet\" href=\"\u003c?= rex_url::base('assets/addons/plyr/vendor/plyr/dist/plyr.css') ?\u003e\"\u003e\n```\nund zusätzlich: \n```html\n\u003clink rel=\"stylesheet\" href=\"\u003c?= rex_url::base('assets/addons/plyr/plyr_playlist.css') ?\u003e\"\u003e\n```\n\n### JS für Playlists\n\nJS für Plyr Playlist lautet anders\n```php\n\u003cscript src=\"\u003c?= rex_url::base('assets/addons/plyr/vendor/plyr/dist/plyr.min.js') ?\u003e\"\u003e\u003c/script\u003e\n\u003cscript src=\"\u003c?= rex_url::base('assets/addons/plyr/plyr_playlist.js') ?\u003e\"\u003e\u003c/script\u003e\n```\n\n### Modul-Eingabe Playlist\n\n```php\nREX_MEDIALIST[id=\"1\" type=\"mp3,mp4\" widget=\"1\"]\n```\n\n#### Modul-Ausgabe Playlist \n\nDie Ausgabe erfolgt über `rex_plyr::outputMediaPlaylist`\n\nModul-Ausgabe\n\n```php\n$media_filenames = preg_grep('/^\\s*$/s', explode(\",\", REX_MEDIALIST[1]), PREG_GREP_INVERT);\necho rex_plyr::outputMediaPlaylist($media_filenames,'play-large,play,progress,airplay,pip');\n```\n\n## Plyr und Consent-Abfragen für Youtube und Vimeo \n\nDas AddOn bietet Hilfs-Methoden zur Ausgabe von Consent-Meldungen an. \n\n```\n$video = rex_plyr::consent($url = '', $setup = null, $poster = null, $return_when_empty = '')\n```\nPrüft die Angegebene Url und gibt einen Consent Hinweis aus, wenn es sich um ein Vimeo- oder Youtube-Video handelt.  \nDie Ausgabe erfolgt über das Fragment `consent.php`. Es können Parameter zur Konfiguration der Player mitgegeben werden. \nWird für `$return_when_empty` als Wert `cke5` eingegeben wird bei nicht erfolgter Prüfung das originale oembed zurückgegeben. \n\n```\n$content = rex_plyr::oembed_replace(oembed_replace($string, $setup = null)) \n```\nErsetzt sofern zutreffend, Youtube und Vimeo- OEMBED-Tags vom CKE5 durch Plyr-Code und setzt die Consentmeldungen. \nEs können Parameter zur Konfiguration der Player mitgegeben werden. \n\n```\nrex_plyr::cke_oembed_helper($setup = null); \n```\nRuft einen Outputfilter auf der alle gefundenen CKE5-OEMBEDs in der Ausgabe ersetzt. \n\nIm Consent-Manager muss beim jeweiligen Cookie das passende Script eingesetzt werden. Die nachfolgenden functions sollten auch nach einem Ajax request ausgeführt werden. \n\n### Vimeo Consent-Script\n\n```js\n\u003cscript\u003e\nfunction setupPlyrVm() {\nconst playersvimeo = Plyr.setup('.rex-plyr_consent_vimeo', {\n        youtube: {\n            noCookie: true\n        },\n        vimeo: {\n            dnt: false\n        },\n        iconUrl: '/assets/addons/plyr/vendor/plyr/dist/plyr.svg',\n        blankVideo: '/assets/addons/plyr/vendor/plyr/dist/blank.mp4'\n    });\n    if (document.querySelector('.rex-plyr_consent_vimeo')) {\n        playersvimeo.forEach(function (player) {\n            player.on('play', function () {\n                var others = playersvimeo.filter(other =\u003e other != player)\n                others.forEach(function (other) {\n                    other.pause();\n                })\n            });\n        });\n    }\n }\n setupPlyrVm();\n\u003c/script\u003e\n```\n\n### Youtube Consent-Script\n\n```js\n\u003cscript\u003e\nfunction setupPlyrYt() {\n    const playersyoutube = Plyr.setup('.rex-plyr_consent_youtube', {\n        youtube: {\n            noCookie: true,\n        },\n        iconUrl: '/assets/addons/plyr/vendor/plyr/dist/plyr.svg'\n    });\n    if (document.querySelector('.rex-plyr_consent_youtube')) {\n        playersyoutube.forEach(function (player) {\n            player.on('play', function () {\n                var others = playersyoutube.filter(other =\u003e other != player)\n                others.forEach(function (other) {\n                    other.pause();\n                })\n            });\n        });\n    }\n\n}\nsetupPlyrYt();\n    \n\u003c/script\u003e\n\n\n```\n\n### CSS-Helferlein für Consent-Platzhalter \n\nErmöglicht den Platzhalter im 16:9-Format darzustellen.\n\n```css\n .aspect-ratio-16-9 {\n  display: flow-root;\n  position: relative;\n}\n\n.aspect-ratio-16-9::before {\n  content: '';\n  float: left;\n  padding-bottom: 56.25%;\n}\n```\n\n\n\n## `REX_PLYR`\n\nREX_PLYR nimmt eine einfache REX_VAR an. \nz.B.  `REX_VALUE[1]` aus der Moduleingabe wäre in der Ausgabe `REX_PLYR[1]`\nEs nimmt keine REX_MEDIA Daten an. Daher empfiehlt sich dafür als Eingabe Custom URL Widget aus mform. Damit kann man Medien und Urls einfach übergeben. \n\nZur Ausgabe einzelner Medien steht auch eine REDAXO-Variable zur Verfügung. \n\n\n```php\nREX_PLYR[1]\n```\n\noder mit Konfiguration der Controls:\n\n```php\nREX_PLYR[id=1 controls=\"play,progress\"]\n```\n\n\n\n## init.js Orientierungsänderung Beispiel: \n\nzur Änderung der Vollbildanzeige bei Orientierungsänderung des Geräts\n\n```js\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n    const players = Plyr.setup('.rex-plyr', {\n        youtube: {\n            noCookie: true\n        },\n        iconUrl: '/assets/addons/plyr/vendor/plyr/dist/plyr.svg',\n        fullscreen: {\n            enabled: true,\n            fallback: true,\n            iosNative: false\n        }\n    });\n});\n\nconst players = new Plyr('.rex-plyr');\nplayers.on('play', event =\u003e {\n    const instance = event.detail.plyr;\n\n    screen.orientation.addEventListener(\"change\", function () {\n        if (screen.orientation.type = 'landscape-primary') {\n            players.fullscreen.enter();\n        }\n        if (screen.orientation.type = 'portrait-primary') {\n            players.fullscreen.exit();\n        }\n    }, false);\n\n    window.addEventListener('orientationchange', function () {\n        if (window.orientation \u0026 2) {\n            players.fullscreen.enter();\n        } else {\n            players.fullscreen.exit();\n        }\n\n    });\n\n});\n```\n\n## youtube vimeo playlist\n\nErlaubt das gemischte Abspielen von Youtube und Vimeo-Videos.\n\nBeipspiel für Bootstrap 4\n\nCSS\n\n```html\n\u003clink rel=\"stylesheet\" href=\"\u003c?= rex_url::base('assets/addons/plyr/vendor/plyr/dist/plyr.css') ?\u003e\"\u003e\n```\nund zusätzlich: \n```html\n\u003clink rel=\"stylesheet\" href=\"\u003c?= rex_url::base('assets/addons/plyr/youtube_vimeo_playlist.css') ?\u003e\"\u003e\n```\n\n\nJS \n```php\n\u003cscript src=\"\u003c?= rex_url::base('assets/addons/plyr/vendor/plyr/dist/plyr.min.js') ?\u003e\"\u003e\u003c/script\u003e\n\u003cscript src=\"\u003c?= rex_url::base('assets/addons/plyr/youtube_vimeo_playlist.js') ?\u003e\"\u003e\u003c/script\u003e\n```\n\n\n\n\n- JQuery wird benötigt. \n\n\n### Modul\n\nEingabe \n\n```php\n\u003c?php \n$id = 1;\n$mform = MForm::factory()\n    -\u003eaddFieldsetArea('Video-Liste', MForm::factory()\n    -\u003eaddCustomLinkField(\"$id.0.1\", ['label' =\u003e 'Link', 'data-media'=\u003e'disable', 'data-mailto'=\u003e'disable', 'data-intern'=\u003e'disable','data-extern'=\u003e'enable'])\n    -\u003eaddTextField(\"$id.0.title\", array('label'=\u003e'titel'))\n    );\necho MBlock::show($id, $mform-\u003eshow(), array('min'=\u003e1,'max'=\u003e40)); \n```\n\nAusgabe \n\n```php\n\u003c?php \n$data = rex_var::toArray(\"REX_VALUE[1]\"); \n$video1 = $playlist = '';\nforeach ($data as $value) {\n \n   if ($video1 == '') {\n      $video1 = $value[1];\n   }\n    \n   $playlist .= '{\n        type: \"vimeo\",\n        title: \"'.$value['title'].'\",\n        author: \"\",\n        sources: [{\n            src: \"'.$value[1].'\",\n            type: \"vimeo\"\n        }],\n        poster: \"\"\n    },';\n    \n    \n}    \n\n?\u003e\n\n\n\u003cdiv class=\"container-fluid\"\u003e\n\u003cdiv class=\"row\"\u003e\n\n  \u003cdiv id=\"player1-REX_SLICE_ID\" class=\"player order-md-first order-lg-last col-sm-12 col-md-7\"\u003e\n    \u003cdiv class=\"js-player-REX_SLICE_ID\" data-plyr-provider=\"vimeo\" data-plyr-embed-id=\"\u003c?=$video1?\u003e\" data-plyr-config='{\"controls\":[\"play\",\"progress\",\"airplay\",\"pip\",\"volume\",\"mute\",\"fullscreen\"]}'\u003e     \n   \u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003c/div\u003e  \n  \u003c/div\u003e  \n\n\u003cscript\u003e\nvar waitForJQuery = setInterval(function () {\n    if (typeof $ != 'undefined') {\n\n\n/* PLAYLIST  */\n$(document).ready(function () {\nvar myPlaylist = [\n \u003c?php echo $playlist; ?\u003e\n];\n\nvar target = \".js-player-REX_SLICE_ID\";\nvar id = '#player1-REX_SLICE_ID';\nvar listclass = \"col-sm-12 col-md-5\";\nvar limit = 30;\n\n\n    loadPlaylist(target, myPlaylist, id, listclass, limit);  // LOAD VIDEO LIST\n\n}); \n clearInterval(waitForJQuery);\n    }\n}, 10);\n\n\u003c/script\u003e    \n```\n\n\n## Methoden in der rex_plyr class\n\n`rex_plyr::outputMedia($url,$setup,$poster,$consent)`\nErstellt einen Player annhand einer Mediendatei oder URL. \n\n`rex_plyr::outputMediaPlaylist($media_filenames,$setup)`\nErstellt eine Playlist anhand des übergebenen Arrays\n\n`checkUrl($url)`\nGibt sofern es sich um eine Mediapool-Datei handelt die URL zum Medium zurück. \n\n`checkYoutube($url)` \nPrüft ob es sich um eine Youtube-URL handelt\n\n`getYoutubeId($url)` \nErmittelt die Youtube-ID eines Videos\n\n`checkVimeo($url)` \nPrüft ob es sich um eine Vimeo-URL handelt\n\n`getVimeoId($url)` \nErmittelt die Vimeo-Id eines Videos\n\n`checkMedia($url)` \nÜberprüft ob es sich um ein MP4-Video aus dem Medienpool handelt\n\n`checkExternalMp4($url)`\nÜberprüft ob ein externes MP4-Video verlinkt ist.\n\n`checkVideo($url)`\nÜberprüft ob es sich um eine Video-Datei / eine Video-Url handelt die plyr abspielen kann.\n\n`checkAudio($url)` \nÜberprüft ob es sich um eine MP3-Audio-Datei aus dem Medienpool handelt\n\n### Beispiel\n\n```php\n$plyr = new rex_plyr();\n$id = $plyr-\u003echeckMedia($url);\n```\n\n## Tricks\n\n\u003eSobald ich ein Poster einblende und \"nopreload\" nicht(!) ausgewählt ist, wird in Safari kein Poster angezeigt.\nLässt sich mit dem folgenden Fix beheben: \u003cstyle\u003e.plyr__video-wrapper{z-index: 0;}\u003c/style\u003e\n\n## Bugtracker\n\nDu hast einen Fehler gefunden oder ein nettes Feature parat? [Lege ein Issue an](https://github.com/FriendsOfREDAXO/video/issues). Bevor du ein neues Issue erstellst, suche bitte ob bereits eines mit deinem Anliegen existiert.\n\n## Lizenz\n\nsiehe [LICENSE.md](https://github.com/FriendsOfREDAXO/video/blob/master/LICENSE.md)\n\nPlyr steht unter MIT-Lizenz. Die Player bedienen sich jedoch teils unterschiedlicher Quellen, deren Lizenzen sich unterscheiden können. \n\n\n## Autor\n\n**Friends Of REDAXO**\n\n* http://www.redaxo.org\n* https://github.com/FriendsOfREDAXO\n\n**Projekt-Lead**\n[Thomas Skerbis](https://github.com/skerbis)\n\n\n## Credits:\n\nFirst Release: [Christian Gehrke](https://github.com/chrison94)\nPlayLists: [Tobias Krais](https://github.com/tobiaskrais)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffriendsofredaxo%2Fplyr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffriendsofredaxo%2Fplyr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffriendsofredaxo%2Fplyr/lists"}