how to use
Danmmu Player needs to rely on jQuery, so the first need to join the relevant css and js file.
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.danmu.js"></script>
<script src="js/main.js"></script> Next, in the body of the need to place the player to add the following code:
<div id="danmup"></div> Finally, the key part, configuration parameters, calls the plugin.
$("#danmup").DanmuPlayer({
src: "abc.mp4", //Video source
height: "480px", //The height of the area
width: "800px", //The width of the area
urlToGetDanmu:"getData.php", //Get the barrage data from the back end
urlToPostDanmu:"sendData.php" //Send barrage data to the back-end storage into the library
}); Well, now you can run your barrage player, of course, if you do not interact with the back-end, you can not use urlToGetDanmu and urlToPostDanmu two parameters, directly in the page to add the initial data, such as:
$("#danmup .danmu-div").danmu("addDanmu",[
{ "text":"This is a rolling barrage" ,color:"white",size:1,position:0,time:2}
,{ "text":"I'm a green hat" ,color:"green",size:1,position:0,time:3}
,{ "text":"haha" ,color:"#f30",size:1,position:0,time:10}
,{ "text":"This is a yellow barrage" ,color:"yellow" ,size:1,position:0,time:3}
,{ "text":"so fast" , color:"red" ,size:1,position:0,time:19}
,{ "text":"Hello, everyone, I was beaten to death Jimmy" ,color:"orange",size:1,position:0,time:23}
])Danmmu Player addDanmu method is to add the contents of the screen to the screen, see, this is a string of json format data, including:
Text - the contents of the barrage text
Color - Barrage color.
Position - Barrage position 0 for the roll 1 for the top 2 for the bottom
Size - Barrage text size. 0 for the small word 1 for the big characters
Time - the barrage of time. The unit is minute (tenths of a second)
Isnew - when the property (the value of the property can be arbitrary), will be that this is a new user barrage, which Barrage in the display will be a border.
In the example, I simplified the operation interface, removed the text color, size, position and other parameters of the settings, as well as transparency settings, leaving only a few major function buttons.
Interact with the back end
The actual project application, we will be front-end operation and back-end docking, will send the barrage of content not only to display on the screen, but also stored in the background database. Of course, the database type can be determined according to project requirements. You can use MySQL, or even use a text file to save the data. In this example, the back-end uses PHP + MySQL to achieve the barrage content read and save.
GetData.php is used to obtain barrage data from the backend. We know that the user to open the video playback time, has been published barrage of content, and these content is already in the database, and we need to read and display the data in the video player screen.
include_once('connect.php'); //connect db
$json = '[';
$query = mysql_query("select * from danmu");
while($row=mysql_fetch_array($query)){
$json .= $row['content'].',';
}
$json = substr($json,0,-1);
$json .= ']';
echo $json; Danmu data structure of the field and connect the database file connect.php Please download the source package you can view.
SendData.php used to receive front-end post from the barrage of content data, and save the data to the data table.
include_once('connect.php'); //连接数据库
$danmu=strip_tags($_POST['danmu']);
$addtime = time();
$sql="INSERT INTO `danmu`(`id`,`content`,`addtime`) VALUES (null,'$danmu','$addtime')";
$query=mysql_query($sql);
mysql_close(); In fact, you can also split up the data from the post, the data table to set up a number of fields used to save different attributes, such as content, color, font size, and then getData.php read more flexible , Direct json_encode () can output data.
For more information, please refer to Danmmu Player's address on github: https://github.com/chiruom/DanmuPlayer/
