Supported Protocols
As an input for CDN streaming we support the following protocols and formats.
- Live streaming – live stream published over RTMP protocol and encoded with h.264 video codec and AAC or MP3 audio codec.
- Video on demand – MP4 and FLV video files encoded with h.264 video codec and AAC or MP3 audio codec.
As an accelerated CDN output we support the most common protocols.
Regular Streaming
- Real Time Streaming Protocol (RTSP) – for Android, Blackberry and other smartphones.
- Real Time Messaging Protocol (RTMP/RTMPE) – for Flash players like JW Player or Flowplayer.
- MPEG transport stream (MPEG-TS) – for IPTV set-top boxes.
HTTP Streaming
- Apple HTTP Live Streaming (HLS) – for Apple iOS, OS X and QuickTime player.
- Microsoft Smooth Streaming – for Windows Phone 7 and Silverlight players.
- Adobe HTTP Dynamic Streaming (HDS) – for Flash players like JW Player or Flowplayer.
Please refer to Supported streaming protocols and formats for more details.
As you know you can’t play RTMP on iOS, HLS on Android, RTSP on Desktop, etc. So it is far from being simple and developer-friendly. One would like to have one URL playable on all devices, but unfortunately the situation is more complicated. If you are wondering why it is so complicated note that it is probably part of business strategy of Apple, Google (Android), Adobe, Microsoft, etc. that they don’t support competitor’s protocols and formats.
How Can I Stream on All Devices?
As we support all the most common formats “the only thing” you need to do is to detect viewer’s device and then offer your stream in an appropriate format.
Note that you have two possibilities how to play your stream.
- Flash – integrate Flash player like JW Player or Flowplayer. This approach is mostly used on Desktops as Flash is not supported on iOS and Android.
- HTML5 – integrate native HTML5 player using video tag. Note that also some players like JW Player or Flowplayer are able to switch from Flash to HTML5 mode. An example of HTML5 video tag follows. Please refer to HTML <video> Tag for more details.
<video width="320" height="240" src="http://video.cdnsun.net/263055143/_definst_/mystream.m3u8" controls> Your browser does not support the video tag. </video>
To detect viewer’s device you can make us of the following JavaScript. Please refer to Services/How-To in the CDNsun UI for more details.
DeviceDetection = function ()
{
this.construct = function (userAgent) {
"undefined" == typeof userAgent && (userAgent = navigator.userAgent);
this.userAgent = userAgent;
this.checks = {
iphone: Boolean(userAgent.match(/iPhone/)),
ipod: Boolean(userAgent.match(/iPod/)),
ipad: Boolean(userAgent.match(/iPad/)),
blackberry: Boolean(userAgent.match(/BlackBerry/)),
playbook: Boolean(userAgent.match(/PlayBook/)),
android: Boolean(userAgent.match(/Android/)),
macOS: Boolean(userAgent.match(/Mac OS X/)),
win: Boolean(userAgent.match(/Windows/)),
mac: Boolean(userAgent.match(/Macintosh/)),
wphone: Boolean(userAgent.match(/(Windows Phone OS|Windows CE|Windows Mobile)/)),
mobile: Boolean(userAgent.match(/Mobile/)),
androidTablet: Boolean(userAgent.match(/(GT-P1000|SGH-T849|SHW-M180S)/)),
tabletPc: Boolean(userAgent.match(/Tablet PC/)),
palmDevice: Boolean(userAgent.match(/(PalmOS|PalmSource| Pre\/)/)),
kindle: Boolean(userAgent.match(/(Kindle)/)),
otherMobileHints: Boolean(userAgent.match(/(Opera Mini|IEMobile|SonyEricsson|smartphone)/))
}
};
this.isTouchDevice = function () {
return this.checks.iphone || this.checks.ipod || this.checks.ipad
};
this.isApple = function () {
return this.checks.iphone || this.checks.ipod || this.checks.ipad || this.checks.macOS || this.checks.mac
};
this.isIOS = function () {
return this.checks.iphone || this.checks.ipod || this.checks.ipad
};
this.isBlackberry = function () {
return this.checks.blackberry
};
this.isAndroid = function () {
return this.checks.android
};
this.isTablet = function () {
return this.checks.ipad || this.checks.tabletPc || this.checks.playbook || this.checks.androidTablet || this.checks.kindle
};
this.isDesktop = function () {
return !this.isTouchDevice() && !this.isSmartPhone() && !this.isTablet()
};
this.isSmartPhone = function () {
return (this.checks.mobile || this.checks.blackberry || this.checks.palmDevice || this.checks.otherMobileHints) && !this.isTablet() && !this.checks.ipod
};
this.construct();
return this
};
Now we put the device detection together with the streaming formats. Please kindly use our simple media wrapper below and refer to Services/How-To in the CDNsun UI for more details.
PlayLiveStreamOnDesktop = function (params)
{
jwplayer(params.container_id).setup({
'file': 'rtmp://' + params.service_identifier + '.r.cdnsun.net/' + params.service_identifier + '/_definst_/' + params.stream_name,
'width': params.width,
'height': params.height,
});
}
PlayLiveStreamOnIOS = function (params)
{
$('#' + params.container_id).html($('<video/>', {
'src': 'http://' + params.service_identifier + '.r.cdnsun.net/' + params.service_identifier + '/_definst_/' + params.stream_name + 'https://blog-cdnsun.r.worldssl.net/playlist.m3u8',
'style': 'width: ' + params.width + 'px; height: ' + params.height + 'px; display: block;',
'text': 'Your browser does not support the video tag.' ,
'controls': true
}));
}
PlayLiveStreamOnAndroid = function (params)
{
$('#' + params.container_id).html($('<a/>', {
'src': 'rtsp://' + params.service_identifier + '.r.cdnsun.net/' + params.service_identifier + '/_definst_/' + params.stream_name,
'style': 'width: ' + params.width + 'px; height: ' + params.height + 'px; display: block;',
'text': 'Your browser does not support the video tag.',
'controls': true
}));
}
PlayVideoOnDesktop = function (params)
{
jwplayer(params.container_id).setup({
'file': 'rtmp://' + params.service_identifier + '.r.cdnsun.net/' + params.service_identifier + '/_definst_/' + params.video_format + ':' + params.service_identifier + '/' + params.video_filename,
'width': params.width,
'height': params.height
});
}
PlayVideoOnIOS = function (params)
{
$('#' + params.container_id).html($('<video/>', {
'src': 'http://' + params.service_identifier + '.r.cdnsun.net/' + params.service_identifier + '/_definst_/' + params.video_format + ':' + params.service_identifier + '/' + params.video_filename + 'https://blog-cdnsun.r.worldssl.net/playlist.m3u8',
'style': 'width: ' + params.width + 'px; height: ' + params.height + 'px; display: block;',
'text': 'Your browser does not support the video tag.',
'controls': true
}));
}
PlayVideoOnAndroid = function (params)
{
$('#' + params.container_id).html($('<video/>', {
'src': 'rtsp://' + params.service_identifier + '.r.cdnsun.net/' + params.service_identifier + '/_definst_/' + params.video_format + ':' + params.service_identifier + '/' + params.video_filename,
'style': 'width: ' + params.width + 'px; height: ' + params.height + 'px; display: block;',
'text': 'Your browser does not support the video tag.',
'controls': true
}));
}
CDNsunLiveStreamWrapper = function (params)
{
detection = DeviceDetection();
if(detection.isDesktop)
{
PlayLiveStreamOnDesktop(params);
}
else if(detection.isIOS())
{
PlayLiveStreamOnIOS(params);
}
else if(detection.isAndroid())
{
PlayLiveStreamOnAndroid(params);
}
else
{
alert('Unsupported device');
}
}
CDNsunVideoWrapper = function (params)
{
detection = DeviceDetection();
if(detection.isDesktop)
{
PlayVideoOnDesktop(params);
}
else if(detection.isIOS())
{
PlayVideoOnIOS(params);
}
else if(detection.isAndroid())
{
PlayVideoOnAndroid(params);
}
else
{
alert('Unsupported device');
}
}
Note the two wrapping functions CDNsunLiveStreamWrapper and CDNsunVideoWrapper above. They both integrate JW Player on Desktops and HTML5 native player using video tag on iOSes and Androids.
Finally the usage of the wrapping functions is as follows.
<div id="mediaplayer"></div>
<script type="text/javascript">
$(document).ready(function(){
CDNsunLiveStreamWrapper({
'container_id': "mediaplayer",
'service_identifier': 26305514,
'stream_name': 'mystream',
'width': 320,
'height': 240
});
});
</script>
The above approach will play your stream on all devices. Please refer to Services/How-To in the CDNsun UI for more details.
Sincerely your CDNsun team.