Quick Start Guide - Modifying the video player page
From HwdMediaShare Documentation
Contents |
Open the video player page template
To edit this template file you need to download the original template file from your server using a suitable FTP program. You can then edit the file on your local computer using a text editor. Once you have finished making the changes you should save the file and then upload it back to your server and overwrite the original file.
The video player template file is located here:
JoomlaRoot/plugins/hwdvs-templates/<template_name>/templates/video_player.tpl
The <template_name> stands for the name of the selected template.
The basic concept
The template file is used for the layout of the corresponding hwdVideoShare page. For example, when the video player page is viewed in hwdVideoShare, the video player template is used.
The template file is made using basic HTML tags such as <table>, <div>, <span> etc. In addition to these HTML tags the template file also includes special template tags. These template tags contain relevant content. The following template tags are availble in the video player template.
*
* VARIABLES AVAILABLE IN THIS TEMPLATE:
* {$videoplayer->player} - the video player
* {$videoplayer->uploader} - the name of the user who posted the video
* {$videoplayer->ratingsystem} - the rating system
* {$videoplayer->videourl} - the video url
* {$videoplayer->embedcode} - the embed code
* {$videoplayer->downloadoriginal} - the button to download the original video (for local videos)
* {$videoplayer->vieworiginal} - the button to view the original video webpage (for third party videos)
* {$videoplayer->downloadflv} - the button to download the flv video (for local videos)
* {$videoplayer->favourties} - the button to add/remove from favourites
* {$videoplayer->reportmedia} - the button to report the video as inappropriate
* {$videoplayer->socialbmlinks} - the social bookmark links
* {$videoplayer->addtogroup} - the button to add the video to a group
* {$videoplayer->comments} - the video comments box
*
Main code explained
The header code
{include file="header.tpl"}
This code inserts the default hwdVideoShare header into the webpage. This includes the navigation tabs and user bar. If you wish to edit the header, you need to edit header.tpl.
Javascript for the tab system
{literal}
<script type="text/javascript">
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
var tabberOptions = {
'manualStartup':true,
'onLoad': function(argsObj) {
/* Display an alert only after tab2 */
if (argsObj.tabber.id == 'tab2') {
alert('Finished loading tab2!');
}
},
'onClick': function(argsObj) {
var t = argsObj.tabber; /* Tabber object */
var id = t.id; /* ID of the main tabber DIV */
var i = argsObj.index; /* Which tab was clicked (0 is the first tab) */
var e = argsObj.event; /* Event object */
if (id == 'tab2') {
return confirm('Swtich to '+t.tabs[i].headingText+'?\nEvent type: '+e.type);
}
},
};
</script>
/literal}
<script type="text/javascript" src="{$link_home}/components/com_hwdvideoshare/js/tabber.js"></script>
This is the main javascript for the tab system used in this template. If you plan on using the tabs, don't remove this code from teh template file.
The main video player box
<h5 class="header">{$videoplayer->title}</h5>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="{$player_width+15}" valign="top" style="overflow:hidden;">
<div style="margin-right:5px;">
<div class="standard"><div class="padding"><center>{$videoplayer->player}</center></div></div>
<div class="tabber" id="tab1">
<div class="tabbertab">
<h2>{$smarty.const._HWDVIDS_TITLE_MOREBYUSR} {$videoplayer->uploader}</h2>
<div class="standard">
<div class="padding">
{foreach name=outer item=data from=$userlist}
{include file="video_list_simple.tpl"}
{/foreach}
</div>
</div>
</div>
<div class="tabbertab">
<h2>Related</h2>
<div class="standard">
<div class="padding">
There are no related videos
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td valign="top">
<div class="standard">
<div class="padding">
{$videoplayer->ratingsystem}
<div>
<h5 class="playertitle">{$smarty.const._HWDVIDS_TITLE_PERMALINK}</h5>
<input type="text" value="{$videoplayer->videourl}" />
</div>
<div>
<h5 class="playertitle">{$smarty.const._HWDVIDS_INFO_VIDEMBEDCODE}</h5>
<input type="text" value="{$videoplayer->embedcode}" />
</div>
<div style="width:150px;overflow:hidden;">
<h5 class="playertitle">{$smarty.const._HWDVIDS_DETAILS_VDESC} </h5>{$videoplayer->description}
</div>
<div style="width:150px;overflow:hidden;">
<h5 class="playertitle">{$smarty.const._HWDVIDS_DETAILS_VTAGS} </h5>{$videoplayer->tags}
</div>
<div style="padding:5px;"/>
<div>{$videoplayer->downloadoriginal}</div>
<div>{$videoplayer->vieworiginal}</div>
<div>{$videoplayer->downloadflv}</div>
<div id="addremfav">{$videoplayer->favourties}</div>
<div>{$videoplayer->reportmedia}</div>
<div style="clear:both;"></div>
<div id="ajaxresponse"></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="standard">
<div class="padding">
{$videoplayer->socialbmlinks}
</div>
</div>
<div class="standard">
<div class="padding">
{if $print_addtogroup}{$videoplayer->addtogroup}<div id="add2groupresponse"></div>{/if}
</div>
</div>
</div>
</td>
</tr>
</table>
This table forms the main structure for the video player and video information that is displayed next to the video player such as the "video description, "tags" and functions such as "add to favourites" or "report media". The default layout is to display a column to the right of the video player. If you wish to re-arrange this layout you need to re-organise the table.
The video comments
{if $print_comments}
<h5 class="header">{$smarty.const._HWDVIDS_TITLE_VIDCOMMS}</h5>
<div class="comments">{$videoplayer->comments}</div>
{/if}
This code checks that the commenting system should be displayed and then inserts the comments if necessary.
Javascript for the tab system
<script type="text/javascript"> tabberAutomatic(tabberOptions); </script>
This code is necessary for the tab system to work correctly, do not remove it.
The footer code
{include file="footer.tpl"}
This code inserts the default hwdVideoShare footer into the webpage. If you wish to edit the footer to include custom links, you need to edit footer.tpl.