Warning [Archived] Outdated and not maintained. Use e.g. stuymedova/kirby-plyr instead
kirby plyrtag | Kirbytag for plyr player
Implements html syntax for plyr video, audio, vimeo & youtube player
by Dominik Pschenitschni pschen.de | Github
This is an extension of kirbytext for the kirby cms, which adds an easy way to embed your self-hosted html5-video and audio sources, vimeo & youtube player with the beautiful plyr as UI.
This extension can handle mp4 (h.264), webm and HTTP-live-streaming sources as well as a poster. You can select, which sources you have (for audio mp3 / ogg).
It is as well possible to embed a YouTube or Vimeo video via the video ID. Kirby plyrtag automatically detects if the ID is from YouTube or Vimeo and includes. For this it is better to enable caching in kirby (because the detection takes some time).
Store the plyrtag.php in
site/tags/Store your video / audio files in the content folder of your page.
Add plyr css and js and as told in the plyr readme.
Include the plyr.css stylsheet into your <head>.
<link rel="stylesheet" href="path/to/plyr.css">Include the plyr.js script before the closing </body> tag and then call plyr.setup(); to initialize it.
<script src="path/to/plyr.js"></script>
<script>plyr.setup();</script>Add a kirbytag to your content-file (txt) at the point you want the video to be.
By default paths are relative to the current page folder (can be changed with kirby options).
(plyr: video mp4: video.mp4 webm: video.webm hls: hlsFolder/hlsfile.m3u8 poster: poster.jpg)Just use the tag attributes that you need (eg. just mp4, web and poster).
(I didn't test HLS yet, so I don't know if that works. Help in converting videos is welcome).
Just use the attributes that you need.
(plyr: audio mp3: audio.mp3 ogg: audio.ogg)(plyr: YOUTUBEID)(plyr: VIMEOID)Optional for self hosted files: Store your media files in a separate folders, so you can prevent those huge files from being added to git or dropbox (by excluding them from the sync). Add options to your kirby config file.
Exclude this folder from dropbox-sync before you add any content to that folder! Or move the content temporary to another folder! Otherwise all the content in the excluded folder will be removed from the local directory (but not the server)
| Option | Type | Default | Description |
|---|---|---|---|
plyrtag.globalVideoFolder |
Boolean | false |
Toggles if your video files should be stored in a global video folder (default: video) in your kirby root folder. |
plyrtag.globalVideoFolderName |
String | video |
Set a different name for the global video folder. |
| Option | Type | Default | Description |
|---|---|---|---|
plyrtag.globalAudioFolder |
Boolean | false |
Toggles if your audio files should be stored in a global audio folder (default: audio) in your kirby root folder. |
plyrtag.globalAudioFolderName |
String | audio |
Set a different name for the global audio folder. |
c::set('plyrtag.globalVideoFolder', true);
c::set('plyrtag.globalVideoFolderName', 'myVideoFolder');
c::set('plyrtag.globalAudioFolder', true);
c::set('plyrtag.globalAudioFolderName', 'myAudioFolder');- Add audio support (added in 0.2.0)
- Auto detect if the source files exist.
- Find out how to easy convert files to hls (I don't use it myself yet). Any ideas?
- Find a better (faster ) method to find out if video id is from youtube or vimeo.
License: http://www.gnu.org/licenses/gpl-3.0.txt GPLv3 License
Based on kirbytag html5video by Jannik Beyerstedt from Hamburg, Germany jannikbeyerstedt.de | Github. Thanks!