Forums

Tutorial: Adding f4v file support to the basic video player block

Permalink
After looking around, I've noticed people are charging to add an addon that allows you to use f4v files in media playback. I find this odd as the base install of concrete5 has a block to allow you to add video to your site quite easily.

I'm going to show you how to modify this so you can use f4v files in your site easily.

Things to know:
<ROOT> = the place you have concrete5 installed...

The first thing we will do is backup two files.

1) go to <ROOT>/concrete/blocks/video/

2) make a copy of controller.php, and view.php
these will serve as your backup if things go horribly wrong.

3) download the longtail media player, it's free to use, and if you want to remove the JWplayer branding, you can get a license to do so.

4) unpack, and upload player.swf to: <ROOT>/concrete/blocks/video/player/

5) unpack and rename swfobject.js to swfobject2.js

6) upload swfobject2.js to:
<ROOT>/concrete/js/

7) open and edit <ROOT>/concrete/blocks/video/controller.php

find:
public function on_page_view() {
         $html = Loader::helper('html');
         $this->addHeaderItem($html->javascript('swfobject.js'));


Replace with:

public function on_page_view() {
         $html = Loader::helper('html');
         $this->addHeaderItem($html->javascript('swfobject.js'));
            $this->addHeaderItem($html->javascript('swfobject2.js'));


Save the file

8) open and edit <ROOT>/concrete/blocks/video/view.php

find:
//echo mime_content_type(DIR_FILES_UPLOADED.'/'.$file->getFilename()).'<br>';
   if( strstr(strtolower($file->getFilename()),'.flv') ){   ?>
      <script type="text/javascript">
      var flashvars = {};
      flashvars.flvfile = "<?php echo $rel_file_path?>";
      var params = {};
      params.menu = false;
      params.wmode="transparent";
      var attributes = {};
      swfobject.embedSWF("<?php echo $this->getBlockURL()?>/videoPlayer.swf", "flv_player_<?php echo $bID?>", "<?php echo $controller->width?>", "<?php echo $controller->height?>", "9.0.0","expressInstall.swf", flashvars, params, attributes);
      </script>
      <div class="ccm-flv-player" id="flv_player_<?php echo $bID?>">
      <?php echo t("Loading Video... If you're seeing this message you may not have Flash installed.")?>
      </div>


On a new line after previous code add the following:

// JWPlayer solution
   <?php  }elseif(  strstr(strtolower($file->getFilename()),".f4v") ){   ?>
       <div class="ccm-flv-player" id="flv_player_<?php echo $bID?>">Loading Video... If you're seeing this message you may not have Flash installed.</div>
       <script type="text/javascript">
           var so = new SWFObject("<?php echo $this->getBlockURL()?>/player/player.swf","mpl","<?php echo $controller->width?>","<?php echo $controller->height?>","10");
           so.addParam("allowfullscreen","true");
           so.addParam("allowscriptaccess","always");
           so.addParam("wmode","transparent");
           so.addVariable("file","<?php echo $rel_file_path?>");
           so.addVariable("backcolor","000000");
           so.addVariable("frontcolor","712727");
           so.addVariable("lightcolor","ff0000");
           so.addVariable("screencolor","000000");
           so.write("flv_player_<?php echo $bID?>");
       </script>


Save file

9)Go to your concrete5 site, and then navigate to:
Dashboard -> File Manager -> Access

10) in " Allowed File Types " add:

, f4v


at the very end so you will end up with:
kml, xml, f4v


or something similar...

There you have it, in 10 easy steps you've added a new type of file that can be uploaded to your website, and you've also installed the jwplayer from longail so you can stream the new file-type.

I hope you found this informative, and i hope you have fun adding more content to your site..

On a side note:

If you wish to change the " colors " of the player to match your site better, edit the following color-codes:

// The player's background color
so.addVariable("backcolor","000000");
// The player's font color
so.addVariable("frontcolor","712727");
// The player's " highlight " color
so.addVariable("lightcolor","ff0000");
// The player's screen color
so.addVariable("screencolor","000000");


Another Side note: This can be expanded upon to add support for multiple filetypes, and if one so wishes, completely replace the default player with the longtail player.