HTML5-based bullet screen video player example

Danmmu player is a HTML5 video player with a barrage function. When we watch the video, we can express our views on the video, when the click of the Send button, published content will be in the video screen in the form of paintball, and do scrolling display animation effect, that is, video barrage function.
Video player with HTML5 function based on the camera

How to use

Danmmu player needs to rely on jquery, so first you need to add the relevant CSS and JS files.

<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, add the following code where you want to place the player in the body:
<div id= "Danmup" ></div>

Finally, the key part, the configuration parameters, invokes the plugin.
$ ("#danmup"). Danmuplayer ({
SRC: "Abc.mp4",//Video source
Height: "480px",//area altitude
Width: "800px",//area widths
URLTOGETDANMU: "getdata.php",//from the back end to get the data of the bomb screen
URLTOPOSTDANMU: "senddata.php"//Send barrage data to back-end storage
});

OK, now you can run your Play screen player, of course, if you don't need to interact with the backend, you can add initial data directly to the page without using the URLTOGETDANMU and URLTOPOSTDANMU two parameters, such as:

$ ("#danmup. Danmu-div"). Danmu ("Adddanmu"), [
{"Text": "This is a rolling barrage", Color: "White", size:1,position:0,time:2},
{"Text": "I am hat green", Color: "Green", Size:1,position:0,time:3},
{"Text": "Hahaha ah ha", Color: "#f30", size:1,position:0,time:10},
{"Text": "Everyone good, I am not dead cockroach", Color: "Orange", size:1,position:0,time:23}
]);

Danmmu Player's Adddanmu method is to append the contents of the barrage to the screen, and see that this is a string of JSON-formatted data, where:
text--The text content of the barrage
color--the color of the flare screen.
position--0 for scrolling 1 for top 2 for bottom
size--text size. 0 is the small print 1 for the large characters
the time that appears in the time--Barrage. The unit is seconds (one-tenth seconds)
isnew--When this property appears (the property value can be arbitrary), it is considered a user's new bounce screen, so that the screen will have a border when it is displayed.
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 main function buttons.
Interacting with backend
when the actual project is applied, we dock the front-end operation to the back end, and the contents of the projectile will be sent not only on the screen, but also in the background database. Of course, the database type can be determined according to the project requirements. You can use MySQL, or even use a text file to save data. In this paper, the back end uses Php+mysql to realize the reading and preservation of the content of the projectile screen. The
getdata.php is used to get the barrage data from the back end. We know that when the user opens the video, someone has already posted the contents of the screen, which is already in the database, and we need to read and display the data on the video player screen.
include_once (' connect.php ');//Connection Database
 
$json = ' [';
$query = mysql_query ("SELECT * from Danmu");
while ($row =mysql_fetch_array ($query)) {
    $json. = $row [' content ']. ', ';
}
$json = substr ($json, 0,-1);
$json. = '] ';
Echo $json;

Datasheet DANMU The field structure and the connection database file connect.php Please download the source package can be viewed.
The senddata.php is used to receive the content data from the front end post, and to save the data to the datasheet.
Include_once (' connect.php '); Connecting to a database

$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 post the data to split, the datasheet set several fields to save different properties, such as content, color, font size, and so on, and then getdata.php read the more flexible, direct json_encode () can output data.