YaWK  24.1
Yet another WebKit
plyr.php
Go to the documentation of this file.
1 <?php
2 namespace YAWK\WIDGETS\PLYR\PLAYER
3 {
4  /**
5  * @details<b>Plyr Widget - html5 based video player</b>
6  *
7  * <p>Plyr is a a simple, accessible and customisable and wide-known media player for
8  * HTML 5 Video, Audio, YouTube, and Vimeo. All you need is the url to your media file.
9  * As you wish, you can set some settings like width, height, poster image, media control
10  * functions, autoplay and much more. </p>
11  *
12  *
13  * @author Daniel Retzl <[email protected]>
14  * @copyright 2018 Daniel Retzl
15  * @version 1.0.0
16  * @brief Plyr HTML5 Media Player Widget
17  */
18  class plyr extends \YAWK\widget
19  {
20  /** @param object global widget object data */
21  public $widget = '';
22  /** @param string Title that will be shown above widget */
23  public $plyrHeading = '';
24  /** @param string Subtext will be displayed beside title */
25  public $plyrSubtext = '';
26  /** @param string URL of the media file to play */
27  public $plyrMediaFile = '';
28  /** @param string The media file type */
29  public $plyrFiletype = '';
30  /** @param string Player width in pixel or % */
31  public $plyrWidth = '100%';
32  /** @param string Poster Image */
33  public $plyrPoster = '';
34  /** @param string Poster Html Markup */
35  public $plyrPosterHtml = '';
36  /** @param string Text Track File */
37  public $plyrTextTrackFile = '';
38  /** @param string Text Track Html Markup */
39  public $plyrTextTrackFileHtmlOutput = '';
40  /** @param string Text Track Label */
41  public $plyrTextTrackLabel = '';
42  /** @param string Text Track Src Language */
43  public $plyrTextTrackSrcLang = '';
44  /** @param bool Autoplay true|false */
45  public $plyrAutoplay = false;
46  /** @param bool Click to play true|false */
47  public $plyrClickToPlay = true;
48  /** @param bool Context Menus enabled? */
49  public $plyrDisableContextMenu = true;
50  /** @param bool Hide player controls true|false */
51  public $plyrHideControls = true;
52  /** @param bool Display poster on video end true|false */
53  public $plyrShowPosterOnEnd = false;
54 
55  /**
56  * @brief Load all widget settings from database and fill object
57  * @param object $db Database Object
58  * @brief Load all widget settings on object init.
59  */
60  public function __construct($db)
61  {
62  // load this widget settings from db
63  $this->widget = new \YAWK\widget();
64  $settings = $this->widget->getWidgetSettingsArray($db);
65  foreach ($settings as $property => $value) {
66  $this->$property = $value;
67  }
68  }
69 
70  /**
71  * @brief Init example widget and call a function for demo purpose
72  * @brief Example Widget Init
73  */
74  public function init()
75  { // call any functions or methods you have previously defined in this class
76  echo $this->getHeading($this->plyrHeading, $this->plyrSubtext);
77  // check and set media file type
78  $this->checkMediaFileType();
79  // check and set poster image
80  $this->setPoster();
81  // check and set text track
82  $this->checkTextTrack();
83  // finally: embed plyr media player
84  $this->embedPlyr();
85  }
86 
87  /**
88  * @brief Check and set media file type
89  * @brief check and set media file type
90  */
91  public function checkMediaFileType()
92  {
93  if (isset($this->plyrMediaFile) && (!empty($this->plyrMediaFile)))
94  {
95  if (strpos($this->plyrMediaFile, '.mp4') !== false)
96  {
97  $this->plyrFiletype = "video/mp4";
98  }
99  if (strpos($this->plyrMediaFile, '.webm') !== false)
100  {
101  $this->plyrFiletype = "video/webm";
102  }
103  }
104  else
105  {
106  echo "Plyr Error: unable to detect media file type - no file was set!";
107  }
108  }
109 
110  public function setPoster()
111  {
112  if (isset($this->plyrPoster) && (!empty($this->plyrPoster)))
113  { // poster is set...
114  $this->plyrPosterHtml = "poster=\"$this->plyrPoster\"";
115  }
116  else
117  { // no poster set, leave output empty
118  $this->plyrPosterHtml = "poster=\"\"";
119  }
120  }
121 
122  public function checkTextTrack()
123  {
124  // check if text track file, language and label are set
125  if (isset($this->plyrTextTrackFile) && (!empty($this->plyrTextTrackFile)))
126  { // language not found
127  if (!isset($this->plyrTextTrackSrcLang) || (empty($this->plyrTextTrackSrcLang)))
128  { // set default language:
129  $this->plyrTextTrackSrcLang = "en";
130  }
131  // label is not set
132  if (!isset($this->plyrTextTrackLabel) || (empty($this->plyrTextTrackLabel)))
133  { // set default label:
134  $this->plyrTextTrackLabel = "English";
135  }
136  // output text track html...
137  $this->plyrTextTrackFileHtmlOutput = "<track kind=\"captions\" label=\"$this->plyrTextTrackLabel\" srclang=\"$this->plyrTextTrackSrcLang\" src=\"$this->plyrTextTrackFile\" default>";
138  }
139  else
140  { // no text track is set, output nothing
141  $this->plyrTextTrackFileHtmlOutput = '';
142  }
143  }
144 
145  public function embedPlyr()
146  {
147  echo '
148  <!-- output plyr html player -->
149  <section>
150  <video '.$this->plyrPosterHtml.' controls style="width: '.$this->plyrWidth.'">
151  <source src="'.$this->plyrMediaFile.'" type="'.$this->plyrFiletype.'">
152  <!-- Text track file -->
153  '.$this->plyrTextTrackFileHtmlOutput.'
154  <!-- Fallback for browsers that dont support the <video> element -->
155  <a href="'.$this->plyrMediaFile.'" download>Download</a>
156  </video>
157  </section>
158 
159  <!-- plyr js -->
160  <script src="system/widgets/plyr/js/plyr.js"></script>
161  <!-- run plyr -->
162  <script>
163  plyr.setup({
164  "autoplay":'.$this->plyrAutoplay.',
165  "disableContextMenu": '.$this->plyrDisableContextMenu.',
166  "hideControls": '.$this->plyrHideControls.',
167  "showPosterOnEnd": '.$this->plyrShowPosterOnEnd.',
168  "clickToPlay": '.$this->plyrClickToPlay.'
169  });
170  </script>
171  <!-- plyr css -->
172  <link type="text/css" rel="stylesheet" href="system/widgets/plyr/js/plyr.css">
173 
174  <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
175  <script src="system/widgets/plyr/js/rangetouch.js" async></script>';
176  }
177  }
178 }
179 ?>
YAWK\WIDGETS\PLYR\PLAYER\plyr
Plyr HTML5 Media Player Widget.
Definition: plyr.php:18
YAWK\WIDGETS\PLYR\PLAYER\plyr\__construct
__construct($db)
Load all widget settings from database and fill object.
Definition: plyr.php:59
YAWK\WIDGETS\PLYR\PLAYER\plyr\init
init()
Init example widget and call a function for demo purpose.
Definition: plyr.php:73
YAWK\WIDGETS\PLYR\PLAYER\plyr\checkMediaFileType
checkMediaFileType()
Check and set media file type.
Definition: plyr.php:90
YAWK\widget
Widgets are small, useful tools that you can include everywhere in your website.
Definition: widget.php:22
YAWK\widget\getWidgetSettingsArray
getWidgetSettingsArray($db)
Get widget settings and return it as array.
Definition: widget.php:69
YAWK\widget\getHeading
getHeading($heading, $subtext)
Get widget heading and subtext, return headline.
Definition: widget.php:669
$settings
if(isset($_POST['save'])) $settings
Definition: settings-backend.php:46
$value
$value
Definition: widget-edit.php:244