The front end plays RTMP video streams

In the company’s recent project, a position in the large screen visual page is video surveillance, and the requirement is like this:

  1. There are six divs in the lower right corner of the large screen, each of which can play surveillance video in real time

  2. Click on a video to zoom in full screen,

  3. Automatically play

First use pictures to occupy the one place, about this, very common demand, development or encountered some problems, here to share.

We all know that the H5 video TAB supports three formats of video files: Ogg, MPEG4, WebM, and these three formats have different compatibility with browsers. But the video element is certainly can’t play the RTMP protocol files directly, now there are two ways: one is to write their own a set of video processing, it must not reality, the second is to use a special video processing plug-ins, of course, is to choose the second, convenient and fast, after finally choose find information video. Js this plugin, to start developing!

The first step is to download the plugin according to the documentation on the official website and write a small demo to test it

<! <meta charset=" UTF-8 "> <link href=" CSS /video-js.min.css" Rel ="stylesheet"> </head> <body> <h1> <video ID ="my-video" class="video-js" controls preload="auto" width="640px" height="480px" poster="" data-setup="{}"> <source src="rtmp://ns8.indexforce.com/home/mystream" Type =" RTMP/FLV "> <p class="vjs-no-js"> you need to enable JavaScript to play videos. You are advised to use a browser that supports HTML5 to access videos. To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p> </video> <script src="video.min.js"></script> </body> </html>Copy the code

And what appears is something like this: nothing.

I found that I did not make a mistake, so I started my daily baidu search and found a lot of files. One of the articles said that video.js does not support playing RTMP files from 6.x.x or above, which means we have to download 5.X. x or lower. The version I downloaded from the official website is 7.5.5, no wonder I can’t get out, and then I can’t find where to download 5.x.x!

So I think there should be a CDN, the example of the official website is the CDN address, the CND address in the browser to type out, changed a 5.X. x version of the discovery unexpectedly can find the file, get to the local, the results still found or not to come, well, continue baidu!

After reading several articles, I found that all files must be on the server. Should I write a demo and get it on the service? Speechless, no way, but also lane ah, after all, is the work ah! Fortunately, I have http-Server installed on my computer, so just start it in the current directory.

http-server -r- 1   / / start
Copy the code

After starting up, I found no error, but I still couldn’t play anything. It seems that the current video is not registered in VideoJS, and I wrote a js code

 <script>
	var myPlayer5 = videojs("my-video");  // Id of the current video tag
	myPlayer5.ready(
		function(){
			var myPlayer = this;
			myPlayer.play();  / / play});</script>
Copy the code

Ok, ha ha ha, ok, start the development of the official project, after finishing it, I found that it can not play automatically, only manual, I want to say is this monitoring? Ha ha ha!

Finally, I found that the browser required that the container for video playback should not be less than 400*300, and I enlarged the size of one of them, and I found that it was really like this. What can I do then? All the products made into 400*300 should not come and fight with me, besides, it does not meet the professional requirements of our front end, as long as you do not randomly add demands halfway. I’ll make sure you take care of everything else.

Looking back at the console output, there are two requirements: 1. Not less than 400 *300 2. Or don’t cross domains;

Since the first pass, then set out to a second request to solve, the vjs.zencdn.net/swf/5.3.0/v…

So let’s go ahead and fix it, first method, add one more line of code and you’re done;

 <script>
	var myPlayer5 = videojs("my-video");  // Id of the current video tag
	videojs.options.flash.swf = '.. /js/video-js.swf'  // Local SWF file
	myPlayer5.ready(
		function(){
			var myPlayer = this;
			myPlayer.play();  / / play});</script>
Copy the code

The second method is to find the options. SWF configuration item in the source code and change the default address to the local address. You can do it either way.

Ok, look at the effect is ok, and also meet the requirements, and then do some styling, and you’re done.

Finally, summarize the usage process of video.js:

  1. Download the source code, js, CSS, SWF, and note that the source code version must be 6.x.x or later.
  2. The code must run on the service, either locally or last deployed to the server, not directly on the computer disk.
  3. Autoplay needs to be at least 400 x 300, or put the SWF file to the local cross-domain.