How to add new field to database activity - Part 2

Okay, now that we have our new field created and working within the database activity, we need to add the functionality so that any file you upload will be automatically embedded.
NOTE:  Right now I only added video support, since there is already an image field. Perhaps I will add audio support later, but it's not pertinent to my needs right now.


1) Go to:    /mod/data/field/media/field.class.php   (<-- replace the word "media" with your custom field name)
2) Around line 125, you'll find a function called:  

function display_browse_field($recordid, $template)

Now we are going to add some code to this function which will recognize the incoming file extension and create a video player based on the extension.

3) Around line 145, you'll see this code:

$str = '<img src="'.$OUTPUT->pix_url(file_mimetype_icon...

This is actually displaying a link to download the file, instead of embedding it. Therefore, you can comment this out for now.

4) On a new line, around line 146 or so, let's add our first new code:

$path_info = pathinfo($name);

$myexten = $path_info['extension'];

This is taking the actual, submitted filename and checking the extension type.

5) Now all we have to do is take the file extension and load a different video player for each special case. You can do this by creating a 'switch' or 'if / else' statement. I prefer the latter - so here is an example for one video type:

        // *       
      // Load the html5 player - for mp4 videos
      // *
      if($myexten === 'mp4' || $myexten === 'm4v')
      {
      $width = 600;
$height = 300;

      $str = '<p><span class="mediaplugin mediaplugin_html5video">
<video controls="true" width="700" preload="metadata" title="'.$name.'">
<source src="'.$src.'" type="video/mp4"></source>
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="'.$width.'" height="'.$height.'">
<param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
<param name="src" value="'.$src.'" />
<param name="controller" value="true" />
<param name="loop" value="false" />
<param name="autoplay" value="false" />
<param name="autostart" value="false" />
<param name="scale" value="aspect" />
<!--[if !IE]>-->
 <object data="'.$src.'" type="video/mp4" width="'.$width.'" height="'.$height.'">
  <param name="src" value='.$src.' />
  <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
  <param name="controller" value="true" />
  <param name="loop" value="false" />
  <param name="autoplay" value="false" />
  <param name="autostart" value="false" />
  <param name="scale" value="aspect" />
 </object>
<!--<![endif]-->
</object>
</video>
</span></p>';

return $str;
      }


The $name and $src variables are already existing in code, and you can see that I declare my own $width and $height variables. Also notice this param inside the player:

<param name="scale" value="aspect" />

Even though I set my own width and height, the "aspect" value will clamp the video to it's original aspect ratio. Meaning:  the video will NOT stretch to fit. 

If you want the video to stretch to your own custom dimensions, replace:

<param name="scale" value="aspect" />

with

<param name="scale" value="tofit" />

Lastly, please notice the variable that we are returning --> $str.

We are creating a string that contains the video player and we are returning that string as actual html code. This allows the player to be directly embedded inside the page.

6) Now notice we only checked for 2 video types, and only loaded an html5 video player. To continue this script, you also need to check for the remaining video types: 

webm, ogv, flv, f4v, mov, m4a, mpg, wma, avi

NOTE: wma and avi files will only play with embedded Windows Media Player ON Internet Explorer only.
_______________________________________________________________________________

EDIT:  I also want to point out that the quicktime player can handle most video files, including .mp4. This might be the best solution to using an html5 video player.

----------------------------------------------------------------------------------------------------------

It's a wise choice to use .mp4 as your video standard.

Here is a screenshot of the code at work: