├── BWsaver_install.md
├── CORS.md
├── README.md
├── errors.md
├── hls.md
├── hooks.md
├── install.md
├── progressive_download.md
├── resources
    ├── Rule_1.png
    ├── Rule_2.png
    ├── canceled_error_1.png
    ├── canceled_error_2.png
    ├── clear_local_cache.png
    ├── cors_howto.png
    ├── debug_timeline.png
    ├── get_stats.png
    ├── recent_events.png
    └── video_sources.png
├── stats_install.md
└── troubleshooting.md


/BWsaver_install.md:
--------------------------------------------------------------------------------
 1 | # HolaCDN bandwidth saver
 2 | 
 3 | Hola bandwidth saver reduces bandwidth consumption of progressive MP4/FLV/WebM downloads 30-40%, by controlling the player buffer and only downloading the required parts of the video from the server.
 4 | 
 5 | If you use the bandwidth saver, you will also enjoy the [free Hola video analytics][1], which provide you with detailded statistics regarding what really matters - your end user's experience
 6 | 
 7 | Implementation should take only a few minutes. Follow the [step by step guide][2]
 8 | 
 9 | If you have any questions during implementation, please email cdn-help@hola.org, or skype:holacdn.com
10 | 
11 | [1]: /stats_install.md
12 | [2]: /install.md
13 | 


--------------------------------------------------------------------------------
/CORS.md:
--------------------------------------------------------------------------------
  1 | # Server side configuration for video download
  2 | 
  3 | Instructions for configuring and verifying CORS settings for different web servers are below. 
  4 | 
  5 | The HolaCDN FAQ includes a [section dedicated to CORS] (http://holacdn.com/faq#imp-cors). If you have additional questions, email cdn-help@hola.org, or skype:holacdn
  6 | 
  7 | ### CORS test method #1: using develeopr console commands
  8 | First enable hola_debug. Either by adding url param `?hola_debug=true` when accessing the page,  or type in console `hola_cdn.debug_mode()`.
  9 | 
 10 | Now enter in console:
 11 | ```
 12 | hola_cdn.test_cors()
 13 | ```
 14 | 
 15 | The current status of CORS settings will be displayed.
 16 | 
 17 | ### CORS test method #2: using HolaCDN Control Panel 'Integration' tool
 18 | The HolaCDN Control Panel features an easy way to check your HolaCDN deployment, including CORS status. Simply go to the [Integration tool] (http://holacdn.com/cp/tools/integration), enter the URL of page that contains the video, select 'CDN mode' from the drop down box and start the test.
 19 | 
 20 | The current status of CORS settings will be displayed in the test results. You can click on the summary to see detailed test results.
 21 | 
 22 | ### Interpreting the CORS test results
 23 | 
 24 | If you see ```CORS status: full support```, your CORS settings are correct.
 25 | 
 26 | Otherwise, continue following this guide to configure and verify your settings using one of the following guides:
 27 | - [CORS setup for most web servers](#configMostServers)
 28 | - [CORS setup for Amazon AWS S3](#configAWS)
 29 | - [CORS setup for MaxCDN](#configMaxCDN)
 30 | - [CORS setup for Fastly](#configFastly)
 31 | - [CORS setup for LeaseWeb](#configLeaseweb)
 32 | - [CORS setup for Wowza](#configWowza)
 33 | 
 34 | ### <a name="configMostServers"></a>CORS configuration for most web servers
 35 | 
 36 | For step by step instructions regarding how to enable CORS on different web servers, see the [[original CORS documentation](http://enable-cors.org/server.html)] (http://enable-cors.org/server.html). Make sure you add all the required headers (**header fields are comma separated**), not just '*' referenced in the generic instructions:
 37 | 
 38 | - Access-Control-Allow-Origin: * 
 39 | - Access-Control-Allow-Methods: HEAD, GET, OPTIONS
 40 | - Access-Control-Expose-Headers: Content-Range, Date, Etag, Cache-Control, Last-Modified
 41 | - Access-Control-Allow-Headers: Content-Type, Origin, Accept, Range, Cache-Control
 42 | - Access-Control-Max-Age: 600
 43 | - Timing-Allow-Origin: *
 44 | 
 45 | It is also recommended to add Cache-Control header with max-age directive, otherwise the default of 600 seconds will be used:
 46 | 
 47 | - Cache-Control: max-age=86400
 48 | 
 49 | After committing the configuration changes, [verify it works](https://docs.google.com/document/d/1aLFKeQIbs3EnSMXKjXQrseVf_XkeOlDNMDYbxnbH2N8/edit?usp=sharing)
 50 | 
 51 | **Finished with CORS configuration? You can [go back to enabling HolaCDN] (https://github.com/spark-mv/cdn/blob/master/install.md#4-allow-holacdn-to-download-content)**
 52 | 
 53 | ### <a name="configApache"></a>CORS configuration for Apache
 54 | To add the CORS authorization to the header using Apache, simply add the following line inside either the `<Directory>`, `<Location>`, `<Files>` or `<VirtualHost>` sections of your server config (usually located in a *.conf file, such as httpd.conf or apache.conf), or within a .htaccess file:
 55 | 
 56 | ```
 57 | Header set Access-Control-Allow-Origin "*"
 58 | Header set Access-Control-Allow-Methods "HEAD, GET, OPTIONS"
 59 | Header set Access-Control-Expose-Headers "Content-Range, Date, Etag, Cache-Control, Last-Modified"
 60 | Header set Access-Control-Allow-Headers "Content-Type, Origin, Accept, Range, Cache-Control"
 61 | Header set Access-Control-Max-Age "600"
 62 | Header set Timing-Allow-Origin "*"
 63 | ```
 64 | 
 65 | After this passes, you may need to reload Apache to make sure your changes are applied by running the command
 66 | 
 67 | `sudo service apache2 reload`
 68 | 
 69 | Altering headers requires the use of mod_headers. Mod_headers is enabled by default in Apache, however, you may want to ensure it's enabled by run
 70 | 
 71 | `a2enmod headers`
 72 | 
 73 | ### <a name="configNginx"></a>CORS configuration for Nginx
 74 | A sample conf statements is given below. Note that they have to be in the same nested level
 75 | ```
 76 |   add_header 'Access-Control-Allow-Origin' '*';
 77 |   add_header 'Access-Control-Allow-Methods' 'HEAD, POST, GET, OPTIONS';
 78 |   add_header 'Access-Control-Expose-Headers' 'Content-Range, Date, Etag, Cache-Control, Last-Modified';
 79 |   add_header 'Access-Control-Allow-Headers' 'Content-Type, Origin, Accept, Range, Cache-Control';
 80 |   add_header 'Access-Control-Max-Age' '600';
 81 |   add_header 'Timing-Allow-Origin' '*';
 82 |   add_header 'Cache-Control' 'max-age=86400';
 83 |   if ($request_method = 'OPTIONS') {
 84 |       return 204;
 85 |   }
 86 | ```
 87 | 
 88 | ### <a name="configAWS"></a>CORS configuration for Amazon AWS
 89 | 
 90 | Please refer to [these instructions](https://docs.google.com/document/d/1RrWA7gfCLDXcjgCQOQRGs0A3IRSlvn3Ktu9zHp9j-po/edit?usp=sharing) for a step-by-step guide on how to configure and verify CORS for Amazon AWS S3.
 91 | 
 92 | For Amazon's official document on setting CORS on S3, see [here](http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html).
 93 | 
 94 | If you're using CloudFront, please refer to [Amazon's documentation](http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html#header-caching-web-cors) for to how to configure CloudFront to respect cross-origin resource sharing (CORS).
 95 | 
 96 | ### <a name="configMaxCDN"></a>CORS configuration for MaxCDN
 97 | 
 98 | Please refer to [these instructions] (https://docs.google.com/document/d/12wQr79BXaTJ4WF9_-oueEW9Cx0FMvsNOCcMBifzfzIE/edit?usp=sharing) for a step-by-step guide on how to setup CORS on MaxCDN.
 99 | 
100 | ### <a name="configFastly"></a>CORS configuration for Fastly
101 | 
102 | Please refer to [these instructions] (https://docs.google.com/document/d/1zIMMQe4lSy7ubcWv9FDxzsWw6acjv9_o6yZrhgoyit0/edit?usp=sharing) for a step-by-step guide on how to setup CORS on Fastly.
103 | 
104 | ### <a name="configLeaseweb"></a>CORS configuration for LeaseWeb
105 | 
106 | Please refer to [these instructions] (https://docs.google.com/document/d/16jw0ORZr7i1ZfumzVcnGF1mua8J48IuVPCNm_7jhoAE/edit?usp=sharing) for a step-by-step guide on how to setup CORS on LeaseWeb.
107 | 
108 | ### <a name="configWowza"></a>CORS configuration for Wowza
109 | 
110 | Please refer to [these instructions] (https://www.wowza.com/docs/how-to-enable-cross-origin-resource-sharing-cors-for-http-based-streams) for a step-by-step guide on how to setup CORS on Wowza.
111 | 
112 | **Finished with CORS configuration? You can [go back to enabling HolaCDN] (https://github.com/spark-mv/cdn/blob/master/install.md#4-allow-holacdn-to-download-content)**
113 | 
114 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # [HolaCDN: Speeding up Video Delivery] (https://github.com/spark-mv/cdn/blob/master/install.md)
 2 | 
 3 | 1. [**Sign up**] (https://holacdn.com/cp) to HolaCDN. Get instant access to your video delivery portal. 
 4 | 2. Add the JavaScript to your site. Use the portal to see your user's QoE (start/seek times, % buffering, bitrate, etc.).  
 5 | 3. Enable HolaCDN to improve user QOE and save costs. Use the portal to control the deployment and see the benefits.
 6 | 
 7 | ## [Detailed video analytics (FREE)] (https://github.com/spark-mv/cdn/blob/master/stats_install.md)
 8 | 
 9 | * Do you know what is the video start time for your users in London?
10 | * Is there video buffering for Indian users during peak times?
11 | * What percentage of your users click play, but never see a video and move on to another site?
12 | 
13 | No matter what kind of video, origin or CDN(s) you use - HolaCDN can provide answers.
14 | 
15 | Implementation is simple: simply add a JavaScript to your site. [Start now] (https://github.com/spark-mv/cdn/blob/master/stats_install.md), and access realtime statistics on the portal.
16 | 
17 | To see a live account, login to the [demo account] (http://bit.ly/HolaCDNPortalDemo)  (user: portal_demo@hola.org, password: holacdn)
18 | 
19 | **_HolaCDN video analytics are completely free for both non-commercial and commercial use._**
20 | 
21 | ##[Hola video CDN] (https://github.com/spark-mv/cdn/blob/master/install.md)
22 | 
23 | Hola also offers a commercial CDN service, specifically designed for video delivery. 
24 | 
25 | Hola client side code “auctions” each chunk of the video between the existing CDN and  multiple Hola CDN servers worldwide. First chunks are downloaded from the fastest servers and later chunks are downloaded from the lowest cost servers.  
26 | 
27 | Your video is played using chunks downloaded from multiple CDN servers, at high speed & reliability, with minimal cost. For more details, visit [HolaCDN website] (http://www.holacdn.com).
28 | 
29 | ## [Does your site use progressive video? Reduce your CDN costs even more with the bandwidth saver ](https://github.com/spark-mv/cdn/blob/master/BWsaver_install.md) 
30 | 
31 | Progressive MP4/FLV is an easy way to deliver online video, but also wastes bandwidth. Simply put, video downloads in full, but most users don't view all the downloaded bytes. And you end up paying for the wasted bandwidth.
32 | 
33 | HolaCDN bandwidth saver will instantly reduce HolaCDN's effective cost by 30-40%. Simply add the JavaScript to your video pages. The bandwidth saver is automatically activated as part of HolaCDN. To implement HolaCDN, Follow the step-by-step instructions in [the guide] (https://github.com/spark-mv/cdn/blob/master/BWsaver_install.md).
34 | 


--------------------------------------------------------------------------------
/errors.md:
--------------------------------------------------------------------------------
 1 | # Introduction
 2 | 
 3 | This section contains error messages, what they mean and how you can fix them.
 4 | 
 5 | If you have any questions, email cdn-help@hola.org, or skype:holacdn
 6 | 
 7 | ## Hola skip
 8 | 
 9 | ## no_browser_match
10 | 
11 | 
12 | 


--------------------------------------------------------------------------------
/hls.md:
--------------------------------------------------------------------------------
  1 | # HLS/ HDS
  2 | 
  3 | **_This module is completly free for both non-commercial and commercial use._**
  4 | 
  5 | ## Hola CDN solution includes
  6 | * Free video analytics tool for your web-site 
  7 | * Free [Hola player] (https://github.com/hola/player) (optional)
  8 | 
  9 | ## Table of contents
 10 | * [Test Hola CDN in less than 5 minutes](#TestHola)
 11 | * [Integrate free tool for your web-site](#FreeTool)
 12 | * [Server side configuration](#ServerConfig)
 13 | 
 14 | ## <a name="TestHola"></a>Test Hola CDN in less than 5 minutes
 15 | You can locally test the client side module quickly on your site, from the Chrome browser developer console.
 16 | 
 17 | #### Prerequisites
 18 | * Supported players: [Hola player] (https://github.com/hola/player), JWPlayer , VideoJS HTML5 players. 
 19 | * Supported browsers: Chrome (Win/Mac), IE 10, 11. Firefox support coming soon.
 20 | 
 21 | #### Flow
 22 | **Disable security**
 23 | * Exit Chrome and make sure no Chrome processes are running. 
 24 | * Temporarily launch Chrome with command line parameter `--disable-web-security`. For example:
 25 | 
 26 |   `"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security`.
 27 | 
 28 | Notes:
 29 | * The location of your chrome.exe might be different. 
 30 | * You can also edit the Chrome shortcut to include the parameter. 
 31 | * In Mac, launch Chrome from a terminal window.
 32 | 
 33 | **Launch developer console**
 34 | * Go to your website's video page and launch the developer console (F12), then click the console tab.
 35 | 
 36 | **Load Hola CDN**
 37 | * In console, enter `jQuery.getScript('http://client.h-cdn.com/loader.js')`.
 38 | 
 39 | **Init Hola CDN**
 40 | 
 41 | CDN init command varies according to the video player used:
 42 |   * For JWplayer 6+, VideoJS or Hola player, use `hola_cdn.init()`. 
 43 |   * For an old version of JWPlayer (V4,V5), use 
 44 | `hola_cdn.init({autostart: true, jwplayer_version: 'auto'})`
 45 |   * For Kernel player, use 
 46 | `hola_cdn.init({video_url: decodeURIComponent(flashvars.video_url), autostart: true})` 
 47 | 
 48 | **Play movie**
 49 | * Following the init command, the player will reload. Click play to start the video.
 50 | 
 51 | **Demo results**
 52 | * You can switch to the 'network' tab and verify that the video chunks are requested from multiple servers, and not from a single IP address.
 53 | * You can also use ‘getstats’ in console to see some statistics.
 54 | 
 55 | Note: If you navigate to another video, you may need to reload the JS module. When embedding the script into your page, you will require to do so.
 56 | 
 57 | ## <a name="FreeTool"></a>Integrate free tool for your web-site
 58 | 
 59 | #### Static loading of client side module loader.js (preferred)
 60 | ```html
 61 | <script src="http://client.h-cdn.com/loader.js?customer=demo"></script>
 62 | ```
 63 | #### Dynamic loading of client side module loader_demo.js with jQuery
 64 | ```js
 65 | jQuery.getScript('http://client.h-cdn.com/loader.js?customer=demo')
 66 | ```
 67 | followed by
 68 | ```js
 69 | hola_cdn.init()
 70 | ```
 71 | #### Dynamic loading of client side module loader.js without jQuery
 72 | ```js
 73 | var script = document.createElement('script');
 74 |  script.src = '//client.h-cdn.com/loader.js?customer=demo';
 75 |  script.type = 'text/javascript';
 76 |  document.getElementsByTagName('head')[0].appendChild(script);
 77 |  ```
 78 | followed by
 79 | ```js
 80 | hola_cdn.init()
 81 | ```
 82 | 
 83 | Notes:
 84 | * It is strongly recommended to NOT to host a local copy of the JS, as this will prevent any updates/bug fixes from reaching you.
 85 | * Only load loader.js once (either static or dynamic)
 86 | 
 87 | ## <a name="ServerConfig"></a>Server side configuration
 88 | 
 89 | In order to allow the client side module to send byte-range requests, please enable CORS on the HTTP server(s) that is serving the video files and verify response headers to MP4/FLV files from this server(s) include the following headers:
 90 | 
 91 | * Access-Control-Allow-Origin: *
 92 | * Access-Control-Allow-Methods: HEAD, GET, OPTIONS
 93 | * Access-Control-Expose-Headers: Content-Range, Date, Etag, X-Cache
 94 | * Access-Control-Allow-Headers: Content-Type, Origin, Accept, Range, Cache-Control
 95 | * Access-Control-Max-Age: 600
 96 | * Timing-Allow-Origin: *
 97 | 
 98 | For step by step instructions regarding how to enable CORS on different web servers, see the original [CORS documentation] (http://enable-cors.org/server.html). Make sure you add all the required headers, not just '*' referenced in the instructions.
 99 | 
100 | #### Testing server headers
101 | ```curl -v -H "Origin: <site origin link>" -X OPTIONS -H "Access-Control-Request-Headers: range" <video link>```  
102 | Verify response:
103 | ```
104 | HTTP/1.1 200 OK
105 | Content-Length: 0
106 | Access-Control-Allow-Origin: *
107 | Access-Control-Allow-Methods: HEAD, GET, OPTIONS
108 | Access-Control-Expose-Headers: Content-Range, Date, Etag
109 | Access-Control-Allow-Headers: Content-Type, Origin, Accept, Range, Cache-Control
110 | Access-Control-Max-Age: 600
111 | Timing-Allow-Origin: *
112 | ```
113 | 
114 | #### Using Amazon S3 
115 | 
116 | If you are using Amazon S3 to store videos, you should configure your bucket to allow cross-origin requests, you create a CORS configuration, an XML document with rules that identify the origins that you will allow to access your bucket, the operations (HTTP methods) will support for each origin, and other operation-specific information. You can add up to 100 rules to the configuration. You add the XML document as the cors subresource to the bucket.
117 | 
118 | ```
119 | <CORSConfiguration>
120 |  <CORSRule>
121 |   <AllowedOrigin>*</AllowedOrigin>
122 | 
123 |   <AllowedMethod>HEAD</AllowedMethod>
124 |   <AllowedMethod>GET</AllowedMethod>
125 | 
126 |   <AllowedHeader>Content-Type</AllowedHeader>
127 |   <AllowedHeader>Origin</AllowedHeader>
128 |   <AllowedHeader>Accept</AllowedHeader>
129 |   <AllowedHeader>Range</AllowedHeader>
130 |   <AllowedHeader>Cache-Control</AllowedHeader>
131 | 
132 |   <ExposeHeader>Content-Range</ExposeHeader>
133 |   <ExposeHeader>Date</ExposeHeader>
134 |   <ExposeHeader>Etag</ExposeHeader>
135 | 
136 |   <MaxAgeSeconds>600</MaxAgeSeconds>
137 | 
138 |  </CORSRule>
139 | </CORSConfiguration>
140 | ```
141 | 
142 | For step by step instructions regarding how to enable CORS on Amazon S3, see the [Amazon documentation] (http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html).
143 | 
144 | For any questions, please contact cdn-help@hola.org.
145 | 
146 | 


--------------------------------------------------------------------------------
/hooks.md:
--------------------------------------------------------------------------------
 1 | # Adding HolaCDN hooks to your own player
 2 | 
 3 | HolaCDN hooks are required for use with HolaCDN's JavaScript component. HolaCDN supports [most commercial players] (https://github.com/spark-mv/cdn/blob/master/install.md#2-add-hola-js-to-your-website).
 4 | 
 5 | If you use your own Flash based player, you can use the code below to enable HolaCDN on your player. 
 6 | 
 7 | Note that the HolaCDN hooks do not affect the performance or functionality of your player. When the HolaCDN JavaScript is disabled, or not present on the page, your player will behave like it does without the hooks.
 8 | 
 9 | Choose your player and protocol from the list below: 
10 | 
11 | ## HDS
12 | 
13 | * Your own player - use [HolaCDN OSMF] (https://github.com/hola/osmf)
14 | * [VideoJS5] (https://github.com/hola/videojs5-osmf)
15 | 
16 | ## HLS
17 | * [FlashHLS] (https://github.com/hola/flashls)
18 | * [Flowplayer] (https://github.com/hola/flowplayer-hlsjs)
19 | * [VideoJS] (https://github.com/hola/videojs-contrib-hls)
20 | 
21 | ## MP4
22 | * Coming soon
23 | 
24 | # Testing
25 | 
26 | * To test the HolaCDN hooks with your player without HolaCDN, deploy the modified player to parts of your site and compare its performance to your baseline player. Results should be identical.
27 | * To test the full HolaCDN solution working with your player, follow the [step by step instructions] (https://github.com/spark-mv/cdn/blob/master/install.md)
28 | 
29 | If you have any questions, email cdn-help@hola.org, or skype:holacdn
30 | 


--------------------------------------------------------------------------------
/install.md:
--------------------------------------------------------------------------------
  1 | # Introduction
  2 | 
  3 | Adding HolaCDN to your website is a simple process which can be completed in 15 minutes:
  4 | 
  5 | 1. [Sign up for a new account](#signupAccount)
  6 | 2. [Add the Hola JS to your website](#AddHolaJS)
  7 | 3. [Configure your video server](#ConfigureVideoServer)
  8 | 4. [Allow HolaCDN to collect statistics and download content](#CollectStatsDownloadContent)
  9 | 5. [Enable HolaCDN on your machine for local testing](#EnableHolaLocally)
 10 | 6. [Redirect your user's traffic to use HolaCDN or enable statistics collection](#RedirectTraffic)
 11 | 
 12 | Use the [Google Doc](http://bit.ly/HolaCDN_ImplementationGuide) or [PDF](http://bit.ly/HolaCDN_ImplementationGuidePDF) version of this guide for additional screenshots and information.
 13 | 
 14 | # <a name="signupAccount"></a>1. Sign up for a new account
 15 | 
 16 | Sign up for [a new HolaCDN account][1], and note your customer ID which will be sent to you following the registration.
 17 | 
 18 | On the HolaCDN portal, you can configure your HolaCDN system and see user experience statistics such as video start time, buffering, video quality and more. Curious? Visit the [demo account][2].
 19 | 
 20 | # <a name="AddHolaJS"></a>2. Add Hola JS to your website
 21 | 
 22 | Note: This guide is for desktop browsers. To enable HolaCDN on your native apps, see the [Android](https://github.com/hola/android_sdk) and/or [iOS](https://github.com/hola/ios_sdk) github pages.
 23 | 
 24 | HolaCDN requires a client-side JavaScript in order to collect video statistics. The JavaScript is loaded asynchronously, and will not affect your page load time. For best results, HolaCDN recommends that the script be added to the 'head' element of the video HTML page.
 25 | 
 26 | Choose the correct implementation for your existing player. You can enable HolaCDN on:
 27 | 
 28 | * Any HTML5 based video player - [Native, JW player, Flowplayer](#HTML5Players) and others.
 29 | * Flash based players such as [JWPlayer](#JWPlayer), [FlowPlayer](#Flowplayer) or [VideoJS](#VideoJS).
 30 | * The [Hola VideoJS-based player](#HolaPlayer).
 31 | * [Your own Flash based player][3].
 32 | 
 33 | Add the JS code to your web page. It is safe to add this code because it is disabled by default on the server side to protect from accidental mass deployment. After the code is on your web pages, you will enable HolaCDN on your machine for [local testing](#EnableHolaLocally) and then gradually deploy to [real users](#RedirectTraffic).
 34 | 
 35 | Examples provided below use MP4 video, but same syntax is used for HLS (M3U8) or HDS (F4M) videos.
 36 | 
 37 | ## <a name="HolaPlayer"></a>2.1 Using Hola VideoJS player
 38 | HolaCDN can work with your existing player, but we recommend using the Hola player. It is a VideoJS based video player with [additional features][4]. It is completely free to use and offers best performance and compatibility with HolaCDN. Again, this is totally optional.
 39 | 
 40 | 1) Add Hola scripts to your page as follows:
 41 | 
 42 | ```html
 43 | <head>
 44 |   ...
 45 |   <script src="//player2.h-cdn.com/hola_player.js?customer=XXXXX"></script>
 46 |   ...
 47 | </head>
 48 | ```
 49 | 
 50 | * Replace XXXXX with your HolaCDN customer ID.
 51 | 
 52 | 2) Create a video tag with the following classes: ```video-js vjs-default-skin```
 53 | 
 54 | ```html
 55 | <video class="video-js vjs-default-skin" poster="//example.org/poster.jpg" width="640" height="360" controls>
 56 |   <source src="//example.org/video.mp4" type="video/mp4">
 57 | </video>
 58 | ```
 59 | 
 60 | * Replace *example.org/poster.jpg* and *example.org/video.mp4* with your own links.
 61 | 
 62 | 3) Add the following script after video tag to initialize Hola player:
 63 | 
 64 | ```html
 65 | <body>
 66 |   ...
 67 |   <script>
 68 |     (function(){
 69 |         window.hola_player();
 70 |     })();
 71 |   </script>
 72 |   ...
 73 | </body>
 74 | ```
 75 | 
 76 | #### Live examples:
 77 | * Hola Player/Flash without HolaCDN: [MP4][5] | [HLS][6] | [HDS][7]
 78 | * Hola Player/Flash with HolaCDN: [MP4][8] | [HLS][9] | [HDS][10]
 79 | 
 80 | 4) Done adding the code? You can [test it locally on your browser](#EnableHolaLocally) or continue to [configuring the server side](#ConfigureVideoServer).
 81 | 
 82 | ## <a name="HTML5Players"></a>2.2 HTML5 video players
 83 | 
 84 | When integrating with an HTML5 source, HolaCDN attaches itself to a <video> tag. A video tag can be embedded in the raw HTML itself, or it can be dynamically created by your video player (e.g. VideoJS).
 85 | 
 86 | 1) Add the script to your page as follows:
 87 | 
 88 | ```html
 89 | <body>
 90 |   ...
 91 |   <video src="//example.org/myVideo.mp4" controls></video>
 92 |   <script async crossorigin="anonymous" src="//player.h-cdn.com/loader.js?customer=XXXXX"></script>
 93 |   ...
 94 | </body>
 95 | ```
 96 | 
 97 | * Replace XXXXX with your HolaCDN customer ID.
 98 | 
 99 | #### Live examples:
100 | * HTML5 video Without HolaCDN [Chrome native][11] | [Flowplayer][12] | [JW player][13]
101 | * HTML5 video With HolaCDN [Chrome native][14] | [Flowplayer][15] | [JW player][16]
102 | 
103 | 2) Done adding the code? You can [test it locally on your browser](#EnableHolaLocally) or continue to [configuring the server side](#ConfigureVideoServer).
104 | 
105 | ### <a name="VJS+Shaka"></a>2.2.1 HTML5/MPEG-DASH played with Shaka player
106 | If you play MPEG-DASH videos over HTML5 tech with Shaka player, you need to perform the following steps:
107 | 
108 | 1) Add the script to your page as follows:
109 | 
110 | ```html
111 | <body>
112 |   ...
113 |   <video src="//example.org/myVideo.mp4" controls></video>
114 |   <script async crossorigin="anonymous" src="//player.h-cdn.com/loader.js?customer=XXXXX"></script>
115 |   ...
116 | </body>
117 | ```
118 | 
119 | * Replace XXXXX with your HolaCDN customer ID.
120 | 
121 | 2) Replace Shaka player with Hola-enabled version:
122 | 
123 | * Download (using **right click > save link as**) the Hola-enabled version of Shaka player and place it on your server:
124 |   - [Shaka 1.6.x][36]
125 |   - [Shaka 2.0.6][50]
126 |   - [Shaka 2.0.8][56]
127 |   - [Shaka 2.1.1][57]
128 |   - [Shaka 2.3.3][58]
129 | * Replace original Shaka player with Hola-enabled version:
130 | 
131 | ```html
132 | <script type="text/javascript" src="//example.com/static/hola-shaka-player-compiled.js"></script>
133 | ```
134 | 
135 | #### Live examples:
136 | * MPEG-DASH without HolaCDN: [Shaka v2][51], [VideoJS+Shaka v2][53], [Shaka v1][37], [VideoJS+Shaka v1][39]
137 | * MPEG-DASH with HolaCDN: [Shaka v2][52], [VideoJS+Shaka v2][54], [Shaka v1][38], [VideoJS+Shaka v1][40]
138 | 
139 | 3) Done adding the code? You can [test it locally on your browser](#EnableHolaLocally) or continue to [configuring the server side](#ConfigureVideoServer).
140 | 
141 | ### <a name="JWPlayer+HolaHLS"></a>2.2.2 HTML5/HLS played by JWPlayer with HolaHLS provider
142 | In order to play HLS videos using HTML5 technology with HolaHLS provider in JWPlayer, you need to perform the following steps:
143 | 
144 | 1) Add relevant scripts to your page and register HolaHLS provider as follows:
145 | 
146 | ```html
147 | <html>
148 |   ...
149 |   <script src="//content.jwplatform.com/path/to/jwplayer.js"></script>
150 |   <script>jwplayer.key="XXXxxxXXXxxxXXXxxxXXX==";</script>
151 |   <script id=hola_jwplayer_hls_provider src="//hap.h-cdn.com/hola_jwplayer_hls.min.js?customer=XXXXX">
152 |   </script>
153 |   ...
154 | </html>
155 | ```
156 | * Replace XXXXX with your HolaCDN customer ID.
157 | 
158 | 2) Verify everything works right as expected.
159 | 
160 | 3) Done adding the code? You can [test it locally on your browser](#EnableHolaLocally) or continue to [configuring the server side](#ConfigureVideoServer).
161 | 
162 | ### <a name="FlowPlayer+HolaHLS"></a>2.2.3 HTML5/HLS played by Flowplayer with HolaHLS provider
163 | In order to play HLS videos using HTML5 technology with HolaHLS provider in flowplayer, you need to perform the following steps:
164 | 
165 | 1) Add relevant scripts to your page and register HolaHLS provider as follows:
166 | 
167 | ```html
168 | <html>
169 |   ...
170 |   <script src="//releases.flowplayer.org/6.0.5/flowplayer.min.js"></script>
171 |   <script id=hola_flowplayer_hls_provider src="//hap.h-cdn.com/hola_flowplayer_hls.min.js?customer=XXXXX">
172 |   </script>
173 |   ...
174 | </html>
175 | ```
176 | * Replace XXXXX with your HolaCDN customer ID.
177 | 
178 | 2) Verify everything works right as expected.
179 | 
180 | 3) Done adding the code? You can [test it locally on your browser](#EnableHolaLocally) or continue to [configuring the server side](#ConfigureVideoServer).
181 | 
182 | ### <a name="VideoJS+HolaHLS"></a>2.2.4 HTML5/HLS played by VideoJS with HolaHLS provider
183 | In order to play HLS videos using HTML5 technology with HolaHLS provider in VideoJS, you need to perform the following steps:
184 | 
185 | 1) Add relevant scripts to your page and register HolaHLS provider as follows:
186 | 
187 | ```html
188 | <html>
189 |   ...
190 |   <script src="//your.cdn/path/to/video.min.js"></script>
191 |   <script id=hola_videojs_hls_provider src="//hap.h-cdn.com/hola_videojs_hls.min.js?customer=XXXXX">
192 |   </script>
193 |   ...
194 | </html>
195 | ```
196 | * Replace XXXXX with your HolaCDN customer ID.
197 | 
198 | 2) Verify everything works right as expected.
199 | 
200 | 3) Done adding the code? You can [test it locally on your browser](#EnableHolaLocally) or continue to [configuring the server side](#ConfigureVideoServer).
201 | 
202 | ### <a name="Brightcove+HolaHLS"></a>2.2.5 HTML5/HLS played by Brightcove with HolaHLS provider
203 | In order to play HLS videos using HTML5 technology with HolaHLS provider in Brightcove, you need to perform the following steps:
204 | 
205 | 1) Add relevant scripts to your page and register HolaHLS provider before brightcove player:
206 | 
207 | ```html
208 | <html>
209 |   ...
210 |   <script id=hola_videojs_hls_provider src="//hap.h-cdn.com/hola_videojs_hls.min.js?customer=XXXXX"></script>
211 |   <script src="//players.brightcove.net/12345567890/1a1a1a1a-1a1a-1a1a-1a1a-1a1a1a1a1a1a_default/index.min.js"></script>
212 |   ...
213 | </html>
214 | ```
215 | * Replace XXXXX with your HolaCDN customer ID.
216 | 
217 | 2) Verify everything works right as expected.
218 | 
219 | 3) Done adding the code? You can [test it locally on your browser](#EnableHolaLocally) or continue to [configuring the server side](#ConfigureVideoServer).
220 | 
221 | ### <a name="ClapprPlayer"></a>2.2.6 HTML5/HLS played by Clappr Player
222 | On top of including the script as shown in the begining, you also need to do the following step:
223 | 
224 | 1) Save clappr player instance to a location, by default `window.hola_cdn.clappr`
225 | 
226 | ```js
227 | var player = new Clappr.Player({source: "http://your.video/here.mp4", parentId: "#player"});
228 | if (window.hola_cdn)
229 |     window.hola_cdn.clappr = player;
230 | else
231 |     window.hola_cdn = {clappr: player};
232 | ```
233 | 
234 | 2) Verify everything works right as expected.
235 | 
236 | 3) Done adding the code? You can [test it locally on your browser](#EnableHolaLocally) or continue to [configuring the server side](#ConfigureVideoServer).
237 | 
238 | ### <a name="dash_js"></a>2.2.7 HTML5/MPEG-DASH played with dash.js player
239 | If you play MPEG-DASH videos over HTML5 tech with dash.js player, you need to perform the following steps:
240 | 
241 | 1) Add the script to your page as follows:
242 | 
243 | ```html
244 | <body>
245 |   ...
246 |   <script async crossorigin="anonymous" src="//player.h-cdn.com/loader.js?customer=XXXXX"></script>
247 | </body>
248 | ```
249 | 
250 | * Replace XXXXX with your HolaCDN customer ID.
251 | 
252 | 2) Replace dash.js player with Hola-enabled version:
253 | 
254 | * Download (using **right click > save link as**) the Hola-enabled version of dash.js player and place it on your server:
255 |   - [dash.js 2.1.0-2.1.3][55]
256 | * Replace original dash.js player with Hola-enabled version:
257 | 
258 | ```html
259 | <script type="text/javascript" src="//example.com/static/dash.all.min.js"></script>
260 | ```
261 | 
262 | 3) Done adding the code? You can [test it locally on your browser](#EnableHolaLocally) or continue to [configuring the server side](#ConfigureVideoServer).
263 | 
264 | ## 2.3 Flash based video players
265 | 
266 | ### <a name="JWPlayer"></a>2.3.1 JW Player
267 | 
268 | If your site uses JW Player with flash technology, follow these steps:
269 | 
270 | 1) Add Hola loader to the 'head' element of the video HTML page, along with your customerID:
271 | 
272 | ```html
273 | <head>
274 |   ...
275 |   <script async crossorigin="anonymous" src="//player.h-cdn.com/loader.js?customer=XXXXX"></script>
276 |   ...
277 | </head>
278 | ```
279 | 
280 | * Replace XXXXX with your HolaCDN customer ID.
281 | 
282 | 2) Replace your JW player SWF with the Hola-enabled version.
283 | 
284 | Select the URL for your version of JWPlayer:
285 | 
286 | | Version | URL |
287 | | ------- | --- |
288 | | V6.12.4xx | `//player.h-cdn.com/jwplayer.flash.6_12_4956.swf` |
289 | | V7.1.0xx | `//player.h-cdn.com/jwplayer.flash.7_1_0.swf` |
290 | | V7.1.4xx | `//player.h-cdn.com/jwplayer.flash.7_1_4.swf` |
291 | | V7.2.2xx | `//player.h-cdn.com/jwplayer.flash.7_2_2.swf` |
292 | | V7.2.3xx | `//player.h-cdn.com/jwplayer.flash.7_2_3.swf` |
293 | | V7.2.4xx | `//player.h-cdn.com/jwplayer.flash.7_2_4.swf` |
294 | | V7.3.3xx | `//player.h-cdn.com/jwplayer.flash.7_3_3.swf` |
295 | | V7.3.4xx | `//player.h-cdn.com/jwplayer.flash.7_3_4.swf` |
296 | | V7.4.3xx | `//player.h-cdn.com/jwplayer.flash.7_4_3.swf` |
297 | | V7.4.4xx | `//player.h-cdn.com/jwplayer.flash.7_4_4.swf` |
298 | | V7.5.0xx | `//player.h-cdn.com/jwplayer.flash.7_5_0.swf` |
299 | | V7.6.0xx | `//player.h-cdn.com/jwplayer.flash.7_6_0.swf` |
300 | | V7.6.1xx | `//player.h-cdn.com/jwplayer.flash.7_6_1.swf` |
301 | | V7.7.0xx | `//player.h-cdn.com/jwplayer.flash.7_7_0.swf` |
302 | | V7.7.1xx | `//player.h-cdn.com/jwplayer.flash.7_7_1.swf` |
303 | | V7.7.4xx | `//player.h-cdn.com/jwplayer.flash.7_7_4.swf` |
304 | | V7.8.1xx | `//player.h-cdn.com/jwplayer.flash.7_8_1.swf` |
305 | | V7.8.2xx | `//player.h-cdn.com/jwplayer.flash.7_8_2.swf` |
306 | | V7.8.3xx | `//player.h-cdn.com/jwplayer.flash.7_8_3.swf` |
307 | | V7.8.4xx | `//player.h-cdn.com/jwplayer.flash.7_8_4.swf` |
308 | | V7.8.6xx | `//player.h-cdn.com/jwplayer.flash.7_8_6.swf` |
309 | | V7.8.7xx | `//player.h-cdn.com/jwplayer.flash.7_8_7.swf` |
310 | | V7.9.0xx | `//player.h-cdn.com/jwplayer.flash.7_9_0.swf` |
311 | | V7.9.1xx | `//player.h-cdn.com/jwplayer.flash.7_9_1.swf` |
312 | | V7.9.3xx | `//player.h-cdn.com/jwplayer.flash.7_9_3.swf` |
313 | | V7.10.0xx | `//player.h-cdn.com/jwplayer.flash.7_10_0.swf` |
314 | | V7.10.1xx | `//player.h-cdn.com/jwplayer.flash.7_10_1.swf` |
315 | | V7.11.0xx | `//player.h-cdn.com/jwplayer.flash.7_11_0.swf` |
316 | | V7.12.8xx | `//player.h-cdn.com/jwplayer.flash.7_12_8.swf` |
317 | 
318 | Continue by configuring ```{flashplayer: <url>}``` option in ```jwplayer('video-container').setup(opt)``` call:
319 | 
320 | ```js
321 | jwplayer('video-container').setup({
322 |     file: '//cdn.example.com/popular_videos/example.mp4',
323 |     flashplayer: '//player.h-cdn.com/<new-version-flashplayer>.swf',
324 |     primary: 'flash',
325 |     width: 640,
326 |     height: 360
327 | });
328 | ```
329 | 
330 | * Replace *cdn.example.com/popular_videos/example.mp4* with your own link. Changing the SWF does not impact the user interface of the player.
331 | * Note: if you have multiple jwplayers playing on the same page, make sure they use the same version of hola-enabled swf file
332 | 
333 | #### Live examples:
334 | * JWPlayer/Flash without HolaCDN: [MP4][21] | [HLS][22] | [HDS][23]
335 | * JWPlayer/Flash with HolaCDN: [MP4][33] | [HLS][34] | [HDS][35]
336 | 
337 | 3) Done adding the code? You can [test it locally on your browser](#EnableHolaLocally) or continue to [configuring the server side](#ConfigureVideoServer).
338 | 
339 | ### <a name="VideoJS"></a>2.3.2 VideoJS
340 | 
341 | If your site uses a videoJS based player with flash technology, follow these steps:
342 | 
343 | 1) Add Hola loader to the 'head' element of the video HTML page, along with your customerID:
344 | 
345 | ```html
346 | <head>
347 |   ...
348 |   <script async crossorigin="anonymous" src="//player.h-cdn.com/loader.js?customer=XXXXX"></script>
349 |   ...
350 | </head>
351 | ```
352 | 
353 | * Replace XXXXX with your HolaCDN customer ID.
354 | 
355 | #### Live Examples:
356 | * VJS5 without HolaCDN: [MP4][25]
357 | * VJS5 with HolaCDN: [MP4][26]
358 | 
359 | 2) Done adding the code? You can [test it locally on your browser](#EnableHolaLocally) or continue to [configuring the server side](#ConfigureVideoServer).
360 | 
361 | ### <a name="Flowplayer"></a>2.3.3 Flowplayer (HLS only; HDS, MP4 coming soon)
362 | 
363 | If your site plays HLS video using Flowplayer with flash technology, follow these steps:
364 | 
365 | 1) Add Hola loader to the 'head' element of the video HTML page, along with your customerID:
366 | 
367 | ```html
368 | <head>
369 |   ...
370 |   <script async crossorigin="anonymous" src="//player.h-cdn.com/loader.js?customer=XXXXX"></script>
371 |   ...
372 | </head>
373 | ```
374 | 
375 | * Replace XXXXX with your HolaCDN customer ID.
376 | 
377 | 2) Replace your Flowplayer SWF with the Hola-enabled version. 
378 | 
379 | ```js
380 | var container = document.getElementById('video-container');
381 | var player = flowplayer(container, {
382 |     swf: '//client.h-cdn.com/flowplayerhls.6.0.5.hola.swf',
383 |     swfHls: '//client.h-cdn.com/flowplayerhls.6.0.5.hola.swf',
384 |     clip: {
385 |         sources: [{
386 |             type: 'application/x-mpegurl',
387 |             src:  '//cdn.example.com/popular_videos/example.m3u8',
388 |         }]
389 |     }
390 | });
391 | ```
392 | 
393 | Both ```swf``` and ```swfHls``` are changed to the same file. Changing the SWF does not impact the user interface of the player.
394 | 
395 | 3) Done adding the code? You can [test it locally on your browser](#EnableHolaLocally) or continue to [configuring the server side](#ConfigureVideoServer).
396 | 
397 | # <a name="ConfigureVideoServer"></a>3. Configure your video server 
398 | 
399 | ## <a name="CORSSettings"></a>3.1 CORS settings
400 | 
401 | Hola free bandwidth saver and CDN work by requesting your MP4/FLV/WEBM/TS files from the video server in chunks. For this to work, certain HTTP headers need to be enabled. [Read more][28] about CORS configuration in HolaCDN.
402 | 
403 | If you do not implement these settings, HolaCDN will still work but performance will be degraded. As such, see [how to verify and configure CORS][29].
404 | 
405 | ## 3.2 Handling redirects
406 | 
407 | In some implementations, the first video URL is redirected to another URL. In this case, make sure that:
408 | - Any video data links that redirect also respond to OPTIONS with CORS headers as detailed above.
409 | - The response headers must respond to OPTIONS with 200/204 status, and not with 302.
410 | 
411 | # 4. <a name="CollectStatsDownloadContent"></a>Allow HolaCDN to collect statistics and download content
412 | 
413 | HolaCDN’s servers need to download an initial copy of the video from your infrastructure to serve to future users. HolaCDN uses a 'pull' model. There is no need to proactively push content to HolaCDN. The same server will also be used for statistics gathering.
414 | 
415 | To configure where to download a copy from:
416 | 
417 | 1. Open [your HolaCDN account][1]. 
418 | 2. Go to the configuration page ('conf').
419 | 3. You will arrive to the default zone ('gen'). In this zone, click "Insert a new video source group" and enter one or more video source(s). For example, if your video URL looks like *http://video.myserver.com/static/mp4/video.mp4*, the video source is *video.myserver.com*. For HDS/HLS video, enter server(s) for manifests (M3U8/F4M) and for video chunks (TS or Frag).
420 | 
421 | * If your video servers use content protection algorithms, [check out the advanced settings](#AdvancedConfig).
422 | 
423 | * To simplify testing, HolaCDN is configured with video source '*'. Make sure to change it to your real video source(s). 
424 | 
425 | Finished? You can now [test HolaCDN locally on your PC](#EnableHolaLocally)
426 | 
427 | # 5. <a name="EnableHolaLocally"></a>Enable HolaCDN on your machine for local testing
428 | 
429 | Once the code is live on the webpage, remember it is still disabled by default on the server side. You can test the live code locally by entering commands in the browser developer console. 
430 | 
431 | Console commands must be entered in the frame containing the video player. If your site includes frames, select the video frame from the drop down box in the console, and enter the console commands in the correct frame.
432 | 
433 | ## 5.1 Enable HolaCDN for statisics purpose only
434 | 
435 | 1. Enable statistics by entering ```hola_cdn.set_mode_origin_cdn()```. You should get the response: ```cdn/loader: enable mode origin_cdn, need refresh```.
436 | 2. Refresh the page.
437 | 3. Check that HolaCDN is in statistics mode by entering ```hola_cdn.get_mode()```. You should get the response: ```"origin_cdn"```.
438 | 4. To instantly see if HolaCDN attached itself to your player and is sending statistics, play the video and while it is playing, print HolaCDN statistics by entering ```hola_cdn.get_stats()``` (if you enabled multiplayer mode, use ```hola_cdn.get_stats(N)``` to see stats of Nth player and so on)
439 | 5. You should see printouts from HolaCDN with video timelime information.
440 | 
441 | ## 5.2 Enable HolaCDN on your browser
442 | 
443 | Now you will enable HolaCDN for content download as well. Again, this is only for testing purposes on your browser locally.
444 | 
445 | 1. Enable CDN mode by entering ```hola_cdn.set_mode_hola_cdn()```. You should get the response: ```cdn/loader: enable mode hola_cdn, need refresh```.
446 | 2. Refresh the page.
447 | 3. Check that HolaCDN is in CDN mode by entering ```hola_cdn.get_mode()```. You should get the response: ```"hola_cdn"```.
448 | 4. To instantly see if HolaCDN attached itself to your player and HolaCDN servers are sending traffic, play the video and while it is playing, print HolaCDN statistics by entering ```hola_cdn.get_stats()``` (if you enabled multiplayer mode, use ```hola_cdn.get_stats(N)``` to see stats of Nth player and so on)
449 | 5. Look at the developer console for printouts from HolaCDN reporting how many bytes were downloaded from HolaCDN servers (zagent###.h-cdn.com). 
450 | 6. While the video is playing, you can also look at the network tab of the developer console. You will see some video chunks coming from your own server, and some from HolaCDN servers.
451 | 
452 | If you receive a console message starting with "Hola cdn skip", the settings on the portal did not take effect yet - try again in a few minutes.
453 | 
454 | You can enter other console commands, for example:
455 | * Disable HolaCDN:	```hola_cdn.set_mode_disabled()```
456 | * Reset local settings:	```hola_cdn.set_mode_default()```
457 | * See all commands:	```hola_cdn.help()```
458 | 
459 | ## 5.3 Checking statistics on the portal
460 | 
461 | In order to verify that the video statistics are recorded into your account:
462 | 
463 | 1. Login to [your HolaCDN account][1].
464 | 2. Go to 'stats' page.
465 | 3. In order to see that your latest CDN events were recorded, click on 'Recent events'.
466 | 4. 
467 | You should see a table with your IP address and browser information, which will look like:
468 | ![Recent events example](/resources/recent_events.png)
469 | 
470 | If you see ```bwsaver_report``` events, go back to the detailed statistics table. In case HolaCDN is currently in statistics mode,  you will see numbers only in the 'All' column.
471 | Note that it may take a few minutes for statistics to appear in the table.
472 | 
473 | To protect you from accidental mass deployment, at this stage HolaCDN is still disabled on the server side. You will see an ```using zone gen mode disabled (no_browser_match)``` error message on any device trying to play a video with HolaCDN. This is by design and expected. Continue to the next step to gradually enable in production.
474 | 
475 | Next step is to [start collecting statistics from real users](#RedirectTraffic).
476 | 
477 | # 6. <a name="RedirectTraffic"></a>Redirect your user's traffic to use HolaCDN or enable statistics collection
478 | 
479 | When you are satisfied with local testing, you can gradually enable statsitics collection and/or redirect user's CDN traffic for real users in production. 
480 | 
481 | 1. Login to [your HolaCDN account][1].
482 | 2. Go to the 'configuration' section and find the the 'gen' zone.
483 | 3. Click 'New rule' and define one or more rules that will determine how HolaCDN will be enabled on different platforms/browsers. For example:
484 | 	* Enable CDN mode for 10% of Chrome/Win users, and 90% for statistics collection.
485 | 	![Rule 1 example](/resources/Rule_1.png)
486 | 	* Enable HolaCDN in statistics mode for 10% of Chrome/Win users. 
487 | 	![Rule 2 example](/resources/Rule_2.png)
488 | 	* Add more/browsers/platforms.
489 | 4. Click the 'Save and apply' button to save your settings. Changes will take effect within 5 minutes. You will receive a confirmation email every time you change settings on the portal.
490 | 5. Verify that your changes take effect: Set HolaCDN to default mode using the ```hola_cdn.set_mode_default()``` console command, and refresh. This will ensure the JS is initalized based on decisions on the server side, and not the local setting you entered earlier.
491 | 
492 | ###_Congratulations! HolaCDN is up and running_###
493 | 
494 | # Reporting bugs	
495 | 
496 | If you think you have found a bug, please report it to HolaCDN:
497 | 
498 | 1. In the developer console, enter ```hola_cdn.bug_report()```.
499 | 2. Copy the URL that was generated by the command.
500 | 3. Send it to HolaCDN support: cdn-help@hola.org.
501 | 
502 | # <a name="AdvancedConfig"></a>Advanced configuration settings
503 | 
504 | # 1. Optional - Configuring zones
505 | 
506 | If you have multiple websites under your customer ID, or you would like to experiment with different settings on parts of your website(s), you can create zones for each site or test.
507 | 
508 | Each zone can have its own set of video sources and activation rules. You can use regular expressions to define the zone.
509 | 
510 | 'Gen' is a the default zone. It is applied when it is not overridden by another zone. The gen zone cannot be removed.
511 | 
512 | # 2. CORS settings for HLS/HDS video
513 | 
514 | HolaCDN works with modern, chunked video protocols by requesting video segments from multiple servers in parallel. Basic operation does not require any changes to CORS settings.
515 | 
516 | HolaCDN recommends configuring certain HTTP headers. This allows HolaCDN to calculate bandwidth and maximize performance further. These changes are optional, and can be enabled at any time.
517 | 
518 | Test to see if your HTTP server is configured correctly by using:
519 | 
520 | ```sh
521 | curl -v -H "Origin: <site origin link>" -X OPTIONS "link to m3u8/f4m manifest file"
522 | ```
523 | 
524 | The desired response is:
525 | 
526 | ```http
527 | HTTP/1.1 200 OK
528 | Content-Length: 0
529 | Access-Control-Allow-Origin: *
530 | Access-Control-Allow-Methods: HEAD, GET, OPTIONS
531 | Access-Control-Expose-Headers: Date, Etag, Cache-Control
532 | Access-Control-Max-Age: 600
533 | Timing-Allow-Origin: *
534 | ```
535 | 
536 | In case the response is different from the desired response, configure the missing headers by enabling CORS on the web server(s) that is serving the video files. Go line by line to ensure all headers are configured correctly. [Click here](#CORSSettings) for CORS configuration instructions.
537 | 
538 | # 3. Video platforms
539 | 
540 | ## 3.1 Brightcove
541 | 
542 | HolaCDN offers a 'plug and play' integration with the Brightcove video platform. 
543 | 
544 | There is no need to specify any parameters. Simply include HolaCDN loader at the END of the body, just before the closing </body> tag:
545 | 
546 | ```html
547 | <body>
548 |   ...
549 |   ...
550 |   <script async crossorigin="anonymous" src="//player.h-cdn.com/loader.js?customer=XXXXX"></script>
551 | </body>
552 | ```
553 | 
554 | * Replace XXXXX with your HolaCDN customer ID.
555 | 
556 | ## 3.2 Kaltura
557 | 
558 | HolaCDN offers a 'plug and play' integration with the Kaltura video platform if the Kaltura HTML5 player is used. 
559 | 
560 | Note that integration steps below are applied only on your page, under your control. There is no need to seek assistance from Kaltura support.
561 | 
562 | To add hola script into Kaltura player iframe:
563 | 
564 | 1. Use Kaltura 'Dynamic embed' if it is not already enabled - see http://player.kaltura.com/docs/kwidget
565 | 2. in the 'readyCallback' callback function, add the following block:
566 | 
567 | ```js
568 | kWidget.embed({
569 |     // ... other params
570 |     'readyCallback': function(playerId){
571 |         // ... your code
572 |         // inject hola script
573 |         var kiframe = document.getElementById(playerId + '_ifp');
574 |         var hola_script = document.createElement('script');
575 |         hola_script.src = '//client.h-cdn.com/loader.js?customer=XXXX';
576 |         hola_script.type = 'text/javascript';
577 |         kiframe.contentWindow.document.head.appendChild(hola_script);
578 |     }
579 | });
580 | ```
581 | 
582 | * Replace XXXXX with your HolaCDN customer ID.
583 | * In monetization plugin DoubleClick settings, untick LeadWithFlash option if it's ticked
584 | 
585 | ## 3.3 Nimble Streamer live streaming
586 | 
587 | [Nimble Streamer] (https://wmspanel.com/nimble) is supported out of the box, but needs to be configured to allow HolaCDN servers to download content - [instructions here][30].
588 | # 4. Shortcut: controlling HolaCDN via the address bar
589 | 
590 | As a shortcut, you can also control HolaCDN via the address bar by appending a string to the URL of the video page.
591 | 
592 | * Enable HolaCDN mode: append ```?hola_mode=hola_cdn```
593 | * Enable Origin CDN mode: append ```?hola_mode=origin_cdn```
594 | * Disable HolaCDN: append ```?hola_mode=disabled```
595 | 
596 | # <a name="HandlingContentProtection"></a>5. Handling content protection
597 | 
598 | In case your video URLs use content protection scheme, HolaCDN servers will not be able to download videos. There are a few ways of dealing with content protection:
599 | 
600 | ## 5.1 Whitelisting HolaCDN servers
601 | 
602 | Whitelisting a few HolaCDN servers is the fastest way to enable HolaCDN to operate. You can find a link to the list of IP addresses to whitelist in your HolaCDN portal's 'integration' page.
603 | 
604 | ## 5.2 Allow HolaCDN servers to access your videos using other methods 
605 | 
606 | If whitelisting IPs is not an option, you will need to work with HolaCDN team to define alternative ways to allow the HolaCDN servers to download video files, for example: 
607 | 
608 | * Share the key generation algorithms with HolaCDN, so that HolaCDN servers will generate requests your servers will accept
609 | * Set-up a direct/hidden URL for HolaCDN servers to download from
610 | * Set-up a special key which will identify HolaCDN servers
611 | 
612 | Contact HolaCDN team in order to determine the best way to address this issue.
613 | 
614 | # 6. Ad Serving
615 | 
616 | ## 6.1 HolaCDN player + VAST
617 | HolaCDN player supports [video.js vast plugin][31]. An example on how to setup the player for serving ads can be found [here][32].
618 | 
619 | ## 6.2 HolaCDN player + IMA SDK
620 | HolaCDN player supports [video.js IMA plugin][44]. An example on how to setup the player for serving ads can be found [here][45].
621 | 
622 | ## 6.3 Adblock issues
623 | 
624 | Adblock extensions, which are pretty popular these days, may lead to unexpected exceptions thrown during ad init. So it sometimes (e.g. when executed in scope of player configuration) breaks the player init sequence and as a result HolaCDN cannot detect it.
625 | 
626 | Here is one of examples: **videojs+ima+adblock**
627 | 
628 | ```js
629 | videojs(element, {}, function(){
630 |     this.ima({id: this.id(), adTagUrl: '<ad_tag_url>'});
631 | });
632 | videojs.players => {} // no player instance detected, even though videojs successfully initialized.
633 | ```
634 | 
635 | The solution to the problem is to wrap ad init to be exception-safe. Thus the example above could be fixed to:
636 | 
637 | ```js
638 | videojs(element, {}, function(){
639 |     try { this.ima({id: this.id(), adTagUrl: '<ad_tag_url>'}); }
640 |     catch(e){ console.log('failed to initialize ad plugin, running with adblock?'); }
641 | });
642 | videojs.players => {my_vjs_player: a}
643 | ```
644 | 
645 | 
646 | [1]: https://holacdn.com/cp "HolaCDN account"
647 | [2]: https://github.com/spark-mv/cdn/blob/master/stats_install.md#curious-login-to-the-demo-account-for-live-data "Demo account"
648 | [3]: /hooks.md "FLASH-based players"
649 | [4]: https://github.com/hola/hola_player#features "Hola VideoJS player features"
650 | [5]: http://hola.github.io/examples/cdn/#hola_player "MP4 example without HolaCDN"
651 | [6]: http://hola.github.io/examples/cdn/#hola_player_hls "HLS example without HolaCDN"
652 | [7]: http://hola.github.io/examples/cdn/#hola_player_hds "HDS example without HolaCDN"
653 | [8]: http://hola.github.io/examples/cdn/#hola_player_cdn "MP4 example with HolaCDN"
654 | [9]: http://hola.github.io/examples/cdn/#hola_player_hls_cdn "HLS example with HolaCDN"
655 | [10]: http://hola.github.io/examples/cdn/#hola_player_hds_cdn "HDS example with HolaCDN"
656 | [11]: http://hola.github.io/examples/cdn/#html5 "HTML5 native player example without HolaCDN"
657 | [12]: http://hola.github.io/examples/cdn/#html5_flowplayer "Flowplayer example without HolaCDN"
658 | [13]: http://hola.github.io/examples/cdn/#html5_jwplayer "JW player example without HolaCDN"
659 | [14]: http://hola.github.io/examples/cdn/#html5_cdn "HTML5 native player example with HolaCDN"
660 | [15]: http://hola.github.io/examples/cdn/#html5_flowplayer_cdn "Flowplayer example with HolaCDN"
661 | [16]: http://hola.github.io/examples/cdn/#html5_jwplayer_cdn "JW player example with HolaCDN"
662 | [21]: http://hola.github.io/examples/cdn/#jwplayer6 "MP4 example without HolaCDN"
663 | [22]: http://hola.github.io/examples/cdn/#jwplayer6_hls "HLS example without HolaCDN"
664 | [23]: http://hola.github.io/examples/cdn/#jwplayer6_hds "HDS example without HolaCDN"
665 | [25]: http://hola.github.io/examples/cdn/#vjs5 "MP4 example without HolaCDN"
666 | [26]: http://hola.github.io/examples/cdn/#vjs5_cdn "MP4 example with HolaCDN"
667 | [28]: http://holacdn.com/faq#imp-cors "CORS in Hola FAQ"
668 | [29]: /CORS.md "CORS configuration"
669 | [30]: https://docs.google.com/document/d/1uGCPMMxMynltCA7xbgIJDk2ObgW7ZeT-Zw0hmzzYrQk/edit?usp=sharing "Nimble configuration"
670 | [31]: https://github.com/hola/videojs-vast-vpaid/tree/feature/videojs-v5 "Video JS-VAST-VPAID plugin"
671 | [32]: http://hola.github.io/examples/cdn/#hola_player_vast "Vast example with HolaCDN"
672 | [33]: http://hola.github.io/examples/cdn/#jwplayer6_cdn "MP4 example with HolaCDN"
673 | [34]: http://hola.github.io/examples/cdn/#jwplayer6_hls_cdn "HLS example with HolaCDN"
674 | [35]: http://hola.github.io/examples/cdn/#jwplayer6_hds_cdn "HDS example with HolaCDN"
675 | [36]: https://cdn.rawgit.com/hola/shaka-player/v1.6.x/shaka-player.compiled.js "Right click > Save link as > Shaka player v1.6.x"
676 | [37]: http://hola.github.io/examples/cdn/#shaka "Shaka example playing MPEG-DASH video without HolaCDN"
677 | [38]: http://hola.github.io/examples/cdn/#shaka_cdn "Shaka example playing MPEG-DASH video with HolaCDN"
678 | [39]: http://hola.github.io/examples/cdn/#vjs5_shaka "VideoJS+Shaka example playing MPEG-DASH video without HolaCDN"
679 | [40]: http://hola.github.io/examples/cdn/#vjs5_shaka_cdn "VideoJS+Shaka example playing MPEG-DASH video with HolaCDN"
680 | [44]: https://github.com/googleads/videojs-ima "videojs-ima"
681 | [45]: http://hola.github.io/examples/cdn/#hola_player_ima "Hola player + IMA + preroll midroll postroll"
682 | [50]: https://github.com/hola/shaka-player/releases/download/v2.0.6-hola-1/shaka-player.compiled.js "Right click > Save link as > Shaka player v2.0.6"
683 | [51]: http://hola.github.io/examples/cdn/#shaka2 "Shaka v2 example playing MPEG-DASH video without HolaCDN"
684 | [52]: http://hola.github.io/examples/cdn/#shaka2_cdn "Shaka v2 example playing MPEG-DASH video with HolaCDN"
685 | [53]: http://hola.github.io/examples/cdn/#vjs5_shaka2 "VideoJS+Shaka v2 example playing MPEG-DASH video without HolaCDN"
686 | [54]: http://hola.github.io/examples/cdn/#vjs5_shaka2_cdn "VideoJS+Shaka v2 example playing MPEG-DASH video with HolaCDN"
687 | [55]: https://cdn.jsdelivr.net/hola_dash/2.1.0-3/dash.all.min.js "Right click > Save link as > dash.js"
688 | [56]: https://rawgit.com/hola/shaka-player/v2.0.8-hola/release/shaka-player.compiled.js "Right click > Save link as > Shaka player v2.0.8"
689 | [57]: https://rawgit.com/hola/shaka-player/v2.1.1-hola/release/shaka-player.compiled.js "Right click > Save link as > Shaka player v2.1.1"
690 | [58]: https://rawgit.com/hola/shaka-player/v2.3.3-hola/release/shaka-player.compiled.js "Right click > Save link as > Shaka player v2.3.3"
691 | 
692 | 


--------------------------------------------------------------------------------
/progressive_download.md:
--------------------------------------------------------------------------------
  1 | # Progressive download
  2 | 
  3 | **_This module is completly free for both non-commercial and commercial use._**
  4 | 
  5 | ## Hola CDN solution includes
  6 | * Free video analytics tool for your web-site 
  7 | * Free bandwidth saver solution for your player 
  8 | * Free [Hola player] (https://github.com/hola/player) (optional)
  9 | 
 10 | ## Table of contents
 11 | * [Test Hola CDN in less than 5 minutes](#TestHola)
 12 | * [Integrate free tool for your web-site](#FreeTool)
 13 | * [Server side configuration](#ServerConfig)
 14 | 
 15 | ## <a name="TestHola"></a>Test Hola CDN in less than 5 minutes
 16 | You can locally test the client side module quickly on your site, from the Chrome browser developer console.
 17 | 
 18 | #### Prerequisites
 19 | * Supported players: [Hola player] (https://github.com/hola/player), JWPlayer , VideoJS HTML5 players. 
 20 | * Supported browsers: Chrome (Win/Mac), IE 10, 11. Firefox support coming soon.
 21 | 
 22 | #### Flow
 23 | **Disable security**
 24 | * Exit Chrome and make sure no Chrome processes are running. 
 25 | * Temporarily launch Chrome with command line parameter `--disable-web-security`. For example:
 26 | 
 27 |   `"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security`.
 28 | 
 29 | Notes:
 30 | * The location of your chrome.exe might be different. 
 31 | * You can also edit the Chrome shortcut to include the parameter. 
 32 | * In Mac, launch Chrome from a terminal window.
 33 | 
 34 | **Launch developer console**
 35 | * Go to your website's video page and launch the developer console (F12), then click the console tab.
 36 | 
 37 | **Load Hola CDN**
 38 | * In console, enter `jQuery.getScript('http://client.h-cdn.com/loader.js')`.
 39 | 
 40 | **Init Hola CDN**
 41 | 
 42 | CDN init command varies according to the video player used:
 43 |   * For JWplayer 6+, VideoJS or Hola player, use `hola_cdn.init()`. 
 44 |   * For an old version of JWPlayer (V4,V5), use 
 45 | `hola_cdn.init({autostart: true, jwplayer_version: 'auto'})`
 46 |   * For Kernel player, use 
 47 | `hola_cdn.init({video_url: decodeURIComponent(flashvars.video_url), autostart: true})` 
 48 | 
 49 | **Play movie**
 50 | * Following the init command, the player will reload. Click play to start the video.
 51 | 
 52 | **Demo results**
 53 | * To verify that client module is working, pause the video and the progress buffer should stop after 30 seconds. You will also see the video never loads past 30 seconds from the viewing location. This saves significant bandwidth.
 54 | * You can also switch to the 'network' tab and verify that the video requested from the server in chunks and not as a single, large file.
 55 | 
 56 | Note: If you navigate to another video, you may need to reload the JS module. When embedding the script into your page, you will require to do so.
 57 | 
 58 | ## <a name="FreeTool"></a>Integrate free tool for your web-site
 59 | 
 60 | #### Static loading of client side module loader.js (preferred)
 61 | ```html
 62 | <script src="http://client.h-cdn.com/loader.js?customer=demo"></script>
 63 | ```
 64 | #### Dynamic loading of client side module loader.js with jQuery
 65 | ```js
 66 | jQuery.getScript('http://client.h-cdn.com/loader.js?customer=demo')
 67 | ```
 68 | followed by
 69 | ```js
 70 | hola_cdn.init()
 71 | ```
 72 | #### Dynamic loading of client side module loader.js without jQuery
 73 | ```js
 74 | var script = document.createElement('script');
 75 | script.src = '//client.h-cdn.com/loader.js?customer=demo';
 76 | script.type = 'text/javascript';
 77 | document.getElementsByTagName('head')[0].appendChild(script);
 78 |  ```
 79 | followed by
 80 | ```js
 81 | hola_cdn.init()
 82 | ```
 83 | 
 84 | Notes:
 85 | * It is strongly recommended to NOT to host a local copy of the JS, as this will prevent any updates/bug fixes from reaching you.
 86 | * Only load loader_demo.js once (either static or dynamic)
 87 | 
 88 | ## <a name="ServerConfig"></a>Server side configuration
 89 | 
 90 | In order to allow the client side module to send byte-range requests, please enable CORS on the HTTP server(s) that is serving the video files and verify response headers to MP4/FLV files from this server(s) include the following headers:
 91 | 
 92 | * Access-Control-Allow-Origin: *
 93 | * Access-Control-Allow-Methods: HEAD, GET, OPTIONS
 94 | * Access-Control-Expose-Headers: Content-Range, Date, Etag, X-Cache
 95 | * Access-Control-Allow-Headers: Content-Type, Origin, Accept, Range, Cache-Control
 96 | * Access-Control-Max-Age: 600
 97 | * Timing-Allow-Origin: *
 98 | 
 99 | For step by step instructions regarding how to enable CORS on different web servers, see the original [CORS documentation] (http://enable-cors.org/server.html). Make sure you add all the required headers, not just '*' referenced in the instructions.
100 | 
101 | #### Testing server headers
102 | ```curl -v -H "Origin: <site origin link>" -X OPTIONS -H "Access-Control-Request-Headers: range" <video link>```  
103 | Verify response:
104 | ```
105 | HTTP/1.1 200 OK
106 | Content-Length: 0
107 | Access-Control-Allow-Origin: *
108 | Access-Control-Allow-Methods: HEAD, GET, OPTIONS
109 | Access-Control-Expose-Headers: Content-Range, Date, Etag
110 | Access-Control-Allow-Headers: Content-Type, Origin, Accept, Range, Cache-Control
111 | Access-Control-Max-Age: 600
112 | Timing-Allow-Origin: *
113 | ```
114 | #### Using Amazon S3 
115 | 
116 | If you are using Amazon S3 to store videos, you should configure your bucket to allow cross-origin requests, you create a CORS configuration, an XML document with rules that identify the origins that you will allow to access your bucket, the operations (HTTP methods) will support for each origin, and other operation-specific information. You can add up to 100 rules to the configuration. You can add the XML document as the cors subresource to the bucket.
117 | 
118 | ```
119 | <CORSConfiguration>
120 |  <CORSRule>
121 |   <AllowedOrigin>*</AllowedOrigin>
122 |   <AllowedMethod>HEAD</AllowedMethod>
123 |   <AllowedMethod>GET</AllowedMethod>
124 |   <AllowedHeader>Content-Type</AllowedHeader>
125 |   <AllowedHeader>Origin</AllowedHeader>
126 |   <AllowedHeader>Accept</AllowedHeader>
127 |   <AllowedHeader>Range</AllowedHeader>
128 |   <AllowedHeader>Cache-Control</AllowedHeader>
129 |   <ExposeHeader>Content-Range</ExposeHeader>
130 |   <ExposeHeader>Date</ExposeHeader>
131 |   <ExposeHeader>Etag</ExposeHeader>
132 |   <MaxAgeSeconds>600</MaxAgeSeconds>
133 |  </CORSRule>
134 | </CORSConfiguration>
135 | ```
136 | 
137 | For step by step instructions regarding how to enable CORS on Amazon S3, see the [Amazon documentation] (http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html).
138 | 
139 | For any questions, please contact cdn-help@hola.org.
140 | 
141 | 


--------------------------------------------------------------------------------
/resources/Rule_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spark-mv/cdn/29f095fe488aec57e4307e31856a97afcf24b523/resources/Rule_1.png


--------------------------------------------------------------------------------
/resources/Rule_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spark-mv/cdn/29f095fe488aec57e4307e31856a97afcf24b523/resources/Rule_2.png


--------------------------------------------------------------------------------
/resources/canceled_error_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spark-mv/cdn/29f095fe488aec57e4307e31856a97afcf24b523/resources/canceled_error_1.png


--------------------------------------------------------------------------------
/resources/canceled_error_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spark-mv/cdn/29f095fe488aec57e4307e31856a97afcf24b523/resources/canceled_error_2.png


--------------------------------------------------------------------------------
/resources/clear_local_cache.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spark-mv/cdn/29f095fe488aec57e4307e31856a97afcf24b523/resources/clear_local_cache.png


--------------------------------------------------------------------------------
/resources/cors_howto.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spark-mv/cdn/29f095fe488aec57e4307e31856a97afcf24b523/resources/cors_howto.png


--------------------------------------------------------------------------------
/resources/debug_timeline.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spark-mv/cdn/29f095fe488aec57e4307e31856a97afcf24b523/resources/debug_timeline.png


--------------------------------------------------------------------------------
/resources/get_stats.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spark-mv/cdn/29f095fe488aec57e4307e31856a97afcf24b523/resources/get_stats.png


--------------------------------------------------------------------------------
/resources/recent_events.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spark-mv/cdn/29f095fe488aec57e4307e31856a97afcf24b523/resources/recent_events.png


--------------------------------------------------------------------------------
/resources/video_sources.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spark-mv/cdn/29f095fe488aec57e4307e31856a97afcf24b523/resources/video_sources.png


--------------------------------------------------------------------------------
/stats_install.md:
--------------------------------------------------------------------------------
 1 | # Free video analytics
 2 | 
 3 | Hola video analytics provide you with detailed statistics regarding what *really* matters - your end user's experience:
 4 | 
 5 | - What percent of my users click play, but never see a video?
 6 | - What are video start times?
 7 | - Do users experience buffering? When? Where?
 8 | - Is seeking smooth and reliable?
 9 | - And many other metrics...
10 | 
11 | ###Curious? Check out the [demo live dashboard] (https://holacdn.com/#dashboard) on our website.
12 | 
13 | Implementation should take only a few minutes. Follow the [step by step guide] (https://github.com/spark-mv/cdn/blob/master/install.md)
14 | 
15 | If you have any questions during implementation, please email cdn-help@hola.org or skype:holacdn.com
16 | 
17 | ## **_Hola video statistics are free for commercial & non-commercial use._**
18 | 


--------------------------------------------------------------------------------
/troubleshooting.md:
--------------------------------------------------------------------------------
  1 | # HolaCDN troubleshooting page
  2 | 
  3 | HolaCDN may generate warnings and errors to the browser's developer console. Search this page for the relevant error message to understand possible causes and solutions.
  4 | 
  5 | ## disabled no_browser_match
  6 | #### Possible causes
  7 | 1. HolaCDN is disabled on the server side for the browser you are using. This is the default starting configuration for all browsers, and is meant to prevent accidental mass deployments.
  8 | 
  9 | #### Solutions
 10 | 1. Define which browsers will be activated in each mode on the control panel.
 11 |   * Login to [your account] (http://holacdn.com/signin?utm_source=holaext) and go to the configuration section
 12 |   * Add the relevant browsers
 13 |   * Save your settings, which will take a few minutes to go into effect
 14 |   * Reload the page.
 15 |   * HolaCDN will load in one of three modes - disabled, stats or CDN - according to probabilities specified in the control panel.
 16 | 
 17 | ## disabled random
 18 | #### Possible causes
 19 | 1. This is actually **not an error message** - it simply means that the HolaCDN client was explicitly instructed by the server to be loaded in disabled mode. This will happen if the total of CDN + stats percentages in the control panel is under 100%. When the client loads, it receives instructions from the server regarding its mode of operation. If it falls in a percentage which not allocated to stats or CDN, it will load with status disabled_random. 
 20 | 
 21 | #### Solutions
 22 | 1. Ensure the total of CDN and statistics percentages adds up to 100% in the control panel.
 23 |   * Login to [your account] (http://holacdn.com/signin?utm_source=holaext) and go to the configuration section
 24 |   * Adjust CDN and stats percentages
 25 |   * Save your settings, which will take a few minutes to go into effect
 26 |   * Reload the page.
 27 |   * HolaCDN will load either in stats or CDN - according to probabilities specified in the control panel.
 28 | 
 29 | ## disabled browser_unsupported
 30 | #### Possible causes
 31 | 1. HolaCDN requires Media Source Extensions (MSE) to be enabled on the web browsr. Older versions of browsers which do not support MSE are not supported by HolaCDN. Here is the [full list of supported platforms] (http://holacdn.com/faq#compat-platforms).  
 32 | 
 33 | #### Solutions
 34 | 1. Use a supported browser
 35 | 
 36 | ## hola skip
 37 | #### Possible causes
 38 | 1. HolaCDN client cannot find sources for the given video URL, because no video sources are defined on the HolaCDN control panel. It is therefore skipped (played without HolaCDN).
 39 | 2. Malformed video URL: video URL passed on to the player must include the full domain name (e.g. 'example.com/video.mp4', and NOT '/video.mp4')
 40 | 
 41 | #### Solutions
 42 | 1. Define one or more video sources for the video. Note that the matching is done for the full domain.
 43 |   * Login to [your account] (http://holacdn.com/signin?utm_source=holaext)
 44 |   * Go to the configuration section and scroll down to the video zone source
 45 |   * Add one or more video sources
 46 |   * Save your settings, which will take a few minutes to go into effect
 47 |   * Reload the page.
 48 |   * The error should disappear and video will be downloaded from HolaCDN.
 49 | 2. Ensure the video URL passed on to the player includes the full domain name (e.g. 'example.com/video.mp4', and NOT '/video.mp4')
 50 | 
 51 | ## wrapper detached from player
 52 | #### Possible causes
 53 | 1. HolaCDN servers cannot download a copy of the video from your servers. The HolaCDN client therefore detaches from the player, and the video plays normally. 
 54 | 
 55 | #### Solutions
 56 | 1. Allow HolaCDN servers access to your CDN or origin servers. 
 57 |   * See additional information in the [setup instructions] (https://github.com/spark-mv/cdn/blob/master/install.md#2-allow-holacdn-to-download-content)
 58 |   * Go to the configuration section and scroll down to the video zone source
 59 |   * Add one or more video sources
 60 | 
 61 | ## Error 403
 62 | #### Possible causes
 63 | 1. Incorrectly configured CORS.
 64 | 2. Browser doesn't correctly manage persistent cache.
 65 | 
 66 | #### Solutions
 67 | 1. [CORS.md](Verify CORS configuration)
 68 | 2. Clearing browser's persistent cache.<br/>
 69 | Open your browser's Developer Tools and remove the relevant locally stored keys.
 70 | ![Clear persistent local cache](/resources/clear_local_cache.png)
 71 | 
 72 | ## Request canceled error
 73 | The following error type is expected and does not indicate HolaCDN is not working properly.
 74 | ![Canceled error example](/resources/canceled_error_2.png)
 75 | ![Canceled error example](/resources/canceled_error_1.png)
 76 | 
 77 | ## Statistics don't work / seeing only zone_init events
 78 | #### Possible causes
 79 | 1. Incorrect Video Source(s) configuration.
 80 | 
 81 | #### Solutions
 82 | 1. Set the Video Source(s) to specific sources your videos are coming from, or `*` for any location.
 83 | ![Video Source configuration](/resources/video_sources.png)
 84 | 
 85 | 
 86 | ## Reporting bugs
 87 | 
 88 | If after using the troubleshooiting guide above HolaCDN still doesn't work as you expect and you think you have found a bug, please report it to HolaCDN:
 89 | 
 90 | 1. In the developer console, enter ```hola_cdn.bug_report()```.
 91 | 2. Copy the URL that was generated by the command
 92 | 3. Send it to HolaCDN support.
 93 | 
 94 | ## More information
 95 | More information can be seen using your browser's console:
 96 | - hola_cdn.get_stats(): see CDN ativitity and currently collected statistics.
 97 | ![get_stats](/resources/get_stats.png)
 98 | 
 99 | - hola_cdn.debug_timeline(): see events timeline.
100 | ![get_stats](/resources/debug_timeline.png)
101 | 
102 | ## cdn is not attached
103 | 
104 | ## fallback error
105 | 
106 | ## Didn't find what you were looking for?
107 | Email us at cdn-help@hola.org, or skype: holacdn
108 | 


--------------------------------------------------------------------------------