Shulou(Shulou.com)06/03 Report--

Editor to share with you which video player with on-screen comment based on HTML5 is, I believe most people don't know much about it, so share this article for your reference. I hope you can learn a lot after reading this article. Let's learn about it together.

Danmmu Player is a Html5 video player with on-screen comment. When we watch the video, we can express our views on the video. When we click the send button, the published content will be sent out in the form of paintball on the video screen, and scrolling to show the animation effect, that is, the video on-screen function.

How to use

Danmmu Player depends on jQuery, so you first need to add the relevant css and js files.

Next, add the following code to the location where you need to place the player in body:

Finally, the key part, configure parameters, call plug-ins.

$("# danmup") .DanmuPlayer ({src: "abc.mp4", / / video source height: "480px", / / height width of the region: "800px", / / width of the region urlToGetDanmu: "getData.php", / / get on-screen comment data from the backend urlToPostDanmu: "sendData.php" / / send the on-screen comment data to the backend for storage})

OK, now you can run your on-screen comment player. Of course, if you don't have to interact with the backend, you can add the initial data to the page without using the parameters urlToGetDanmu and urlToPostDanmu, such as:

$("# danmup. Danmu-p"). Danmu ("addDanmu", [{"text": "this is a rolling barrage", color: "white", size:1,position:0,time:2}, {"text": "I am green", color: "green", size:1,position:0,time:3}, {"text": "ha ha", color: "# F30", size:1,position:0,time:10}) {"text": "Hello, everyone. I am an indestructible Xiaoqiang ", color:" orange ", size:1,position:0,time:23}])

The addDanmu method of Danmmu Player is to append the contents of the on-screen comment to the screen. You can see that this is a string of data in json format, where:

Text-- on-screen comment text content

Color-- on-screen comment color.

Position-- on-screen comment position 0 is scroll 1 is top 2 is bottom

Size-- on-screen comment text size. 0 is small print and 1 is big print.

The time when the time-- barrage appeared. In minutes and seconds (1/10 seconds)

When this property appears in isnew-- (the attribute value can be arbitrary), it will be considered as a new on-screen comment issued by the user, so that the on-screen comment will have a border when it is displayed.

In the example, I simplified the interface and removed the settings of parameters such as text color, size, position, and transparency, leaving only a few main function buttons.

Interact with the backend

When the actual project is applied, we will dock the front-end operation with the back-end, and the content sent will not only be displayed on the screen, but also stored in the background database. Of course, the database type can be determined according to the project requirements. You can use MySQL or even text files to save data. In the example of this paper, PHP+MySQL is used in the back end to read and save the contents of the barrage.

GetData.php is used to obtain on-screen comment data from the backend. We know that when the user opens and plays the video, someone has already published the on-screen comment, which is already in the database. We need to read and display the data on the video player screen.

Include_once ('connect.php'); / / Connect 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

Data sheet danmu field structure and connection database file connect.php please download the source package can be viewed.

SendData.php is used to receive the on-screen comment content data from the front-end post and save the data to the data table.

Include_once ('connect.php'); / / Connect 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 split the data on post, set up a few more fields in the data table to save different properties, such as content, color, font size, etc., and then be more flexible when reading in getData.php, directly json_encode () can output data.

The above is all the content of the article "which video player with on-screen comment based on HTML5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.