React video bomb screen playback

Don't get caught in the wheel of the siege and say it's true. Then why do I have to study this barrage system? Because I didn't find that the industry has a particularly high-end pinball player based on HTML5 or maybe I see less if you find a good pinball player be sure to tell!

Before I studied this, I was a little niang. Related to the HTML5 bomb screen player or have relevant plug-ins but are too low too low too low ...

Those who move several pixels per frame and ignore the overlap problem of the bomb screen player do not have to consider!

My ideal barrage system is to solve overlapping problems as much as possible, and the trajectory of each projectile is not only linear motion from right to left but also various parametric equations.

The following effects

There are 2 kinds of motion tracks! You can also click on the right side of the rotation button to switch to the horizontal screen!

Demo June poke me ← Please use iOS not open more than a few times

I would like to talk about the interests of their own view of the source bar ~

Key issues of emissions and overlap

I've got 3 channels up to the bottom 0 1 2 For example in the first second there is ' I'm a noble ' 6 barrage so that's how it discharges 0->1>2->0->1->2

The initial coordinate position of a projectile should be taken into account whether there is a projectile object in front of it. The barrage is handled differently within and outside the visible area.

After the initial coordinates are in motion, because the length of each barrage is almost different. It is convenient to use the length of the bomb screen to calculate a speed attribute but this is not solve the overlap problem!

My practice is to do linear interpolation for every second of each channel into the projectile object. Their final values are calculated using the length of each other's projectile so that they do not overlap during the visual area motion!

Structure deposited into the database

I cut a part of it. The field T (the second of the video) =1 their text (bullet-screen text) is ' I am noble '. Here are garbled encountered wonderful problem asked the back end of a few people also can not solve ... I'm too lazy to study this garbled.

Text= ' I'm noble ' these 6 data compare special their TNS fields are assigned extra attributes so you'll see that they're moving in a different way than the rest of the barrage.

Where did my pinball and video data come from?

You will see that the barrage is related to the spit groove. I am from station B that get down from the video resources also!

Their barrage resource is an XML file, and I'm going to buckle the contents of the spit inside. The following XML:

So I

Hahaha *n

Find the Pits

Ios

Safari Browser As long as the point of play directly full screen can not stop! That is to say, safari under the screen is completely unable to do!

The browser is able to block the full screen, so you can do the bomb screen and the best thing is to turn off the phone's rotation function by default we rotate the entire package video element so that the disgusting head is on the left side of the phone but video is full and included in the page area!

Android

Set absolute also can not play the screen and video hierarchy relationship so Android. Have a solution be sure to inform

The pit on the mobile side is very serious!

In fact, this thing with canvas to do the best when the number of elements of HTML performance is not enough and I would like to give some of the barrage to add the effect of the big? Non-canvas does not meet!

The reason I do it with react is that I don't want to ruin it.

High style (do not accept tearing force)

React video bomb screen playback