Basic Setup

Set your API key by adding the following JavaScript variable to your webpage:
<script>
  var VIDPREP_OPTIONS = {
    api_key: 'XXXXXXXXXXXXXXXX'
  }
</script>
Add VidPrep's JavaScript code to your webpage:
<script>
  (function() {
    var n = document.createElement('script'); n.type = 'text/javascript'; n.id = "vidprep_script";
    n.src = 'http://vidprep.com/assets/loader.js?v=' + Math.round(new Date().getTime()/3600000);
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(n, s.nextSibling);
  })();
</script>
Add the following HTML to show a list of video rooms and an upload button:
<!-- A button for uploading new videos will appear here -->
<div id="vidprep_uploader"></div>

<!-- A list of videos with thumbnails and management tabs will appear here -->
<div class="vidprep_videos_list" id="vidprep_videos"></div>

<!-- Optional: A link that takes users to a page where they can search -->
<!-- for videos and tags, and create playlists -->
<a id="vidprep_playlist_link">Create custom playlist</div>

<!-- Optional: show total video minutes used -->
<div id="vidprep_minutes_used"></div>

<!-- Optional: video minutes the user has left -->
<div id="vidprep_minutes_left"></div>

<!-- Optional: if user is out of minutes, show an upgrade button -->
<!-- You must set the id of the div in: VIDPREP_OPTIONS.upgrade_element_id -->
<div id="upgrade-div"></div>

(Optional) Control the look of the video page

By default, videos will appear in a page hosted at vidprep.com. However, you can use your own HTML page (separate from the videos list page) as a template for displaying the video.

Add the following HTML to control the placement of video elements:
<!-- The video will be placed here -->
<div class="vidprep_video"></div>

<!-- The video room name will be placed here -->
<div class="vidprep_video_room_name"></div>

<!-- Comments for the video will be placed here -->
<div class="vidprep_sidebar"></div>

<!-- Timelines for the video will be placed here -->
<div class="vidprep_timelines"></div>
Note: The JavaScript variable template_url in VIDPREP_OPTIONS must be set to the URL of this page for this to work properly.


(Optional) Additional VidPrep Options

  • allow_merging (boolean) - Allow multiple videos uploaded together to be automatically merged. (default: true)
  • editor_callback_url (string) - After the video is finished processing, VidPrep will POST the JSON data to this URL.
  • email_share_callback_url (string) - Vidprep will POST the share to this URL (so that an email confirmation can be sent, etc). Example POST:
    POST email_share_callback_url
         video_name="VIDEO NAME"
         from_user_id="5"
         to_email="SHARED_TO_EMAIL_ADDRESS"
         notes="I just shared this video with you"
  • group_admin (boolean) - If true, the user can upload and share videos, and control which users in the group can view the video room.
  • group_follower (boolean) - If true, the user won't be able to upload or share videos. Followers get separate comments, drawings and timelines from the rest of the group.
  • group_id (string) - The ID of the current user's group from your website.
  • group_name (string) - The name of the current user's group from your website, eg 'Team Alpha', 'Club Bravo'.
  • group_share_callback_url (string) - Vidprep will POST the share to this URL (so that an email confirmation can be sent, etc).
    Example POST:
    POST group_share_callback_url
         video_name="VIDEO NAME"
         from_user_id="5"
         to_group_id="33"
         notes="I just shared this video with you"
  • groups_for_sharing (JSON) - Default list of groups that videos can be shared with. Example JSON:
    [
      {
        "user_id":"USER_ID_FROM_YOUR_WEBSITE",
        "user_name":"USER_NAME_FROM_YOUR_WEBSITE",
        "email":"USER_EMAIL_ADDRESS_FROM_YOUR_WEBSITE",
        "group_id":"GROUP_ID_FROM_YOUR_WEBSITE",
        "group_name":"GROUP_NAME_FROM_YOUR_WEBSITE"
      }
    ]
  • hd (boolean) - Whether the video should be in HD quality (default: false).
  • max_video_minutes (integer) - The maximum number of uploaded video minutes allowed for the user. If video minutes exceed this, the user will not be allowed to upload more videos without upgrading. If this is blank, there is no limit to the amount of videos that can be uploaded.
  • search_url (string) - Allows searching your site for users/groups. Returned data must be in JSON format. The returned search results will be used to populate a list from which the user can share videos with. The query itself is 'q'. Send a 'group_id' to exclude results from the same group as the user who is submitting the query.

  • Example request:
    GET search_url
      q="smi"
      group_id="35" 
    Example response (in JSON format):
    [
      {
        "group_id":28,
        "full_name":"Joe Smith",
        "email":"smith@mail.com",
        "group_name":"Badgers",
        "user_id":28,
        "user_name":"Joe Smith"
      },
    ] 
  • template_url (string) - If set, VidPrep will use this URL as a template for showing videos.
  • upgrade_element_id (string) - HTML DIV ID for an account upgrade button. This is hidden unless the user has run out of available minutes.
  • upload_help_url (string) - Link to instructions for uploading videos.
  • user_id (string) - The ID of the signed in user (required if you want to enable video sharing).
  • user_name (string) - The name of the signed in user.
  • users_list (JSON) - For group_admins, this is a list of users that the admin can set permissions for access to the video room.
  • Example JSON:
    [
      {
        "name":"GROUP_MEMBER_NAME",
        "id":"GROUP_MEMBER_ID"
      }
    ]


Examples


A sample VIDPREP_OPTIONS object that uses api_key for authentication:
    var VIDPREP_OPTIONS = {
      api_key: 'XXXXXXXXXXXXXXXX',
      user_id: '243',
      user_name: 'Jim O\'brien',
      user_email: 'jobrien@email.com',
      user_image: 'http://mywebsite.com/userimages/jobrienimage.jpg',
      group_admin: true,
      group_follower: false,
      group_id: '4421',
      group_name: 'The Home Improvement Group',
      users_list: [ { "name":"GROUP_MEMBER_NAME", "id":"GROUP_MEMBER_ID" } ],
      group_share_callback_url: 'http://mywebsite.com/group_share_callback',
      email_share_callback_url: 'http://mywebsite.com/email_share_callback',
      upload_help_url: 'http://mywebsite.com/howtouploadvideo/doc',
      hd: true,
      search_url: 'http://mywebsite.com/user_search',
      template_url: 'http://mywebsite.com/my_video_page',
      editor_callback_url: 'http://mywebsite.com/editor_callback',
      allow_merging: true,
      max_video_minutes: 200000,
      upgrade_element_id: 'upgrade-div'
    };