Online videos are a big thing now, but serving them isn't all that easy. The file size can get quite big and you will very quickly reach the bandwidth limits of your hosting providers. Another huge problem with it is that video files are quite big and require a good connection to ensure a smooth playback for your users. This is especially apparent when your users come from all over the world.
To battle this problem, we have included live streaming video support in BunnyCDN that allows you to include a seekable video stream on your site. It's not only incredibly easy to set up, but very cost effective as well, since the video is streamed from our servers and you will not overload your web hosting.
Step 1: Create your pull zone
First thing first, you need to create your pull zone. To do this, simply go to your BunnyCDN control panel, enter the name of the pull zone and enter the URL of your blog as the Origin URL. For a more advanced info check out How To Create Your First Pull Zone
Step 2: Encode your videos
Before you start uploading your videos, you need to encode the video into a seekable MP4 format that the majority of the browsers will support. You can also change the quality of the video to an optimal bitrate that won't force a buffering message to your users. To do this, you can use a free but incredibly powerful software called Handbrake: https://handbrake.fr/
First, select a video file source and destination and make sure to click the Web Optimized checkbox.
Now you can fiddle with the various encoding options on the bottom panels, or simply use one of the presets from the box on the right.
Finally, simply click on the Start button and wait for the conversion to finish.
Step 3: Upload your videos
After the video has finished converting, it's time to upload it to your file hosting service that you have set in step 1. You can use a FTP client or some other type of file manager, depending on the type of hosting you have.
Step 4: Add a HTML5 video player to your website
You're now ready to roll. The only thing left is to actually include the uploaded video into your website. Thanks to HTML5 and the new video HTML tag, this is now easier than ever without any need for any external plugins.
Additionally, there are a couple of really cool already made video players out there. One such example is VideoJS. It's a free open source library and it's incredibly easy to use, with plenty of features and it looks nice as well.
You can check it out at: http://www.videojs.com/
To use VideoJS you must include the following script in the <head></head> section of the website where the video will be included:
<link href="//vjs.zencdn.net/4.1/video-js.css" rel="stylesheet"> <script src="//vjs.zencdn.net/4.1/video.js"></script> Now you can simply add the video code as following:
<video id="my_vid_id" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="poster.png" data-setup='{}'> <source src="http://bunnyspeed-video.b-cdn.net/tokyo_trip_web.mp4" type='video/mp4' /> <track kind="captions" src="captions.vtt" srclang="en" label="English" /> </video> Make sure to replace the video source url with your own and that's it. When you open the website, the video should now start playing. Yay!
Final note
In order for the video seeking option to start working BunnyCDN first needs to cache the full video file. This might take up to a couple of minutes, depending on the file size and the speed of your origin file hosting. After that, you're all set.
Alert: For Control Panel Help & Tutorials, click here: Panel Tutorials
