MistCDN enables low-cost, scalable delivery of your contents. Signup form here. https://console.mistcdn.com
This repository shows examples of MistCDN Applications. We welcome your pull requests.
You need to include MistCDN main script in your page in order to deliver contents via MistCDN. Place the row below in the <head> tag of your page.
<script src="//dist.mistcdn.com/mistcdn.min.js"></script>In order to play videos with Video.js, some javascript and CSS files have to be loaded. Two are for the Video.js main component, and the other is for Video.js plugins. Add few lines below in the <head> tag of your page.
<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.12/video.js"></script>
<script src="//dist.mistcdn.com/videojs-contrib/videojs.misthls.min.js"></script>Place the <video> tag below at the appropriate location on your <body> tag. A video player will be embedded there when viewed by end-user.
<video id="example_video_1" class="video-js vjs-default-skin"
width="1280" height="720" controls
data-setup='{}'>
<source src="https://example.net/path/to/playlist.m3u8"
type="application/x-mpegURL">
</video>If data-setup attribute of <video> tag is omitted, the auto setup process will not be executed. In such a case you have to initialize the player on your own.
<script type="text/javascript">
videojs('example_video_1');
</script>Default options object for video.js auto setup is shown below.
{
"techOrder": ["hls", "html5", "flash"],
"flash": {
"swf": "//vjs.zencdn.net/4.12/video-js.swf"
},
"width": 300, // width of video player
"height": 150 // height of video player
}!!!Notice!!!: Auto setup options which are passed to data-setup attribute of <video> tag have to be strict JSON format; all the keys and strings must be embraced by double quotations.
Coming soon
Coming soon. MistCDN supports Lazy Loading
Coming soon.