How to use rtmp live video stream player (ckplayer)

Summary:

When we write a project, we may come into contact with some video operations. For ordinary video streams, such as files with suffixes such as Ogg, MPEG4, and WebM, these types of files can be parsed by the video tag of h5, and do not need to be parsed. operation, then we will also use the format of live video in the project. I have a need for live broadcast in the project, which is a live video stream in rtmp format. At first, I found relevant plug-ins to analyze, there is a video.js plug-in package, and the ckplayer plug-in package. Because video.js has not been studied in depth, ckpayer is used. This plug-in can parse live video streams in rtmp format very well, but some configuration is required;

Step 1: Download: http://www.ckplayer.com/down/

There are two ways to download the plug-in, please choose by yourself;

Step 2: Introduce in your own project. The premise is that you need to put the ckplayer package into the project, and then directly import the ckplayer.js file. All dependencies are searched through ckplayer.js, so you only need to import this one document

Step 3: Add a video dom container to the body

<div class="video active" id="video1"></div>
   

Step 4: Instantiate ckplayer (my operation here is to write a function, put the configuration parameters into the function, and then instantiate it)

function video(className,url){ 
   var videoObject = { 
      container: className,//"#" represents the ID of the container, "." or "" represents the class of the container 
      variable: 'player',//This property must be set, the value The object equal to the following new chplayer() 
      autoplay:true,//autoplay 
      live:true,//live video form 
      mobileCkControls:false, 
      video:url//video address 
   }; 
   return videoObject; 
};

var player=new ckplayer("container","rtmp format address");

Up to now, all the work has been completed, and a simple live broadcast function has been set up. ckplayer provides a lot of video configurations, please refer to the official website for specific configurations (the general configuration is to remove the player's logo, here I will use this function to carry out example)

In the ckplayer.js file, find the style configuration parameter, and comment out the loading and logo configuration code inside the style.