Achieving HD Quality Playback on a computer and still playback on a mobile device in one video

This article describes how to manipulate your video so that you are able to have it playback in Original or HD quality in a standard browser and still have your video playable on a mobile device.

Limitations in the size of the video that mobile devices support, you will find that video larger than 640 x 480 pixels or faster than 30 frames per second will not playback on your mobile device (http://www.apple.com/iphone/specs.html).

An easy solution to this problem would be to encode your video to size large or smaller with our encoding service and this will guarantee playback on all platforms. But what if you really want Large+ playback on a normal web browser?

The answer is you need to have two copies of your video hosted with us, One Large+ and the other 640x480 or less.
Once you have done this, I describe below how to modify our code to auto-sense which video to play back.

Step 1: Upload and encode (or Do Not Encode) the video, sizing it in accordance with the Large+ playback you wish to have on a standard browser
Step 2: Upload and encode (or Do Not Encode) the video, sizing it to be smaller than 640x480 and 30 fps or less.
Step 3: Go to 'My Videos' and select 'manage' on the Large+ video and copy the embed code into the web page you are designing:

<!-- VZAAR START -->
 <div class="vzaar_media_player">
  <object id="video" width="782" height="446" type="application/x-shockwave-flash"     data="http://view.vzaar.com/128506.flashplayer">
    <param name="movie" value="http://view.vzaar.com/128506.flashplayer">   
    <param name="allowScriptAccess" value="always">
    <param name="allowFullScreen" value="true">
     <param name="wmode" value="transparent">
     <param name="flashvars" value="endText=We+hope+you+enjoyed+this+vzaar+video+demo.+%0A%0ATo+add+video+to+your+website+today+click+here.&endLink=vzaar.com%2Fpricing">
     <embed src="http://view.vzaar.com/128506.flashplayer" type="application/x-shockwave-flash" wmode="transparent" width="782" height="446" allowScriptAccess="always" allowFullScreen="true" flashvars="endText=We+hope+you+enjoyed+this+vzaar+video+demo.+%0A%0ATo+add+video+to+your+website+today+click+here.&endLink=vzaar.com%2Fpricing"></embed>
     <video width="1280" height="720" src="http://view.vzaar.com/128506.mobile" poster="http://view.vzaar.com/128506.image" controls></video>
  </object>
</div>
 <!-- VZAAR END -->

Step 4: Go to 'My Videos' and select 'manage' on the smaller video.
Now take a look at your embed code and copy the line (located towards the end of the embed code):

 <video width="576" height="324" src="http://view.vzaar.com/328684.mobile" poster="http://view.vzaar.com/328684.image" controls></video>

Now paste it over this line of code (overwriting it) that you have already pasted into your site in step 3.

 <video width="1280" height="720" src="http://view.vzaar.com/128506.mobile" poster="http://view.vzaar.com/128506.image" controls></video>

Notice that this changes the video number that our code uses to reference mobile playback. It will also set new dimensions for this playback according to the encode size you choose in step 2.

Below is an example where I have done as described above. This should play Large+ on a computer and also within a mobile device.