Kirby Plyrtag
| Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
|---|---|---|---|---|---|---|---|---|---|---|
| Plyr | 23,403 |  | 277 | 145 | 12 days ago | 153 | April 20, 2022 | 804 | mit | JavaScript |
| A simple HTML5, YouTube and Vimeo player | ||||||||||
| React Player | 7,523 |  | 1,080 | 517 | 6 days ago | 147 | September 16, 2022 | 199 | mit | JavaScript |
| A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion | ||||||||||
| Lightgallery | 5,730 |  | 122 | 26 | 20 days ago | 107 | September 19, 2022 | 50 | other | TypeScript |
| A customizable, modular, responsive, lightbox gallery plugin. | ||||||||||
| Lightgallery.js | 5,223 |  | 54 | 25 | 7 months ago | 15 | October 29, 2020 | 2 | other | JavaScript |
| Full featured JavaScript image & video gallery. No dependencies | ||||||||||
| Lite Youtube Embed | 4,548 |  | 2 | a month ago | 8 | March 17, 2021 | 35 | other | JavaScript | |
| A faster youtube embed. | ||||||||||
| Alltube | 2,798 | 3 | a day ago | 54 | March 08, 2022 | 43 | gpl-3.0 | PHP | ||
| Web GUI for youtube-dl | ||||||||||
| Vime | 2,444 |  | 11 | 16 days ago | 81 | September 13, 2022 | 153 | mit | TypeScript | |
| Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion... | ||||||||||
| Jarallax | 1,248 |  | 102 | 25 | 5 days ago | 30 | March 30, 2022 | 18 | mit | JavaScript |
| Parallax scrolling for modern browsers | ||||||||||
| Jquery.mb.ytplayer | 1,231 | 17 | 10 months ago | 24 | December 04, 2020 | 36 | JavaScript | |||
| use a custom yutube player for a video as background on jQuery framework | ||||||||||
| Richtextview | 1,124 | 1 | a month ago | 53 | January 25, 2022 | 37 | apache-2.0 | Swift | ||
| iOS Text View (UIView) that Properly Displays LaTeX, HTML, Markdown, and YouTube/Vimeo Links | ||||||||||
kirby plyrtag | Kirbytag for plyr player
Implements html syntax for plyr video, audio, vimeo & youtube player
by Dominik Pschenitschni pschen.de | Github
Introduction
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).
Quick setup
1)
Store the plyrtag.php in
site/tags/
2) (Optional for self hosted media)
Store your video / audio files in the content folder of your page.
3)
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>
Use tag
Add a kirbytag to your content-file (txt) at the point you want the video to be.
For self hosted videos
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).
For self hosted audios
Just use the attributes that you need.
(plyr: audio mp3: audio.mp3 ogg: audio.ogg)
For YouTube videos
(plyr: YOUTUBEID)
For Vimeo videos
(plyr: VIMEOID)
Kirby options
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)
Video Files
| 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. |
Audio Files
| 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. |
Example configuration
c::set('plyrtag.globalVideoFolder', true);
c::set('plyrtag.globalVideoFolderName', 'myVideoFolder');
c::set('plyrtag.globalAudioFolder', true);
c::set('plyrtag.globalAudioFolderName', 'myAudioFolder');
Todo:
- [x] 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!
