PHEREO PLAYER DOCUMENTATION


Content preparation guide

Please read this manual carefully. This guide will help you to prepare video content, from turning your original file into 3D video to viewing 3D video on your website.

A. Supported Video Formats

Your original video must be in Anaglyphic format, Side-by-Side (Parallel or Crossed) or Squeezed Side-by-Side (Parallel or Crossed). Below you can find examples of videos in Side-by-Side and Squeezed Side-by-Side formats:

Side-by-side mode Squeezed Side-by-Side mode
Side-by-Side mode Squeezed Side-by-Side mode

If you have no videos in Anaglyphic format, proceed to step B (Create Anaglyph Video from a Side-by-Side Source), otherwise proceed to Step C (Converting Your Video to Supported Phereo Player Formats).

Note: The process of converting Squeezed Side-by-Side video to Anaglyph video is similar to that of converting Side-by-Side video to Anaglyph video, outlined in the manual.

B. Create Anaglyph Video from a Side-by-Side Source

If you only have video in Side-by-Side format, you can create Anaglyph video from Side-by-Side video. Simply use the 2 free applications outlined below.

Step 1. Download and install VirtualDub and Avisynth.

Note: Presently Avisynth doesn’t support the 64-bit OS. Though you can find custom builds of this application, these builds may sometimes be unstable when paired with VirtualDub. Therefore, we recommend using the 32-bit OS.

Step 2. Create a file named "scriptanaglyph.avs" and edit it in any text editor (e.g. Notepad). The file will look as follows:

video2d = DirectshowSource("/path_to_your_content/your_sbs_video.extension")
video2d = ConvertToRGB32(video2d)

videoW = width(video2d)
videoH = height(video2d)

halfW = videoW / 2

f2 = Crop(video2d, 0, 0, halfW, videoH)
f1 = Crop(video2d, halfW, 0, halfW, videoH)

MergeRGB(f2.ShowRed, f1.ShowGreen, f1.ShowBlue)

Note: Your Side-by-Side video can be in different codec formats (AVI, MP4, WMV etc.).

For the Crossed type (right eye first) of Side-by-Side video string, f2 and f1 must be edited as follows:

f1 = Crop(video2d, 0, 0, halfW, videoH)
f2 = Crop(video2d, halfW, 0, halfW, videoH)

If you want to change the resolution of the video, add the following text before the MergeRGB string (for example, to change the resolution to 1920x1080):

f1 = Lanczos4Resize(f1, 1920, 1080)
f2 = Lanczos4Resize(f2, 1920, 1080)

As a result, the script should look like this:

video2d = DirectshowSource("/path_to_your_content/your_sbs_video.extension
video2d = ConvertToRGB32(video2d) videoW = width(video2d) videoH = height(video2d) halfW = videoW / 2 f1 = Crop(video2d, 0, 0, halfW, videoH) f2 = Crop(video2d, halfW, 0, halfW, videoH) f1 = Lanczos4Resize(f1, 1920, 1080) f2 = Lanczos4Resize(f2, 1920, 1080) MergeRGB(f2.ShowRed, f1.ShowGreen, f1.ShowBlue)

Save the scriptanaglyph.avs file.

Step 3. Now open VirtualDub. Select from the navigation menu File -> Open Video File… or use the shortcut Ctrl+O. In the dialog box select scriptanaglyph.avs. If VirtualDub and Avisynth were installed correctly, you will see two windows. In these windows your original video will be displayed in Anaglyph format.

To avoid additional loss of quality we recommend saving an audio and video mode without compression. Select from the navigation menu item Video -> Direct Stream Copy, and then Audio -> Direct Stream Copy.

Attention! You will get a very large video file (approx. several gigabytes). You can find the description of the video compression process in section C.

To start conversion of original video to Anaglyph video, select from the navigation menu File -> Save as AVI… or use the shortkey F7.

When conversion is complete, your video will be displayed in Anaglyph format:

C. Converting Your Video to Supported Phereo 3D Player Formats

To create the required file structure, including video formats and sizes, supported by Phereo 3D Video Player, you can use our application. Below you can find the description of this application.

Step 1. Download Batch Converter.

Step 2. Run the application (BatchConverter.exe). After launching the application, you will see the following window:

Source Side-by-Side – if you have a Side-by-Side video, click Browse… and select the video.

Check if Squeezed – check this box if you have a Squeezed Side-by-Side video.

Source Anaglyph – if you have an Anaglyph video, click Browse… and select the video.

Destination folder – the folder where the converted video files will be saved.

FFmpeg location – the folder where FFmpeg codec files are located. If you have no such codec on your PC, download it from the official website.

Attention! To avoid problems when using FFmpeg we recommend using the 32-bit version.

Output File Prefix – the prefix that will be added to the beginning of the video file name (“out” by default).

Bitrate – the video stream bitrate (10000 by default)

Step 3. Click Go to start the video conversion process. During conversion, a new window will be shown, displaying the conversion process.

Attention! The video conversion process can take a long time. The length of this process depends directly on the performance of your PC.

When the conversion is complete, a folder will be created in the directory set in the Destination Folder field. Subject to original video format (Anaglyph, Side-by-Side, or both), this folder will contain the following files:

For Anaglyph video:

  • your_prefix.anaglyph.360.mp4
  • your_prefix.anaglyph.360.webm
  • your_prefix.anaglyph.480.mp4
  • your_prefix.anaglyph.480.webm
  • your_prefix.anaglyph.720.mp4
  • your_prefix.anaglyph.720. webm
  • your_prefix.anaglyph.1080.mp4
  • your_prefix.anaglyph.1080.webm

For Side-by-Side video:

  • your_prefix.sidebyside.360.mp4
  • your_prefix.sidebyside.360.webm
  • your_prefix.sidebyside.480.mp
  • your_prefix.sidebyside.480.webm
  • your_prefix.sidebyside.720.mp4
  • your_prefix.sidebyside.720. web
  • your_prefix.sidebyside.1080.mp4
  • your_prefix.sidebyside.1080.webm

You can delete the gen.bat file.

As you can see from the example, each file has the following name:

prefix.mode.size.extension

prefix – the file name specified in the Output File Prefix field.

mode – video file playback mode (Anaglyph or Side-by-Side).

size – video resolution (360, 480, 720 or 1080).

extension – extension video type (mp4 or webm).

Your video file must be in either MP4 or WebM format to use 3D Video Player. However, because some browsers only support either MP4 or WebM, we recommend using both formats. This way you can be sure that your video will be played correctly by most browsers.

When you’re done, your folder should contain the following files:

Congratulations! Now that you’ve prepared video content, you can start using 3D Video Player.

D. Copying your Video to Server

Prepared video content should be uploaded to the server where your website is hosted. To upload files to the server you must have access granted by your host. For *nix and Windows servers you can transfer files via FTP/SFTP or SSH protocols (you can use the free application WinSCP).

Step 1. Create a designated folder for video files on the server. For example:

/content/video_folder/

Step 2. Upload your folder with the converted files to the video_folder directory:

/content/video_folder/video1/

Your folder on the server should look as follows:

Congratulations! Your video content has been uploaded to the server. See the Detailed Installation Instructions section for installing Phereo 3D Photo Player and viewing your 3D photos.

Note: If you want your Phereo 3D Video Player to play 2D videos, place the original 2D video in the folder and name it "your_prefix.2d.%size%.%extension%", where:

%size% – video resolution (360, 480, 720 or 1080)
%extension% – video extension (MP4 or WebM)

To convert your original video to a supported video format, see Converting Your Video to Supported Phereo Player Formats.

Detailed installation instructions

Follow these three simple steps to put 3D videos on your website:

  1. Place your prepared video files on the server (see Copying Your Videos to Server)
  2. Place the Phereo 3D Video Player distribution files on the server
  3. Include Phereo 3D Video Player in your webpages

A. Phereo 3D Photo Player Distribution

Download the latest version of Phereo 3D Video Player and extract the archive. You will use the following files:

  1. Phereo player JavaScript library (javascripts/phereoplayer.js)
  2. jQuery library (javascripts/jquery.js)
  3. Slider plugin for jQuery (javascripts/jquery.ui.slider.js)
  4. Phereo player style sheet (stylesheets/phereoplayer.css)
  5. Phereo player style images (images/)

Upload this file catalogue structure to the server’s root directory. You can also create a personal directory and place the distribution files there.

That is all! Phereo 3D Video Player has been installed on your web server.

Site Installation

Step 1. Upload distribution to the server (see Phereo 3D Photo Player Distribution).

Step 2. Prepare your content using the content preparation instructions and upload it to your website. Don’t forget your naming PATTERN — you will need it to link the content with the Player.

Step 3. Insert Phereo 3D Video Player into your page with the following code:

3.1. To include JS and style files in the webpage, paste the following tag in the HEAD section:

<link rel="stylesheet" href="/stylesheets/phereoplayer.css" type="text/css" />
<script src="/javascripts/jquery.js" type="text/javascript"></script>
<script src="/javascripts/jquery.ui.slider.js" type="text/javascript"></script>
<script src="/javascripts/phereoplayer.js" type="text/javascript"></script>            

If the distribution files were put in a directory other than home, match the file path to your specified location.

3.2. The simplest way to paste the link to your video file on the webpage is to use the following tag. The video will automatically play there:

<div id="video" style="width:900px;height:500px"></div>
<script type="text/javascript">
    $(document).ready(function() {
            var fv = $("#video").phereoVideo({
                movie : '/path_to_your_content/your_video.%mode%.%size%',
                defaultMode: "anaglyph",
                defaultSize: 480,
                poster: '/path_to_your_content/poster.png',
                autobuffer: true
            });
            pv.onended(function(){
        });
    });
</script>            

Change the following parameters to adjust the player to your needs:

style="width:900px;height:500px" – change the embedded player’s width and height by changing 900px and 500px respectively (900 by 500 pixels by default).

movie: '/path_to_your_content/your_video.%mode%.%size%', – enter the path to your content and the pattern of filenames used when preparing your content. The player will automatically replace %mode% with viewing mode constant (Anaglyph or Side-by-Side) and %size% with a quality level constant.

defaultMode: "anaglyph", – change Anaglyph to "sidebyside" if you want to use Side-by-Side mode as the default 3D mode.

defaultSize: 480 – set one of the following quality level constants: 360, 480, 720, 1080.

poster: '/path_to_your_content/poster_name.extension', (optional parameter) – the path to the video file poster, which will be displayed before you press Play. Supported formats of the video file poster: GIF, PNG, JPEG.

Note: Using this feature with iOS 3 devices may cause certain issues.

autobuffer: true (optional parameter) – automatic buffering video stream. If value is “true”, the video will be downloaded automatically. If value is “false”, the video will be downloaded only after the user presses Play.

Pay attention to the following token:

/path_to_content/your_prefix.%mode%.%size%

This is a file storage template, which contains 2 mandatory meta tags:

  1. %size%
  2. %mode%

Therefore, if you’ve named your files like in the first example:

your_prefix.anaglyph.360.webm

The token will come out as follows:

your_prefix.%mode%.%size%

If you want to place several video players on your webpage, you must paste the player code once again with a new id. You will get the following player code:

<div id="video" style="width:900px;height:500px"></div>
<script type="text/javascript">
    $(document).ready(function() {
        var fv = $("#video").phereoVideo({
                movie: '/path_to_your_content/your_video.%mode%.%size%',
                defaultMode: "anaglyph",
                defaultSize: 480,
                poster: '/path_to_your_content/poster.png',
                autobuffer: true
            });
            pv.onended(function(){
        });
    });
</script>
<div id="video2" style="width:900px;height:500px"></div>            

This way you can place an unlimited quantity of players on your webpage.

Attention! When several players are present one webpage, using a player in full screen mode may result in incorrect rendering.

How to use Phereo 3D Video Player

If you followed the instructions correctly, you should see the video player after loading the page.

If you are using Internet Explorer you may see the following warning message: "Internet Explorer restricted this web page from running scripts or ActiveX controls.” In this case, the user must manually allow Phereo 3D Video Player script execution by clicking “Allow blocked content".

As Internet Explorer 9 doesn’t support WebM videos by default, you must download and install WebMMF components from the official website.

Below you will find the description of the player’s features:

  1. Volume control
  2. Full screen / window mode
  3. Format: 2D, Side-by-Side or Anaglyph (works only for specially prepared video content)
  4. Size of video: 360, 480, 720 or 1080 (works only for specially prepared video content)
  5. Play/Pause button
  6. Timer – counts time from the start of video playback.
  7. Timer – counts time till the end of video playback.
  8. Time line
  9. Indicator – indicates current position on the time line

In 3D TV mode, image navigation is controlled by the Left and Right keyboard arrows.

Click the corresponding icon or double-click on the player to enter full screen mode.

To start/pause playback, click the corresponding icon or on the player.

If the user has NVIDIA 3DVision technology support, selecting Side-by-Side format will automatically display video in 3DVision mode.

If Phereo 3D Video Player cannot open the video file (in case of a corrupted file or a wrong file name), a corresponding message will pop up in the upper part of the player.

You can place an image (poster) on the title frame of the video. To do so, simply set the path to the image in the 'poster' parameter.

The player can always execute JavaScript. For example, you can set the player to play the next video or open any webpage after the first video finishes playing.

See Also

Phereshop

View 3D photos in different stereo modes, including NVIDIA 3D VISION

3D Photo

View thousands stereo photos on your Android device

Photo Player

Add 3D photos on your site
If you have already an account on Phereo 3D Photo website you can use these credentials for authorization on this website.
Enter your username or email