» » HTML5 - based video player with barrage function


HTML5 - based video player with barrage function

Author: bamboo06 on 14-12-2016, 01:23, views: 734

Danmmu Player is a barrage of Html5 video player. When we watch the video, you can express their views on the video, when you click the Send button, the content will be published in the video screen in the form of paintball issue, and do rolling animation, video barrage function.

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.
    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"); 
    $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'); //连接数据库 
$addtime = time(); 
$sql="INSERT INTO `danmu`(`id`,`content`,`addtime`) VALUES (null,'$danmu','$addtime')"; 

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/

Category: Javascript / HTML5 / Plugins

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
  • 0 Articles
9 April 2017 06:01


  • Group: Guests
  • РRegistered date: --
  • Status:
HTML 5 video playback is really fast. I use this format for rushmyessay co uk so that I can complete my work as soon as possible and it’s really fast. You can try it for yourself and then let me know.

  • 0 Articles
20 August 2017 19:14

Alaina Agnes

  • Group: Guests
  • РRegistered date: --
  • Status:
The actual tutor, we have the front-end operation and the back-end docking, will send the content comments only displayed on the screen, but also stored in the background database pay for essay - http://www.essaycrafter.co.uk/write-my-essay/. Of course, the database type can be determined according to tutor requirements.

  • 0 Articles
29 August 2017 11:32


  • Group: Members
  • РRegistered date: 28.08.2017
  • Status: Currently Offline
  • 0 Articles
8 September 2017 22:53

Phyllis Santos

  • Group: Guests
  • РRegistered date: --
  • Status:
It is for sure a step forward in making the process more user-friendly, saving time and preventing annoyance by millions of forms to fill in. But then again, we face the problem of private information being easily accessible for third parties, not initially involved in "the contract" signed between the user and Facebook. The research from cheap essay shows that Internet users are becoming more and more cautious about sharing personal details, so if those can be forwarded to the third parties, there might be an dramatic increase in public's dissatisfaction...

Add comments

Bold Italic Underline Strike | Align left Center Align right | Insert smilies Insert link URLInsert protected URL Select color | Add Hidden Text Insert Quote Convert selected text from selection to Cyrillic (Russian) alphabet Insert spoiler
Security Code: *