VideoPress Themes
From NewTube Docs
NOTE: The "target" stuff needs to be removed.
VideoPress is a suite of WordPress Video Plugins commonly used with Show in a Box.
Many of the plugins in the VideoPress suite can be themed. And thus made to seamlessly match and integrate into the look of the rest of your WordPress site.
Note... these themes are different from, but often complement, the normal WordPress themes.
Contents |
VideoPress Video Player
VideoPress Video Player is one of the plugins that is part of the VideoPress suite.
It was created with 2 goals in mind. #1, to take care of all the hard work of playing video in the browser. And #2, to make it so video player can be themed and skinned using HTML code. (#2 is of course what is important here.)
The theming support in this plugin was designed for people with minimal HTML knowledge. (You don't have to be a software engineer to create a VideoPress Video Player theme.)
Basic Structure
Themes for VideoPress Video Player get placed in the directory "wp-content/plugins/videopress-video-player/themes/".
These have their own directory, and are made up of at least one file.
For example, if you have the theme "example-skin", then we'd have the directory
- wp-content/plugins/videopress-video-player/themes/example-skin
And the file...
- wp-content/plugins/videopress-video-player/themes/example-skin/render.php
The output of this "render.php" file is the video player.
Simple Example
So let's just jump into it with an example...
<?php the_video('myvideo'); ?>
<a target="myvideo" href="#play">play</a>
<a target="myvideo" href="#stop">stop</a>
<a target="myvideo" href="#pause">pause</a>
(This would go into the "render.php" file in your VideoPress Video Player theme.)
Let's look at the first part of this code...
<?php the_video('myvideo'); ?>
This is similar the other WordPress template tags. It's not something you really have the understand too in depth. Just keep this in mind... wherever you put "<?php the_video(); ?>" is where the video screen will appear.
Note that this is just the screen without any controls... like the play button, pause button, etc.
Let's take another look at the same code...
<?php the_video('myvideo'); ?>
<a target="myvideo" href="#play">play</a>
<a target="myvideo" href="#stop">stop</a>
<a target="myvideo" href="#pause">pause</a>
Notice that the "myvideo" part in our template tag matches what we have in the target for the link. That is extremely important.
These must always match!
Now... you can name these almost whatever you want. But... they must match. So... for example... here's the same code above with a different name used...
<?php the_video('wow'); ?>
<a target="wow" href="#play">play</a>
<a target="wow" href="#stop">stop</a>
<a target="wow" href="#pause">pause</a>
Note we changed the name used from "myvideo" to "wow". It doesn't really mater what name we use there as long as they match.
Now let's look at one of those links...
<a target="myvideo" href="#play">play</a>
We already know what we need for the target attribute, so we won't go over that.
The important part to focus on is the value of the href attribute.
<a target="myvideo" href="#play">play</a>
Here we have #play. In the other links in our code from before we have #pause and #stop.
These will control the video screen.
Here's a list of the controls you have...
| Fragment Control | Description | Example |
|---|---|---|
#goto(ts) |
Makes the video screen goto a specific frame time index. If the video screen is already playing it will continue playing. If the video screen is paused it will be paused at that time index. If the video screen is stopped, it will become paused at the time index. (Thisis useful for sliders and scrubbers in the video player.) | <a target="the_video" href="#goto(187s)">goto it</a> |
#pause |
Makes the video screen pause. | <a target="the_video" href="#pause"><img src="pause-button.png" alt="pause" /></a> |
#play |
Makes the video screen pause. | <a target="the_video" href="#play"><img src="play-button.png" alt="play" /></a> |
#stop |
Makes the video screen stop. | <a target="the_video" href="#stop"><img src="stop-button.png" alt="stop" /></a> |
Image Map Example
Let's say you had an artist create a beautiful video player for you. Or maybe, you're an artist yourself, and you did all the graphic design work for the video player.
One way of turning this into a VideoPress Video Player theme is by using client side image maps. That is, using the <map> and <area> elements (as well as the <img> element).
Here's what your code for your "render.php" might look like...
<?php the_video('that_video'); ?>
<map name="video-player-hotspots">
<area target="that_video" href="#play" shape="rect" coords="0,0,100,100" alt="press to play" />
<area target="that_video" href="#pause" shape="circle" coords="95,105,5" alt="press to pause" />
<area target="that_video" href="#stop" shape="circle" coords="95,105,5" alt="press to stop" />
</map>
<img src="video-player-image.jpg" usemap="#video-player-hotspots" />
The first thing to note is that the name in the template tag matches the name in the "target" attribute of the <area> element...
<?php the_video('that_video'); ?>
<map name="video-player-hotspots">
<area target="that_video" href="#play" shape="rect" coords="0,0,100,100" alt="press to play" />
<area target="that_video" href="#pause" shape="circle" coords="95,105,5" alt="press to pause" />
<area target="that_video" href="#stop" shape="circle" coords="95,105,5" alt="press to stop" />
</map>
<img src="video-player-image.jpg" usemap="#video-player-hotspots" />
The next thing to notice is the fragment controls used...
<?php the_video('that_video'); ?>
<map name="video-player-hotspots">
<area target="that_video" href="#play" shape="rect" coords="0,0,100,100" alt="press to play" />
<area target="that_video" href="#pause" shape="circle" coords="95,105,5" alt="press to pause" />
<area target="that_video" href="#stop" shape="circle" coords="95,105,5" alt="press to stop" />
</map>
The next things to notice... although not something specific to VideoPress Video Player themes... but instead specific to HTML client side image maps... the <map>'s name and the fragment in the "usemap" attribute in the <img> match...
<?php the_video('that_video'); ?>
<map name="video-player-hotspots">
<area target="that_video" href="#play" shape="rect" coords="0,0,100,100" alt="press to play" />
<area target="that_video" href="#pause" shape="circle" coords="95,105,5" alt="press to pause" />
<area target="that_video" href="#stop" shape="circle" coords="95,105,5" alt="press to stop" />
</map>
<img src="video-player-image.jpg" usemap="#video-player-hotspots" />
Note that in the "usemap" attribute, on the <img> element, there is a "#" before the name... where with the <map> element there isn't. This is important! It must be done this way.
The "shape" and "coords" attributes on the <area> elements define where the hotspots on the image for the video player are. I.e., the define where, if you click, something will happen. (There's software out there that can help you figure these out for you.)
