I want to show a video on my website?
There are two ways:
1. Upload it on a video hosting site and use the embed URL
2. Use your own js player and source it from a streaming server
So what is a streaming server?
There are various protocols for streaming. RTSP kind of proprietary from Adobe has ruled the world with flash players. But now we are moving back to HTTP.
In streaming what is required is, data is sent in chunks and not the whole file.
There are two ways to it:
1. The server does all the job (chunking the files and sending it)
2. There are video containers which help us doing this job. Say MP4
So if you are using a proper file format, say mp4, lot of the work is done by the file itself. And then there is encoding on the top to compress the video.
The player would seek for chunks and the server would answer the same. That is how we can jump to positions.
A 5 minute video can be compressed at different bit rates that would determine the amount of bits received in the same time and thus the quality of video.
Here is sample to use a known js video player http://www.videojs.com/
Where I am streaming from?
1. AWS S3 bucket (make it public and take the name. You can cname it)
2. Google drive. The trick is to use this URL format http://drive.google.com/uc?export=download&id=<FILE_ID>. You can easily see the file id once you open it. Of course you have to give necessary permissions to the object.
<html>
<head>
<link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.1/video.js"></script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<!--source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4' /-->
<!--source src="https://s3-ap-southeast-1.amazonaws.com/brox.in/mov_bbb.mp4" type='video/mp4' /-->
<source src="http://drive.google.com/uc?export=download&id=0B8BBWYGTqGNhRFplVGxZbHNTX00" type='video/mp4' />
</video>
<iframe src="https://docs.google.com/file/d/0B8BBWYGTqGNhRFplVGxZbHNTX00/preview" width="640" height="385"></iframe>
</body>
</html>
I have put the embed url for the context. You have very less, or say none, skinning control with embed url. With custom player you can rock and roll.
I have played with RED5 andn Wowza media servers. But I don't think you would need any of those unless you are upto live streaming.
If you have something to add do add a comment, as I am learning !!
There are two ways:
1. Upload it on a video hosting site and use the embed URL
2. Use your own js player and source it from a streaming server
So what is a streaming server?
There are various protocols for streaming. RTSP kind of proprietary from Adobe has ruled the world with flash players. But now we are moving back to HTTP.
In streaming what is required is, data is sent in chunks and not the whole file.
There are two ways to it:
1. The server does all the job (chunking the files and sending it)
2. There are video containers which help us doing this job. Say MP4
So if you are using a proper file format, say mp4, lot of the work is done by the file itself. And then there is encoding on the top to compress the video.
The player would seek for chunks and the server would answer the same. That is how we can jump to positions.
A 5 minute video can be compressed at different bit rates that would determine the amount of bits received in the same time and thus the quality of video.
Here is sample to use a known js video player http://www.videojs.com/
Where I am streaming from?
1. AWS S3 bucket (make it public and take the name. You can cname it)
2. Google drive. The trick is to use this URL format http://drive.google.com/uc?export=download&id=<FILE_ID>. You can easily see the file id once you open it. Of course you have to give necessary permissions to the object.
<html>
<head>
<link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.1/video.js"></script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<!--source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4' /-->
<!--source src="https://s3-ap-southeast-1.amazonaws.com/brox.in/mov_bbb.mp4" type='video/mp4' /-->
<source src="http://drive.google.com/uc?export=download&id=0B8BBWYGTqGNhRFplVGxZbHNTX00" type='video/mp4' />
</video>
<iframe src="https://docs.google.com/file/d/0B8BBWYGTqGNhRFplVGxZbHNTX00/preview" width="640" height="385"></iframe>
</body>
</html>
I have put the embed url for the context. You have very less, or say none, skinning control with embed url. With custom player you can rock and roll.
I have played with RED5 andn Wowza media servers. But I don't think you would need any of those unless you are upto live streaming.
If you have something to add do add a comment, as I am learning !!
No comments:
Post a Comment