Using mp4 Videos

From TMM Wiki
Jump to navigationJump to search
CARMA
Video Content Admin
The Video Content Admin
Adding Content
Video Clips
Out of Order Video Thumbnails
Content Set Locations
Content Set Categories
Video Format
Flash Player
Generate Flash Videos
Using mp4 Videos
Video Content Names
Extras
The Support Admin
Admin Areas
CARMA Home
Pseudo Streaming
Flash Player
Using mp4 Videos
Zipping Content
Third Party Content
X-Sendfile
Xmoov-php
TMMid

CARMA contains a feature that supports playback and pseudo streaming of videos in .mp4 format. This allows members and surfers to seek or skip ahead while streaming video content from your site(s).

For more information on how to begin setting up pseudo streaming, please see our Pseudo Streaming wiki article.

Flash Player

Before you can enable pseudo streaming for your members, you must first install a Flash Player that supports both pseudo streaming and the playback of .mp4 videos. Although the default CARMA flash player does not support these features, CARMA contains support for various other flash players that will allow this.

Both Flowplayer and JW Player support .mp4 playback and pseudo streaming with the appropriate plug ins. For information on implementing these players in CARMA, please see our Pseudo Streaming wiki article.

Apache Module

Before you can begin streaming .mp4 videos with CARMA, you must first install an Apache module that enables .mp4/H264 playback for your flash player. This Apache module enables .mp4 streaming for both Flowplayer and JW Player. Please contact your server host to have them install this for you.

Note: In order to use this Apache plugin, you must purchase a commercial license through their website. This is required for using the plugin with a Content Management System like CARMA. However, we recommend that you first test the plugin to ensure that it works before purchasing a commercial license.

Editing Your Templates

Once you have installed the appropriate Flash Player, Apache module, and any necessary plugins, you will be able to display and stream .mp4 videos on your tour and member area pages.

To do so, go to the Templates Admin and edit the show_video template in your Members Area Templates and Tour Templates.

The following example provides code to allow pseudo streaming of .mp4 videos with Flowplayer on your show_video tour template. To implement pseudo streaming on your members area template, simply replace:

{assign var=type value=$smarty.get.type}

With

{assign var=type value='MP4'}

This will force Flowplayer to stream videos in .mp4 format, as opposed to .flv format.

Example Code

<div class="videofull" style="text-align:center">
<div style="width:768px;margin: 0 auto">
{assign var=type value=$smarty.get.type}
{assign var=extension value=$carma_video.extensions.$type[0]}
{assign var=filename value=$carma_video.files.$type[0]}
<script type="text/javascript" src="flowplayer-3.2.12.min.js"></script>
<div id="player" style="width:768px;height:432px;display:block"></div>

{literal}
<script type="text/javascript">
<!--
flowplayer("player", "flowplayer-3.2.16.swf", {
        // this will enable pseudostreaming support

        plugins: {
                streaming: {
              {/literal}
              url: 'flowplayer.pseudostreaming-3.2.12.swf'
              {if $extension!='mp4'}
              queryString: escape('?file={$carma_video.path}/{$filename}&start={literal}${start}{/literal}')
              {/if}
              {literal}
              },

        controls: {
                url: 'flowplayer.controls-3.2.15.swf',
                autoHide: false
            }
        },
playlist: [
        {
        url: "/view_image.php" + escape("?galid={/literal}{$carma_video.galid}{literal}&file=sample.jpg&width=768&height=432&crop=1&extension=.jpg"),
        autoPlay: true,
        autoBuffering: false,
        scaling: 'fit'
        },
        {
        {/literal}
        {if $extension=='mp4'}
        url: '/cms_data/{$carma_video.path}/{$filename}',
        {else}
        url: '/xmoov-php.php',
        {/if}
        {literal}
        provider: 'streaming',
        autoPlay: false,
        autoBuffering: false
        }
],

});
// -->
</script>


{/literal}
</div>
</div>