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.
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.
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.
- a webpage (a) with Youtube video, hosted on a AWS S3 bucket
- a similar webpage (b) using a mp4 video, hosted in another AWS S3 bucket
- webpage (a) is accelerated by KeyCDN for Europe, and AWS CloudFront elsewhere
- webpage (b) is accelerated by ChinaChina for China and Japan
- 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
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.
Wish you a joyful weekend:)
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.
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
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.
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.
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 22.214.171.124 (a HolaCDN server).
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.
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.
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:
Want to try it yourself? Go to apply a HolaCDN free trial account now!
Hola is a Spanish word meaning Hello.
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:
- Significantly speeds up your video delivery (start time, buffering, seek time, bit rate, failure rate)
- Provides accurate statistics on your viewers’ quality of experience
- 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)
- Reduces video delivery cost substantially, with same low cost from first byte, to anywhere in the world
- Keeps your existing CDN – Hola will only participate where its faster and cheaper
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
Three steps. That’s all. No DNS change is required!
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.
Finally I use the famous Amazon Web Service. I use AWS Simple Storage Service (S3) to test something about online videos.
- Web server support of Cross-Origin Resource Sharing (CORS) is a common requirement for video players.
- 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”.
- 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.
- 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!
- Setting Up to Host a Static Website on AWS | AWS
- Enabling Cross-Origin Resource Sharing | AWS
- AWS S3 – No ‘Access-Control-Allow-Origin’ header is present on the requested resource | SO
- Choosing a Video Player: Features and Specs for the Top Five | streamingmedia.com
- FlowPlayer setup guide | Flowplayer
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.
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?
-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.
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.
PS: My CDN demo site demo.cheungwaikin.com will be under re-construction and not available between 26-Feb and 11-Mar.
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.
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.
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.