iPhone 7 is gorgeous. Hong Kong Victoria Harbour too.

iphone-7

The iPhone 7 is gorgeous. At the end of “Introducing iPhone 7” video, there is a another gorgeous scene – the Hong Kong Victoria Harbour. There are similar scenes in other iPhone ad…

iPhone 7 ad – Introducing iPhone 7 (2min 6sec)

iPhone 6s ad – The Only Thing That’s Changed Is… (56sec)

iPhone 5 ad – Music Every Day (58sec)

Bokeh.

iphone-5

Bokeh.

散景即是「Bokeh」,這個字一字源於日本,解作「糢糊」;而在攝影術語當中,我們就稱之為照片中失焦的地方,即是「散景」。


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.


Shalom Israel! HKG-TLV-HKG

Shalom is a Herbrew word meaing peace, armony, wholeness, completeness, prosperity, welfare and tranquility and can be used idiomatically to mean both hello and goodbye.

I visited Israel recently. My first time in Canaan, the Promised Land.

The distance between Hong Kong and Israel is 7764km, almost one-third of the Equator length. It is lucky that there is direct flight between Hong Kong (HKG) and Tel Aviv Yafo (TLV), Israel. EL AL Israel Airline operates the direct flights from Sunday to Thursday. I guess due to Sabbath (Friday 6pm to Saturday 6pm) there is no flight on Fri and Sat. HKG-to-TLV is about 12hr 30min, TLV-to-HKG is 11hr! Long flights!

Passengers should arrive the boarding gate at Hong Kong International Airport one hour before the departure time. EL AL will do security check of hand carry baggage again at the boarding gate and the process is about 20 to 30 minutes. One should arrive Ben Gurion International Airport two hours before departure time. There is security check of hand carry baggage at the custom and it will also take 20 to 30 minutes. Keep hand carry baggage minimal!

Israel area is about 20,770 square kilometers (21 times that of HK) and the population is 8.4m (while HK is 7.4m). 75% are Jewish and 20% are Arab. The electricity plug in Israel is Type C (CEE 7/16 “Europlug”). It is better to bring a plug adaptor if you travel to Netanya. It is not easy to get an adaptor in hotel or buy one in shopping area.

Hola! is a startup based in Netanya. Mission: to make the Internet more Open, more Transparent, and Faster!

Hola! is a startup based in Netanya. Mission: to make the Internet more Open, more Transparent, and Faster!

I spend most of the time in Netanya. There are many technology companies. Cisco and Microsoft have huge campus there. There are many ambitious and energetic startups as well.

Beach at Netanya

Beach at Netanya

Netanya is a beautiful city. There are great beaches and many surfers! Mostly sunny day. Bright blue sky, white sand, navy blue Mediterranean Sea. Apartments are built with large balconies. Enjoy the sunshine and the breeze!

Apartments with large balconies at Netanya

Apartments with large balconies at Netanya

I was lucky to have a Tel Aviv leisure trip by end of the trip. Tel Aviv Is the major commercial centre in IsraeI and a popular travel destination. It took me about 30min by taxi from Netanya to Tel Aviv.  I visited the Sarona Market area in the morning. There are many old German-style buildings. They are turned into shops, boutiques and designer stores. (Sound familiar? Xintiandi in Shanghai!) I bought some very nice Hamsa there!

The old German style building in the Sarona Market area are turned in different kind of shops.

The old German style buildings in the Sarona Market area are turned in different kind of shops.

I had Hummus as lunch. Falafel and Turkish coffee too.

Hummus. Delicious.

Hummus. Delicious.

I visited Jaffa area in the afternoon. Jaffa, with many thousand years of history, is one of the oldest port in the world!  The area was called Joppa in the past. Jaffa is famous for its association with the biblical stories of Jonah and Saint Peter.

Saint Peter's Church, located Jaffa area of Tel Aviv. Built in 1645.

Saint Peter’s Church, located Jaffa area of Tel Aviv. Built in 1645.

I wondered how difficult and dangerous it was for Saint Peter and other disciples to spread Jesus’ teaching under the Jewish and Roman persecutions. I was in the place where all these were happening nearby two thousand year ago. Thank God.

Saint Peter’s Church interior

Saint Peter’s Church interior

“Go therefore and make disciples of all nations, baptizing them in the name of the Father and of the Son and of the Holy Spirit, teaching them to observe all that I have commanded you. And behold, I am with you always, to the end of the age.”
Matthew 28:19-20


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.


Hello 2016!

Hello 2016.

It is a busy January. I did some long distance travels.

I traveled to US early this month. Didn’t fly Delta for sometime. It was a surprise to me there was in-flight WiFi Internet access service. It costed me US$29.95 (before VAT) for WiFI service during the flight. It was operated by Gogo. There were some restrictions using the service, such as no VoIP and no video streaming. Plane is connected to Internet via satellites. The physical distance that electronic signal travels is long and hence the latency is long too. It is VERY LONG. And because of the long latency and limited bandwidth, it takes a lot of time to download files. It is VERY SLOW. It is fine for text-based instant messaging thought. With all the slowness and restrictions, it was still very amazing that I could search and text with friends via the Internet when I was 10000 feet (~= 3048m) above the earth!

The in-flight entertainment was good. Watched the 150-min movie Everest. Because of the fast-changing extreme weather, it is possible to reach the Earth’s highest place only on a few days a year. And hence the mountain is full of climbers on those few days! Amazing there is traffic congestion at 8848m!

Also watched a 15-min TED talk “Psychology myths”. Ben Ambridge talks through 10 popular ideas about psychology that have been proven wrong. Is it true that a normal person uses only 10% of its brain power?

 

Uber

Used Uber many times this trip. Convenient, Fast and Cheap! It really made a difference!  By the way, there is a good Exponent podcast (episode #063) about how Uber’s transportation-as-a-service is going to change the world!

channel team

It is great to see and communication with colleagues in person. Internet tools are great. But a handshake or a hug is even better! Happy New Year!