Make your embed Youtube video works in China

Objective:
To make your website videos great again.

A Forbes article says video is of the seven important areas which can improvement a website user experience and engagement.

Many companies agree and add Youtube videos to their websites. Why Youtube? No cost, easy to use (to embed videos in webpage) and easy to consume (to watch and to share, from enduser perspective). Besides some other downsides, one major challenge of using YouTube video on your corporate website is that YouTube is blocked in some countries (China, for example). So you neither can tell your story using Youtube nor you provide a good UX to all users.

Broken Youtube video

It is not unusual to see broken content… it is not great:(

Solution:
Even Google cannot make Youtube works in China. I cannot too. What I am trying to do is to add user location-awareness to the website. To make a website to show different content to users in different locations.

I Cloud can do all things. I am going to use different cloud services to demonstrate the solution.
The key element is a DNS service with Geolocation Routing capability, such as Verizon Route and AWS Route 53. There is one hostname an and URL only. No need to remember xxx.com, xxx.com.cn, xxx.com.jp, etc.
cdn.53.cheungwaikin.com/video.html

 

Geolocation Routing lets you choose the resources that serve your traffic based on the geographic location of your users, meaning the location from which DNS queries originate.

 

Demo setup:

  1. a webpage (a) with Youtube video, hosted on a AWS S3 bucket
  2. a similar webpage (b) using a mp4 video, hosted in another AWS S3 bucket
  3. webpage (a) is accelerated by KeyCDN for Europe, and AWS CloudFront elsewhere
  4. webpage (b) is accelerated by ChinaChina for China and Japan
  5. AWS Route 53 is configured to resolve the hostname cdn.53.cheungwaikin.com to
    • ChinaCache CDN URL for users located in China or Japan
    • KeyCDN CDN URL for user located in Europe
    • CloudFront CDN URL for user elsewhere
AWS Route 53 Geolocation Routing setup

AWS Route 53 Geolocation Routing setup

Verification:
We will use VPN service such as VyprVPN or Hola!VPN to connect to different locations and then browse cdn.53.cheungwaikin.com/video.html and see what content we get. Below video showing that I received the webpage (a) (with embed Youtube video), then I got the webpage (b) when I was using Hola!VPN to connect to Japan.

Cool?

Wish you a joyful weekend:)

Advertisements

Transcend JetDrive Go 500 Review

My two use cases for a Flash Drive with BOTH Apple Lightning and USB Type-A ports:
-to transfer file from iPhone to notebook or desktop computers (esp. Windows machines)
-to copy videos/photos from iPhone and to view them on iPad

I travelled to Jiuzhaigou recently. I bought my iPhone and iPad. I believed my iPhone could meet almost my needs but iPad would do a better job for viewing photos. A lot of photos.

img_0599

Arrow Bamboo Lake, Jiuzhaigou, Sichuan, China

img_0750

Five Flower Lake, Jiuzhaigou, Sichuan, China

img_0877

Reed Lake, Jiuzhaigou, Sichuan, China

My iPhone could meet almost all my needs. However I had to print out some travel document on physical paper during the trip. I expected there were Windows PCs with printers for guest use at the hotels. I was not sure the PCs could access cloud storage like Dropbox. I needed a means to easily transfer a pdf document made on my iPhone to the hotel PC – a flash drive with both Apple Lightning and USB TYPE-A interfaces.

I did bought this kind of flash drive two years ago. The objective was to offload photo storage usage from iPhone. It did not work since last year! iOS 9 or later devices cannot detect the drive! It was an expensive gadget and I expected it works for two or more years! It was a unpleasant experience. Dual-port flash drive was a new gadget category at that time and there were not many options. This category is more mature now and we have more choices. My current selection criteria are
1.Apple MFI certified
2.supports USB 3.0
3.physical design with extended lightning connector (for easy plug-in when there is iPhone case)
4.a good iOS app which supports common document formats (pdf, docx, pptx and xlsx, etc.) as well as photo and video. Because of iOS restriction, we need a dedicated app to use the physical flash drive. Lightning flash drive is a two-component product!
5.supports both iPhone and iPad
6.made by company with sound reputation of reliable products
7.good customer reviews/feedbacks

These are my first round selections:
SanDisk iXpand Flash Drive
Lexar JumpDrive C20i
Ravpower iPhone Lightning Flash Drive USB 3.0
Transcend JetDrive Go 500

Based user reviews, SanDisk iXpand and Lexar JumpDrive do not support formats other than photo and video! Both Lexar and Ravpower can be used as charging cables which are useful! However they are a little bit bulky. I wonder if the rubber portions are durable.

Finally I bought a 32GB JetDrive Go 500. It meets all my criteria! It is small, light and tough. The case is made of zinc alloy. There is no moving part. Very handy to carry.

transcend-jetdrive-go-vs-airpod

Transcend JetDrive Go 500 is small than AirPod and one gram heavier.

I have been using it for almost a month. It is fast and reliable. Below is a highlight of its spec:
– Ports: one lightning and one USB 3.1 Gen 1 Type A
– Maximum data transfer rate: lightning at 20MB/s and USB at 130MB/s
– Dimension: 36.55mm x 14.3mm x 9.01mm
– Weight: 5g
– Warranty: 2-year
– iOS app: JetDrive Go. The app will prompt you asking for your permission to launch the app to access the device when you plug it in your iPhone or iPad.

There is an informative review on appleapple.top. Below is another good review, by Tony Mauro Ruiz, on YouTube:

I wish the iOS app will support AirPlay soon.

I will recommend this device to if you have use cases similar to mine. Transcend is a well known Taiwan manufacturer, found in 1988, focusing computer memory and storage products. Transcend products in general are good in terms of performance, industrial design, software, quality control and customer service. Its products work reliably for years! Transcend JetDrive Lite, launched in 2014, is a very popular storage solution for MacBook Air and MacBook Pro (mid-2016 and before).

I hope you find this review useful.


How to use HolaCDN to load share from multiCDN

In my previous post I showed how to use HolaCDN to improve the performance of a mp4 video which is already accelerated using CDN service.

This time I would like to show how to use HolaCDN MultiCDN feature to improve the performance of a multi-birate HLS video. HolaCDN MultiCDN will automatically measure performance of multiples CDNs (defined by user) and select the optimal CDN to use.

In this demo, HolaCDN will select among the customer origin, a 3rd party CDN and HolaCDN.

In the screen capture below, Chrome Developer Tools shows the HolaCDN JS client loads video chunks from serveral hosts: s3video.cheungwaikin.com (customer origin), dc7tqspqe5l18.cloudfront.net (a 3rd party CDN) and 76.73.18.98 (a HolaCDN server).

chrome-network

The following picture shows the result generated by the command hola_cdn.get_stats() in the Chrome Develop Tools Console: 20% of traffic is from the customer origin, 18% from the 3rd party CDN, and the remaining is from HolaCDN.

chrome-console.png

How to set up HolaCDN MultCDN feature in this demo?
Step 1: create a new Zone named “hlsmulti” by defining the Page URL as http://aws.cheungwaikin.com/video-hls-flowplayer-cloudfront-hola-origin.html.

Step 2: in the MultiCDN selection algorithm, I input the $0.5 as the cost of HolaCDN and $0.05 as the cost of “My existing CDN”. Doing so to instruct HolaCDN to use My existing CDN unless HolaCDN improve performance (better video start/seek time, less buffering, higher video quality/bitrate).

Step 3: for demo purpose, HolaCDN will take actions – collects QoE statistics and deliver video content – if the user is using Chrome browser. For every 100 pageviews from Chrome users, all will colllect QoE statistics, and HolaCDN will try to deliver video content in 90 pageviews.

Step 4: define “My existing CDN”. In this demo, the are two “CDNs” – dc7tqspqe5l18.cloudfront.net and s3video.cheungwaikin.com.

Step 5: I use Static MultiCDN switching mode. If HolaCDN finds dc7tqspqe5l18.cloudfront.net and s3video.cheungwaikin.com perform better than HolaCDN, then 50% possibility that video will be retrieved from dc7tqspqe5l18.cloudfront.net and 50% possibility that video will be loaded from s3video.cheungwaikin.com.

holacdn-conf.png

That’s all.

In other to do a control experiment, I use Firefox to browse the demo page. Based on my setup, HolaCDN will do nothing and the browser will get all HLS TS chunks from the host defined in the html source code. Here is the result from Firefox + Firebug:

firefox-net.png

Want to try it yourself? Go to apply a HolaCDN free trial account now!


How to use Hola!CDN for MP4 progressive download

Hola is a Spanish word meaning Hello.

Hola! is a startup headquartered in Netanya, Israel. Hola!’s goal is to make the web faster, more open and cheaper to operate.

Hola!CDN is the first CDN purpose built for video. It is developed and operated by Hola!. Hola!CDN makes Internet video delivery Faster, Cheaper and More Reliable.

It is my pleasure to share with readers that I am now working at Hola!CDN!

In my last blogpost I talked my first Israel visit. The main objective of the trip was to attend Hola!CDN training.

The unique Hola!CDN architecture makes it possible to do Five things that other CDNs cannot do:

  1. Significantly speeds up your video delivery (start time, buffering, seek time, bit rate, failure rate)
  2. Provides accurate statistics on your viewers’ quality of experience
  3. Enables mid stream switching of multiple CDNs (configure Hola!CDN’s dashboard to work with several CDNs, taking each video chunk from the fastest and cheapest)
  4. Reduces video delivery cost substantially, with same low cost from first byte, to anywhere in the world
  5. Keeps your existing CDN – Hola will only participate where its faster and cheaper

The new architecture is comprised of a client side JavaScript code that manages the video delivery from the viewers’ browser. The integration of the Hola!CDN client side module with the Hola!CDN server module creates a fast, seamless user experience, and a low cost of delivery.

Detail Hola!CDN implementation guide can found at GitHub:  https://github.com/hola/cdn/blob/master/install.md

In this blogpost I would like to SHOW how to implement Hola!CDN in a webpage with MP4 progressive download.

Step 1: apply a Hola!CDN account account. We offer 14-day free trial account at holacdn.com

Step 2: configure Hola!CDN service. The minimum step is to add your Video Source(s). Video Source is the hostname of the CDN or customer origin that your video is cached/stored.

Hola!CDN customer portal

Hola!CDN customer portal

Step 3:  insert the codes in the header section to instruct the browser to downland the Hola!CDN JavaScript client with your specific configuration, and insert another codes at the end of the body section to instruct the browser to download the Hola!CDN JavaScript client asynchronously

HTML codes to implement Hola!CDN

HTML codes to implement Hola!CDN

Three steps. That’s all. No DNS change is required!

 

Below is the screen shot of Chrome DevTools of the original page:

Chrom DevTools of original page

Chrome DevTools of original page

This is the screen shot of Chrome DevTools of the page implemented Hola!CDN:

Chrome DevTools of the page implemented Hola!CDN

Chrome DevTools of the page implemented Hola!CDN

There are 6 HTTP requests in the original page and 65 in the page implemented Hola!CDN. Why?

Let’s talk more next time.


How to use AWS S3 as Customer Origin for HLS videos

Hello AWS!

Finally I use the famous Amazon Web Service. I use AWS Simple Storage Service (S3) to test something about online videos.

Why AWS?

  1. Web server support of Cross-Origin Resource Sharing (CORS) is a common requirement for video players.
  2. AWS is a popular platform. I don’t know how to set up Cross Origin Resource Sharing (CORS) on my existing hosting provider GoDaddy. While there are more Google results about “AWS S3 CORS”.
  3. AWS offers free trial. Many AWS services are free at low volume usages. S3 is free is usage is less than 5GB & 20000 Get Request & 2000 Put Request per month.
  4. GoDaddy becomes more difficult to use. GUI becomes more chaotic and slow!

There are many motivations for me to use AWS. The remaining question is learning curve. I spend sometime of the recent Chinese New Year holidays studying how to use AWS as customer origin for HLS videos. It was quite easy and interesting to learn and use AWS.

And now I am thinking to move my demo sites demo.cheungwaikin.com from GoDaddy to AWS!

Lesson learnt: cloud service provider should provide user-friendly support information and free trial to help people to become its users.

Since HLS is not supported by many desktop browsers, I need to use a video player to help desktop users to view my testing HLS videos. I pick Flowplayer because there is good support information (adequate and useful for me) and it is free (again)!

I created two S3 buckets, one for html files and one for video content. Serve-side CORS support is required by Flowplayer. I used the suggestions from an AWS doc and a StackOverflow discussion (see the online resources below). I verified Access-Control-Allow-Origin response header was returned by AWS S3 by the command curl -sI -H "Origin: http://aws.cheungwaikin.com" -H "Access-Control-Request-Method: GET" s3video.cheungwaikin.com

Below was the command output:

HTTP/1.1 200 OK
x-amz-id-2: ufXH6929lMlXDveTkzj1IDPW1Q1q0/LtW/joHnui0LBM7l0TQ/hNQ59+0mxLUPGjPoBqyxBcopg=
x-amz-request-id: 37DE725CA5A9B471
Date: Sat, 20 Feb 2016 18:32:20 GMT
Access-Control-Allow-Origin: http://aws.cheungwaikin.com
Access-Control-Allow-Methods: HEAD, GET
Access-Control-Expose-Headers: Content-Range, Date, Etag
Access-Control-Max-Age: 600
Access-Control-Allow-Credentials: true
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Last-Modified: Sat, 20 Feb 2016 18:31:34 GMT
ETag: "53252b004b38563c1afdd13a3647b7fa"
Content-Type: text/html
Content-Length: 581
Server: AmazonS3

Moreover, I wrote a simple crossdomain.xml file suggested by FlowPlayer, uploaded it to the video content bucket. With all these, my new testing site aws.cheungwaikin.com is now up and running! I use iPhone, Android 5+ device and MacBook (Safari, Chrome and Firefox) to check browser compatibility.

I am not going to re-invent the wheel. Please find below the online resources I find very useful about how to use AWS S3 as customer origin for HLS videos!

Shalom! Wish you have a great Friday evening!

PS: My CDN demo site demo.cheungwaikin.com will be under re-construction and not available between 26-Feb and 11-Mar.


Hi Year of Monkey! Hi MSE!

Gong Xi Fa Cai! Wish everyone has a happy and healthy Year of Monkey.

It is the fifth day of the new Chinese New Year. It is time to write something new.

I am studying Media Source Extensions (MSE) recently. In a nutshell, MSE enables browsers to play streaming media without plugins.

What is MSE?
-W3C: MSE is a W3C specification that allows JavaScript to send byte streams to media codecs within web browsers that support HTML5 video. The first public draft was released in Jan 2013. Among other possible uses, this allows the implementation of client-side prefetching and buffering code for streaming media entirely in JavaScript.

-Microsoft: build custom adaptive streaming solutions using MSE. Such an adaptive streaming solution would look for the optimal bit rate based on network bandwidth and CPU utilisation to provide the highest quality streaming experience. For example, if the network bandwidth drops, you can use MSE to programmatically switch the video stream to a lower bit rate. This reduces the quality of the image, but allows the video to keep playing without interruptions.

-Netflix: This makes it possible for Netflix to download audio and video content from our content delivery networks and feed it into the video tag for playback. Since we can control how to download the audio/video content in our JavaScript code, we can choose the best HTTP server to use for content delivery based on real-time information, and we can implement critical behaviour like failing over to alternate servers in the event of an interruption in content delivery. In addition, this allows us to implement our industry-leading adaptive streaming algorithms (real-time selection of audio/video bitrates based on available bandwidth and other factors) in our JavaScript code. Perhaps best of all, we can iterate on and improve our content delivery and adaptive streaming algorithms in JavaScript as our business needs change and as we continue to experiment.

More and more video providers are moving away from browser plug-ins to MSE. Youtube and BBC are two examples.

Not all browsers are created equal. At the moment Chrome v34 (both desktop Android 4.4+ versions) and IE 11 on Windows 8 are the best browsers supporting MSE.

Safari on iOS does not support MSE.

Maybe I need an Android tablet.

Ref:
HTML5 Video at Netflix | Netflix

The Current State of Media Source Extensions | Wowza

The State of HTML5 Video | JW Player

How to Build a Streaming HTML5 Video Player | streamingmedia.com

PS: My CDN demo site demo.cheungwaikin.com will be under re-construction and not available between 26-Feb and 11-Mar.


CDN video: HLS performance measurement

HTTP Live Streaming

The recent Devoncroft’s 2013 Big Broadcast Survey (BBS) shows multi-platform content delivery is the most important trend considered by the broadcast industry. It is not a surprising news when we review how much time we spend viewing videos on non-TV devices.

Video streaming on iOS devices is supported by HLS (HTTP Live Streaming). HLS democratises video streaming: everyone can now easily stream adaptive bit-rate videos to iOS devices by using a low cost HTTP servers.

In comparison, it is much more challenging to stream videos to other mobile platforms. Here is a good reference article from LongTail: The Pain of Live Streaming on Android

We can easily stream videos to iOS devices. How do we measure the video performance? How do we validate HLS videos delivered from CDN are much better than those from customer origin? Which adaptive bit-rate video stream in my demo page – HLS Performance Measurement – provides better experience?

HLS Performance Measurement by PocketProbe

Rather than subjective measurement by our eyes (目測法), PocketProbe Free from Bridge Technologies provides an objective measurement of HLS video experience.

PocketProbe

I did some PocketProbe tests around 12:30pm 20130626 HKT. Left is the test result of stream from customer origin (CO) and right is from CDN respectively.

PocketProbe test results

Analysis:
1.CDN stream was delivered more frequently at higher speed than the CO stream.
2.CDN stream was retrieved much faster than CO stream.
3.CDN stream was delivered constantly at the highest bit-rate while CO stream switched to lower bit-rates during the delivery.

We can SEE the CDN stream picture resolution and quality are better too.

iOS a great platform for video streaming. PocketProbe is a cool app for video streaming performance measurement.

Easy. Low cost.