CDN Upload and Video Embed Instructions

Here is the list of instructions for uploading files and embedding video to CDN resources. Follow the step-by-step instructions below to upload files or embed video to the required CDN resource type.

HTTP Push CDN Resource

To upload files to the HTTP Push CDN resource:

  1. Connect to the FTP origin using an FTP client. For example, a browser plug-in like FireFTP or FTP software like FileZilla.
  2. Please wait up to 10 minutes until the FTP server configures with the HTTP resource.
  3. Specify the following FTP details:
    • Hostname: 6789.origin.customercdn.com
    • Username: 6789
    • Password: The FTP password set at CDN resource creation.

       This is an instruction template. Replace “6789” with the resource id, and “customercdn.com” with the operator’s domain.

  4. Upload your files .


VOD Pull CDN Resource

To upload files to the HTTP Push CDN resource, enter the following script into your web page:

<html>
  <head>
    <script src="http://video.worldcdn-beta.net/player.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="my-video-player"/>
    <script type="text/javascript">
      CDNPlayer("my-video-player", 1234, "1234/mystream", {width:640, height:360} );
    </script>
  </body>
</html>

 

  • This is an instruction template. Replace “1234” with the resource id, “customercdn.com” with the operator’s domain, and “mystream.mp4” with the filename or stream name.
  • resource_id/ must prefix the path with <resource_id>, it is ONLY applicable to VOD PULL playback.
  • This example provides default values for width and height. You can change them to your own values.

Our easy video embed script automatically detects the browser type (Desktop or Mobile device) and loads the appropriate player. Currently, this is either Flow Player or the browser’s native HTML5 player. The streaming protocol is also set appropriately.

 


VOD Push CDN Resource

To upload files to the VOD Push CDN resource:

  1.  Connect to the FTP origin using an FTP client. For example, a browser plug-in like FireFTP, or FTP software like FileZilla.
  2. Please allow up to 10 minutes for the FTP server to be configured with the VOD resource. 
  3. Specify the FTP details:

    • Hostname: 6789.origin.customercdn.com
    • Username: 6789
    • Password: the password set at creation
         

       This is an instruction template. Replace “6789” with the resource id, and “customercdn.com” with the operator’s domain.


  4. Upload your files. 
  5. Enter the following script into your web page:


<html>
  <head>
    <script src="http://video.worldcdn-beta.net/player.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="my-video-player"/>
    <script type="text/javascript">
      CDNPlayer("my-video-player", 1234, "1234/mystream", {width:640, height:360} );
    </script>
  </body>
</html>

 

  • This is an instruction template. Replace “1234” with the resource id, “customercdn.com” with the operator’s domain, and “mystream.mp4” with the filename or stream name.
  • This example provides default values for width and height. You can change them to your own values.

Our easy video embed script automatically detects the browser type (Desktop or Mobile device) and loads the appropriate player. Currently, this is either Flow Player or the browser’s native HTML5 player. The streaming protocol is also set appropriately.


Live Streaming CDN Resource

  1. Before you start, make sure your publishing point settings meet the following requirements (to be able to retrieve with the Silverlight Player):
    • h.264 Baseline 3
    • AAC or MP3-stereo-44100Hz audio
    • 2 seconds key frame frequency
    • lower bitrate

      OnApp CDN does not autotranscode a stream into multiple bitrate or adaptive bitrate.
      It is recommended to publish multiple streams with a different bitrate from the publishing point and allow end users to choose the stream with the bitrate they need.

  2. Install and configure the Adobe Live media encoder:

    1. Install Adobe Live Encoder.
    2. Once the Adobe Live Encoder is installed, run the application and move on to the next step.
    3. Complete the form:
       
    4. Press Connect.
    5. In the password pop up window, enter “P1234” as the username and the resource secret key for the password.
    6. Press Start to start publishing the live stream.


     

     Enter the following script into your web page to embed video to the Live Streaming CDN resource:

    <html>
      <head>
        <script src="http://video.worldcdn-beta.net/player.js" type="text/javascript"></script>
      </head>
      <body>
        <div id="my-video-player"/>
        <script type="text/javascript">
          CDNPlayer("my-video-player", 1234, "mystream", {width:640, height:360} );
        </script>
      </body>
    </html>
    This example provides default values for width and height. You can change them to your own values.

     

    Our easy video embed script automatically detects the browser type (Desktop or Mobile device) and loads the appropriate player. Currently, this is either Flow Player or the browser’s native HTML5 player. The streaming protocol is also set appropriately.

    To stream a video using RTMP, enable secure Wowza and fill in the secure token after the creation of a live streaming resource.
    Example of the Flow Player embed code:

    <h1>FLOW SMIL</h1>
    <a
    href="http://video.onappcdn.net/12946278/livestream.smil"
    style="display:block;width:520px;height:330px"
    id="player">
    </a>
    <script type="text/javascript" src="flowplayer/flowplayer-3.2.10.min.js"></script>
    <script>
    flowplayer("player", "flowplayer/flowplayer-3.2.11.swf",
    
    {
    plugins: {
    smil: { url: "flowplayer/flowplayer.smil-3.2.8.swf" },
    rtmp: { url: "flowplayer/flowplayer.rtmp-3.2.10.swf" },
    secure: { url: "flowplayer/flowplayer.securestreaming-3.2.8.swf", token: escape('apppp&&')}
    },
    clip: {
    provider: 'rtmp',
    autoPlay: false,
    urlResolvers: ['smil'],
    connectionProvider: 'secure'
    }
    });
    </script>

    To publish a stream via FFmpeg, use the following commands:
    ffmpeg -re -i dummy.mp4 -f
    flv rtmp://username:password@fms_URL:80/P"CDN_Reference"/mystream

    Example:
    ffmpeg -re -i dummy.mp4 -f
    flv rtmp://P404130149:mtXsvYDwQQ@404130149.publishstream.worldcdn.net:80/P404130149/streamname

    If an external publishing point is used, the customer should have the RTMP URL as in the example below:
    rtmp//xxxxxx.xxxx.com/live/streamname1

    • URL must start with an rtmp, e.g., rtmp//xxxxxx.xxxx.com/live.
    • URL must include the name of a stream specified in the ffmpeg command, which is provided in the command line in the CentOS system, during the streaming to the external publishing point.

    This URL (from the external publishing point) should be playable. Then try to restream it using the CDN network.

    Create a live streaming resource and insert rtmp//xxxxxx.xxxx.com/live/ in the External publishing location box.

    As a result, your CDN URL should be as in the example below:
    http://video.yourdomina.net/414746811/_definst_/streamname1.m3u8

  3. Manual Instructions


    We support a variety of methods to get the CDN URL to use in your player.

     

    SMIL

     

    http://video.cdn.qaonapp.net/726128906/_definst_/mystream.smil
    The SMIL playlist provides an RTMP URL and should be used with Flash-based players only. Longtail Player and Flow Player are compatible with SMIL redirection.

     

    Apple HTTP Live Streaming

     

    http://video.cdn.qaonapp.net/726128906/_definst_/mystream.m3u8
    This returns a 302 redirect to a Apple HLS manifest and should be used with Apple HLS-compatible players only.

     

    Adobe HTTP Dynamic Streaming

     

    http://video.cdn.qaonapp.net/726128906/_definst_/mystream.f4m
    This returns an Adobe HDS manifest and should be used with Adobe HDS-compatible players only.

     

    Microsoft Smooth Streaming (Silverlight)

     

    http://video.cdn.qaonapp.net/726128906/_definst_/mystream.ism
    This returns a 302 redirect to Smooth Streaming manifest and should be used with Smooth Streaming-compatible players only.

     

    Javascript JSONP

     

    http://video.cdn.qaonapp.net/726128906/_definst_/mystream.jsonp?callback=MyCallBack
    This returns a JSONP document, embeddable using <script>

     

    An example of a callback with a successful result:

    MyCallBack({ “rtmp”: “rtmp://609821627.e.726128906.r.cdn.qaonapp.net/726128906/_definst_/mystream”, “rtmpe”: “rtmp://609821627.e.726128906.r.cdn.qaonapp.net/726128906/_definst_/mystream”, “apple”: “http://609821627.e.726128906.r.cdn.qaonapp.net/726128906/_definst_/mystream/playlist.m3u8”, “adobe”: “http://609821627.e.726128906.r.cdn.qaonapp.net/726128906/mystream/_definst_/manifest.f4m”, “rtsp”: “rtsp://609821627.e.726128906.r.cdn.qaonapp.net/726128906/_definst_/mystream”, “silverlight”: “http://609821627.e.726128906.r.cdn.qaonapp.net/726128906/_definst_/mystream/Manifest” }); 


    An example with an error:

    MyCallBack({ “error”: “File not found” });


    Javascript JSON

    http://video.cdn.qaonapp.net/726128906/_definst_/mystream.json
    This returns a JSON document. Cross-origin resource sharing is enabled to allow XMLHttpRequest from any domains.

     

    An example of a callback with a successful result:

    { “rtmp”: “rtmp://609821627.e.726128906.r.cdn.qaonapp.net/726128906/_definst_/mystream”, “rtmpe”: “rtmp://609821627.e.726128906.r.cdn.qaonapp.net/726128906/_definst_/mystream”, “apple”: “http://609821627.e.726128906.r.cdn.qaonapp.net/726128906/_definst_/mystream/playlist.m3u8”, “adobe”: “http://609821627.e.726128906.r.cdn.qaonapp.net/726128906/_definst_/mystream/manifest.f4m”, “rtsp”: “rtsp://609821627.e.726128906.r.cdn.qaonapp.net/726128906/_definst_/mystream”, “silverlight”: “http://609821627.e.726128906.r.cdn.qaonapp.net/726128906/_definst_/mystream/Manifest” }


    An example of a callback with a JSON document with an error thrown:

    { “error”: “File not found” }