Publishing & Players

From ThirdPresence Wiki

Contents


Once you have uploaded the video content to ThirdPresence and ThirdPresence has transcoded and added the content to its management system, it is time to publish the videos. There are a number of destinations where the videos can be published:

  • On your own mobile web site
  • On a site managed by a third party content management system
  • On the simple white-label website that is part of all ThirdPresence accounts
  • In a smartphone application

Publishing your video content on mobile web sites is a straightforward process. If you don't have a mobile web site yet and want to use the white-label hosted site provided by ThirdPresence, read the instructions here.

If you already have a mobile web site and want to integrate the videos to it, see the chapter here. We have created specific feeds for a few popular mobile content management systems that support self publishing. To see the list of systems, refer to chapter here.

Applications written to popular smartphone platforms such as iPhone/iOS, Android or Symbian can easily use ThirdPresence to display videos. The instructions for gettin access to videos inside an application are here.

Publishing video on your own mobile site

After uploading a video file to ThirdPresence, the platform creates a unique URL for that file. See Uploading Content section for information on how to make video files available to ThirdPresence.

Retrieving URLs to mobile video files

To retrieve all the URLs created by ThirdPresence for the video files that you have uploaded, there are two feeds:

Media RSS feed is a richer format in sense of the flexibility and we recommend that you use that.

Media RSS

You can access the Media RSS feed at 

  http://[yoursite].thirdpresence.com/dls/t/mrss.jsp?cat=-1

As an example, here is a partial output from the HTTP request: 

  <item>
       <title>Big Buck Bunny</title>
       <link>http://show.thirdpresence.com/dls/t/item.jsp?iid=19069</link>
       <pubDate>10.08.2009 07:49</pubDate>
       <category></category>
       <thirdpresence:expiredate>10.08.2010 07:49</thirdpresence:expiredate>
      <thirdpresence:releasedate>10.08.2009 07:49</thirdpresence:releasedate>
       <thirdpresence:duration>9:56</thirdpresence:duration>
       <media:group>
               <media:thumbnail url="http://vod.cloud.thirdpresence.com/http/Show_BigBuckBunny_640x360.avi.jpg" width="240" height="135" />
               <media:description type="plain">Big Buck Bunny | (c) copyright Blender Foundation | www.bigbuckbunny.org</media:description>
               <media:content url="http://show.thirdpresence.com/dls/t/watch.jsp?iid=19069" expression="full"  duration="596" isDefault="true"/>
               <media:content url="http://show.thirdpresence.com/dls/t/watch.jsp?nid=Big Buck Bunny" expression="full"  duration="596"/>
               <media:content url="http://show.thirdpresence.com/dls/t/watch.jsp?rid=xxj220j33" expression="full"  duration="596"/>
               <media:content url="http://show.thirdpresence.com/dls/t/xsmall.jsp?iid=19069" duration="596" expression="full"/>
               <media:content url="http://show.thirdpresence.com/dls/t/download.jsp?iid=19069" duration="596" expression="full"/>
       </media:group>
       <media:embed url="http://dir.thirdpresence.com/player.swf" width="230" height="195" >
               <media:param name="type">application/x-shockwave-flash</media:param>
               <media:param name="width">230</media:param>
               <media:param name="height">195</media:param>
               <media:param name="allowFullScreen">true</media:param>
               <media:param name="quality">high</media:param>
               <media:param name="flashVars">file=http://show.thirdpresence.com/dls/t/watch.jsp?iid=19069&f=fl&amp;image=http://vod.cloud.thirdpresence.com/http/Show_BigBuckBunny_640x360.avi.jpg&amp;autoplay=false</media:param>
       </media:embed>
       <media:status state="ACTIVE"/>
   </item>


You can find the description of the feed elements here.

The complete Media RSS specification is available on Yahoo's web site [1].

Atom feed

To get an atom feed, use: 

  http://[yoursite].thirdpresence.com/dls/t/directatom.jsp?cat=-1

For example, the atom feed for show.thirdpresence.com is published here: 

  http://show.thirdpresence.com/dls/t/directatom.jsp?cat=-1

Here is a partial output from the HTTP request: 

  <feed>
     <entry>
        <link rel="alternate" href="http://show.thirdpresence.com/dls/t/watch.jsp?iid=7116"/>
        <title>Big Buck Bunny</title>
        <description>Big Buck Bunny</description>
        <pubDate>10.08 07:49</pubDate>
        <date>10.08 07:49</date>
     </entry>
   </feed>

Publishing mobile video files on your site

HTML + Javascript

To publish the video file on your mobile web site, you need to embed some html code and a javascript-tag into your page. You can find the embed code for each video file in the ThirdPresence Console on the video details page. Here is an example: 

   <!-- start movie -->
   <div id="movie">
      <!-- this part is shown if javascript is not supported or there is no requirement to change video player embed -->
      <div id="tpmovie">
         <a href="http://show.thirdpresence.com/dls/t/watch.jsp?iid=184735" border="0"><img style="border: 0 none;width:400px;margin:0;padding:0;line-height:0px;" id="tpposter" border\
="0" src="http://cdn.blendernation.com/wp-content/uploads/2008/10/elephants-dream-orangeblenderorg-cc-by-25.jpg" width="400px"/></a>
        <a id="playtext" href="http://show.thirdpresence.com/dls/t/watch.jsp?iid=184735" border="0">Play</a>
      </div>
      <script src="http://show.thirdpresence.com/dls/t/thirdpresence.js?iid=184735" type="text/javascript"></script>
    </div>
    <!-- end movie -->


Following elements are mandatory for embed to work. Division (<div>) which contains player with id tpmovie (except when you have multiple players on one page) 

<div id="tpmovie">

Thumbnail image with width-parameter and id tpposter 

<img id="tpposter" src="http://somehost/poster.jpg" width="400px"/>

This width-parameter defines the size of the player.

Script tag to thirdpresence.js with iid query parameter that defines video id. 

<script src="http://show.thirdpresence.com/dls/t/thirdpresence.js?iid=184735" type="text/javascript"></script>

You can modify the look-and-feel of the html as you like as long as you keep those elements there.


Multiple videos on one page

To add multiple videos (players) on one page you have to set two elements.

Each division (<div>) which contains a player has to have a unique id e.g. tpmovie1 

<div id="tpmovie1">

The script tag to thirdpresence.js has to have an additional tagid query parameter which matches div tag id. 

<script src="http://show.thirdpresence.com/dls/t/thirdpresence.js?iid=184735&tagid=tpmovie1" type="text/javascript"></script>


Here is an example: 

    <!-- start movie -->
    <div id="movie">
      <div id="tpmovie1">
        <a href="http://show.thirdpresence.com/dls/t/watch.jsp?iid=184735" border="0"><img style="border: 0 none;width:400px;margin:0;padding:0;line-height:0px;" id="tpposter" border\
="0" src="http://cdn.blendernation.com/wp-content/uploads/2008/10/elephants-dream-orangeblenderorg-cc-by-25.jpg" width="400px"/></a><br/>
        <a id="playtext" href="http://show.thirdpresence.com/dls/t/watch.jsp?iid=184735" border="0">Play</a>
      </div>
      <script src="http://show.thirdpresence.com/dls/t/thirdpresence.js?iid=184735&tagid=tpmovie1" type="text/javascript"></script>

      <div id="tpmovie2">
        <a href="http://show.thirdpresence.com/dls/t/watch.jsp?iid=184741" border="0"><img style="border: 0 none;width:400px;margin:0;padding:0;line-height:0px;" id="tpposter" border\
="0" src="http://www.seppo.net/piirrokset/albums/piirrokset/vapaalla/lapset/jaaveistos_isa_fi.jpg" width="400px"/></a><br/>
        <a id="playtext" href="http://show.thirdpresence.com/dls/t/watch.jsp?iid=184741" border="0">Play this</a>
      </div>
      <script src="http://show.thirdpresence.com/dls/t/thirdpresence.js?iid=184741&tagid=tpmovie2" type="text/javascript"></script>
    </div>
    <!-- end movie -->
PHP

To publish your video file on your php powered mobile web site, you need to embed the php code below in your mobile site's HTML code.

Example using the default width, default thumbnail image and no playtext: 

<?php
include_once('http://files.thirdpresence.com/tp-php-include.inc');
thirdpresence("show","179976");
?>

Example using width=350, a specific thumbnail image and playtext "Watch trailer": 

<?php
include_once('http://files.thirdpresence.com/tp-php-include.inc');
thirdpresence("show","179976","350","http://peach.blender.org/wp-content/uploads/09_09_05.jpg","Watch trailer","0");
?>

Optional parameters 

thirdpresence("[your account]","[videoid]","[width]","[posterimageurl]","[playtext]","[controlbar]");


Parameter Value Description
width pixels Width of the thumbnail image and player
posterimageurl URL of poster image If set to empty (""), the default thirdpresence generated image will be used.
playtext Any text If control bar is set to non-visible then this text will we shown below the thumbnail image. For HTML5 players this is ignored.
controlbar 0 = hide, 1 = visible displays controls in the player. For HTML5 players this is ignored.


Multiple videos on the same page

You can add 

include_once('http://files.thirdpresence.com/tp-php-include.inc');

in the page header and then just add 

<?php thirdpresence("show","179976"); ?>

in the location where you want to place video.

Publishing mobile video using popular CMS platforms

WordPress

ThirdPresence provides a free plugin for WordPress, which makes it even easier to publish mobile video within your WordPress site.

You can download plugin from WordPress Plugin Directory.

For detailed instructions go here.

After installing the plugin, just use this syntax to embed a video into your WordPress post: 

    [thirdpresence video="videoid" /]

The parameter "videoid" is the id number of the video that you want.

When the post is accessed, a thumbnail image of the video will be displayed inline with the rest of the article.

By clicking on the thumbnail, the video will play on the mobile device.

If you are wondering how to publish your web site to mobile devices using WordPress, here is one alternative http://wordpress.org/extend/plugins/wptouch/

Drupal

Under construction.

Publishing video using popular web site mobilizers

If you use one of the well-known mobile site publishing tools such as MoFuse, Mvate or Zinadoo, here are some instructions that will help you to integrate your video content hosted on ThirdPresence:

Publishing video on ThirdPresence's white-label mobile site

As part of your mobile video service, ThirdPresence automatically creates and hosts a white-label mobile web site for your content.

The URL of your white-label mobile site is [yoursite].thirdpresence.com and the email you received containing the sign-up details includes the information about the destination URL.

When you upload new content to ThirdPresence, the content is automatically added to the white-label mobile site.

Using the white-label site as your destination site

If you wish to use the white-label mobile site as your mobile destination site, it should be customized to meet your needs.

Customizing the look & feel

The look & feel can be customized using pre-defined graphics templates. The templates can be edited using standard graphics software, such as Photoshop.

Here is Quick guide for editing contest of the pilotpackage.zip

You can download the graphics templates from http://files.thirdpresence.com/pilotpackage.zip

Once you have finished the designs, please send them to support@thirdpresence.com.

Customizing the site structure

The site is organized into categories. There can be up to six different categories, each containing up to ten content items.

As an example, here is a screenshot of the ThirdPresence demo mobile web site.


The title of the page is "Show".

There are four different categories of content. The active (visible) category is highlighted with red.

The first content item in the active category is a video file called "Big Buck Bunny".

Directing traffic to the site

The most effective way to direct traffic to your mobile site is to detect when mobile phone browsers visit your desktop site and redirect them to the mobile site. This can be done very easily using e.g. simple javascript or php code.

DNS Masking

If you want to hide the content serving location ([yoursite].thirdpresence.com) and instead use your own URL (say, m.[yoursite].com), you can use DNS masking. Check this for more information of how to take DNS Masking into use.

Publishing video in mobile applications

You can easily use ThirdPresence to deliver video that plays inside a mobile application. It doesn't matter if you are developing for Apple iOS, Android, BlackBerry, Windows Mobile or any other platform. ThirdPresence can deliver your video to any device and any operating system.

After uploading a video file to ThirdPresence, the platform creates a unique URL for that file. See Uploading Content section for information on how to make video files available to ThirdPresence.

To play the video in your app, you must first retrieve the correct video URL for the device that you are using. Use standard HTTP GET request from the application and ensure that the user agent on the request matches to the device's user agent. For fetching the URL, use app.jsp instead of watch.jsp to receive a direct link to video: 

   http://[yoursite].thirdpresence.com/dls/t/app.jsp?iid=7116

ThirdPresence will respond with: 

  <url>[full URL to video]</url>

This is the video URL that you need to pass to the video player of the device.

Please note that you should not in any case cache the direct URLs to videos. ThirdPresence serves content from a number of different content locations depending on the content quality, user's device type, used network operator, geographical location and a number of other factors. In order to provide the optimal viewing quality to end users, you should always send the HTTP GET query and then parse the received link before launching the video player. This will also ensure that your video launch statistics will be displayed correctly.

Delivering high-quality video to WLAN users

If you are able to detect in your application that the user is on a WLAN network, you can ask ThirdPresence to deliver a high-quality version of the video (knowing that there is more bandwidth available).

For example on Android, to find out what network the user is on: 

   android.net.NetworkInfo.getTypeName()

If the method returns WIFI, you can add "&bearer=wlan" to the URL that you use to retrieve the video link. 

   http://[yoursite].thirdpresence.com/dls/t/app.jsp?iid=[video id]&bearer=wlan

ThirdPresence will respond with: 

   <url>[full URL to video]</url>
Retrieved from "http://wiki.thirdpresence.com/index.php/Publishing_And_Players_Main"
This page was last modified on 30 May 2011, at 13:25.