Bullet screen culture and HTML5,

Bullet screen culture and HTML5,

Shared by herry

Bullet screen: Bullet screen culture and HTML5

Bullet screens

Bullet screen Culture

1What is bullet screens?

It has been a long time since the emergence of the d? n curtain in China. I believe many of my friends know about it.

The bullet screen system originated from a Japanese website named "NICONICO", known as "N Station" by Chinese people. It is a video website dominated by animation ACG ,. The so-called bullet screen is actually the comment of the audience on the current video. This sentence is targeted. When a video is played to a certain period of time, the user comments on the screen at that time.

ACFUN, the first bullet screen video website in China, is called Site. Then a bullet screen station named BILIBILI appeared, which is called site B.

As shown in:

(Figure: niconico)

(Figure: bilibili)

2Bullet screen Culture

Bullet screens can give people the illusion of real-time interaction. Although the sending time varies, however, the synchronization between the video and the sp will make you feel that you are not only watching the same video.

For example, if you watch a terrorism video on a bullet screen website, do you still feel terrible?

The bullet screen system continues to spread. Nowadays, many mainstream video websites in China have successively launched the function of the bullet screen system, music websites, even cartoon websites, and novel websites all have bullet screens, and Forum posts have bullet screens (most of these are actually comments behind the bullet screens, the bullet screen system that does not use the timeline is a bullet screen that appears on the random timeline ).

Html5 bullet Screen

Whether html5 can be achieved

The answer is yes. Now, the PC end of the bullet screen website in China uses the flash bullet screen player for playing. For the player, flash is very suitable for this, and it has been done for a long time, in this regard, flash is more advantageous than html5, and more resource formats can be played. But today, most people prefer to use mobile terminals to see what videos are. Most people in the IT industry know that flash is not suitable for mobile terminals. Even if flash Android systems can be used, however, this is very expensive and traffic-consuming. Each time a webpage is opened, flash should be loaded once, very difficult. Apple directly gave up flash, so now flash is only used on PC web pages. Mobile Terminals generally call the built-in bullet screen player in the APP to play the video, not html5. Why don't most websites write html5 bullet screen players? In fact, some websites have not been written. The wap site of Site B uses the html5 bullet screen player, but in many cases there are no bullet screens. Why? Because most mobile browsers have their own video players, when the browser detects that Your webpage contains video elements, you will immediately replace your player with the video player that comes with your browser for playback, the floating layer of your write-in bullet screen rolling is completely covered by the browser player (front-end code is no better than the browser ). Unless your browser does not process video elements, there will be no problem.

(Figure: bilibiliwap)

 

General implementation principle of bullet screens:

Obtain the expected bullet screen list and put it in a list. Each bullet Screen Object has attributes such as the text, the time when the bullet screen appears, the color of the bullet screen, and the size of the bullet screen.

When the current audio and video are played to the time when the bullet screen appears, the bullet screen has been displayed in a certain form. Generally, the scroll from right to left is used as an example to hide the screen after it is exceeded.

This logic html5 can be fully implemented.

Now let's not talk about this. More articles related to bullet screens can be viewed in hundreds of times. Let's take a look at an h5 bullet screen audio player. Why should we use audio? Because the video player will be replaced by the player when the video is being played, and the bullet screen will not be visible.

3Bullet screen audio effect demonstration

4Code breakdown of bullet screens

HTML section

<Body onload = "pollMsg (0)"> <div class = "container"> <! -- Audio and bullet Screen Play layer --> <div class = "leftContent"> <div class = "pool" id = "pool"> <div class = "abs_div"> <audio id = "audio" width = "100%" height = "360" controls = "controls" onplay = "handle (); "onpause =" handle (); "> <source src =" xxx.mp3 "type =" audio/mp3 "> </audio> </div> <! -- Reserved bullet Screen Layer --> </div> <! -- Bullet screen list --> <div class = "list" style = "display: none; "> <table border =" 0 "id =" list "> <tr style =" background-color: # eee "> <th> time </th> <th> content </th> <th> sending date </th> </tr> <td> </td> <td> test bullet screens </td> </tr> </table> </div> </body>

. Container is the div of all content, and. leftContent is the bullet screen and audio playback layer,

The reserved bullet Screen Layer span is scroll from right to left by loading the bullet screen through js,

. List is the bullet screen list to be displayed, because it needs to be displayed on the mobile terminal, so this will be hidden.

CSS Section

body{text-align:center;margin:0;padding:0}.container{border-radius:5px;width:99%;height:365px;margin:5px auto;/*background-image:url(0.gif);*/background-size:100% 100%}.leftContent{width:100%;text-align:left;float:left}.sendBar{text-align:center;font-size:13px;text-shadow:1px 1px 1px gray}.sendBar input[type=text]{width:200px}.pool{border-radius:5px;width:99%;height:360px;margin:2px 2px 0 2px;position:relative;overflow:hidden}.list{border:1px solid gray;border-radius:5px;width:310px;height:382px;margin:2px 0 0 5px;float:left;white-space:nowrap;overflow-y:scroll}.list table{font-size:12px;padding:2px 2px 0 2px;width:100%;text-align:center}.comment{color:#000;font-size:20px;display:inline;position:absolute;white-space:nowrap;font-weight:700}.abs_div{position: absolute;bottom: 0;height: 40px;width: 100%;}#audio{margin: 0 auto;width: 100%;}

To put it simply, the black area is used to scroll the bullet screen. Below is an audio player.

With the basic style, you can run the bullet screen on it. The expected effect is: click audio to play the video, and then traverse the bullet screen and load the bullet screen to the black screen by time.

JS execution Logic

Initialization

Var commentList = []; // create a comment list Array of any number of elements var track = new Array (14); for (var I = 0; I <14; I ++) {track [I] = 0;} var docW = document. body. clientWidth; // The Screen width.

/* Obtain the ajax object */function getAJAX () {if (window. XMLHttpRequest) return new XMLHttpRequest (); else if (window. activeXObject) return new ActiveXObject ("Microsoft. XMLHTTP "); return null ;}

/* Convert the number format that has been counted in seconds to the format of 00: 00 */function tick2str (tic) {var str = ""; if (tic <60) str = "00 "; else if (tic <600) str = "0" + parseInt (tic/60); else str = parseInt (tic/600) + "" + parseInt (tic/60% 10); str + = ":"; tic % = 60; str + = parseInt (tic/10) + "" + parseInt (tic % 10); return str ;}

After the page is loaded, execute pollMsg (0 );

/* Asynchronously access the data layer page of the bullet screen, used to write the bullet Screen Object to the hidden list */function pollMsg (from) {var ajax = getAJAX (); if (ajax = null) {return;} ajax. onreadystatechange = function () {// ajax corresponding if (ajax. readyState = 4 & ajax. status = 200) {var resText = ajax. responseText; // obtain the corresponding content var rec = "([" + resText + "])"; // json-Based var objs = eval (rec); for (x in objs) {var node = document. createElement ('tr '); node. innerHTML = '<td>' + tick2str (objs [x]. tick) + '</td> <td>' + objs [x]. text + '</td> < Td> '+ objs [x]. date + '</td>'; getE ('LIST '). appendChild (node);} commentList = commentList. concat (objs); // connection array} var time = new Date (). getTime (); ajax. open ('get', 'HTTP: // xx.com/dmdata.jsonx? From = '+ from +' & time = '+ time, true); // request http://xx.com/dmdata.jsonxfrom the data page: ajax.send (null );}

Onplay = "handle ()" onpause = "handle ()" on the audio tag; used to switch the bullet screen scroll Timer

 

Var st = false; // true: On; false: off; var tmove, tcheck; // function handle () {if (st) {st = false; window. clearInterval (tmove); // stop rolling all bullet screen Windows. clearInterval (tcheck); // stop checking the bullet screen list} else {st = true; tmove = window. setInterval ("moveAll ()", 50); // enables rolling all bullet screens. tcheck = window. setInterval ("checkList ()", 1000); // enable the check bullet screen list }}

After the scroll function is enabled during playback, moveAll () is executed every 50 milliseconds to scroll all the bullet screens and checkList () is executed every second to check the bullet screen list. Two timers are stopped when the player is paused or stopped.

/* Obtain all the screens of a span and scroll the span tag from right to left */function moveAll () {var sps = document. getElementsByTagName ('span '); // dynamic spanfor (var x = 0; x <sps. length; x ++) {var l = parseInt (sps [x]. style. left); if (l>-sps [x]. clientWidth) {var tr = parseInt (sps [x]. style. top)/25; if (track [tr] = l + sps [x]. clientWidth-docW) track [tr]-= 8; sps [x]. style. left = L-8 + 'px ';} else {sps [x]. parentNode. removeChild (sps [x]) ;}}

// Check the bullet screen list function checkList () {var ct = parseInt (getE ('audio '). currentTime); // The current time. for (x in commentList) {if (commentList [x]. tick = ct) {showComment (commentList [x]) ;}}

// Create the span show function showComment (c) {var node = document. createElement ('span '); node. innerHTML = c. text; if (c. color) node. style. color = c. color; if (c. size) node. style. fontSize = c. size; node. style. left = document. body. clientWidth + "px"; var t = getTop (); node. style. top = t + "px"; node. className = "comment"; getE ('pooled '). appendChild (node); track [t/25] = node. clientWidth ;}

/* The distance from the top of the screen to the scroll */function getTop () {var min = 1000, id = 0; for (x in track) {if (track [x] <= 0) {return x * 25;} if (track [x] <min) {min = track [x]; id = x ;}} return id * 25 ;}

5Feasibility Extension

Some of the books on Mi's client contain the video guide section and some activity pages contain the video or audio column. However, after all, it is to read apps, not video apps, so there are not many video blocks. If you want to add the function of switching the bullet screen to the video block in Mi's reading. What will it do? The video in this app is not converted to the player that comes with the system, so there is no problem with h5 (benefits: 1. you don't need to go to the comment area for a moment to know the user's comment. Disadvantage: a large amount of data leads to longer page loading time)

Basic prediction: Get the latest or most popular first 100 to 200 comments in the user's comment area (too many bullet screens will cause slow page loading and the videos will be covered by the bullet screens ), set the random color for the comment color. The comment occurrence time is a random number from 0 to the video end time.