» » HTML5 - based video player with barrage function

 

HTML5 - based video player with barrage function

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

9
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.
$("#danmup").DanmuPlayer({ 
    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"); 
while($row=mysql_fetch_array($query)){ 
    $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'); //连接数据库 
 
$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 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 Comments
  • 0 Articles
9 April 2017 06:01

Eduino

Reply
  • 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 Comments
  • 0 Articles
20 August 2017 19:14

Alaina Agnes

Reply
  • 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 Comments
  • 0 Articles
8 September 2017 22:53

Phyllis Santos

Reply
  • 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...

<
  • 0 Comments
  • 0 Articles
27 September 2017 17:05

violet tayylor

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
In order to solve all your academic issues, we bring to you an online custom writing service that ensures to help you till your satisfaction. Order according to your need and get quality writing paper.

<
  • 0 Comments
  • 0 Articles
11 November 2017 05:47

Ivanunild

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
В октябре 2016 года автономный грузовик Uber совершил первую самостоятельную поездку, проехав вокруг 193 км в сопровождении полицейского конвоя.РАДИ ПОДКЛЮЧЕНИЯ ВОДИТЕЛЯ К СИСТЕМЕ ТАКСИ UBER В САНКТ-ПЕТЕРБУРГЕ ВАМ НУЖДАТЬСЯ ПРИСЛАТЬ КОПИИ СЛЕДУЮЩИХ ДОКУМЕНТОВ НА НАШУСЛОВИЯ ОПЛАТЫ В UBERВ компании не раскрыли новую оценку компании, всетаки источник издания, «много близкий» к Didi, подтвердил, который она превысила $50 млрд.По данным UBS, самым скачиваемым приложением в этой сфере стало Uber – в 2016 году на долю американской компании пришлось 45,2% от всех загрузок подобных сервисов.Бонусы в UberX
убер такси москва
убер партнер
uber

подача автомобиля, 22 руб/км + 15 руб/минута коль вышли повышающего коэффициента.Сервис сообразно заказу такси сквозь приложение Uber и геоинформационный сервис «2ГИС» (2GIS) подписали соглашение о партнерстве, в рамках которого водители Uber получат альтернативный навигатор через «2ГИС».В Петербурге работают несколько компаний, которые специализируются на регистрации водителей Uber.Российский топ-10 самых скачиваемых сервисов сообразно заказу поездок по версии UBSСледующий тип водителей — это те, для кого занятие в Убер является дополнительным источником дохода.Uber, «Яндекс.

<
  • 0 Comments
  • 0 Articles
12 November 2017 00:01

KatyamTap

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Гидроабразивная резка с точностью прежде миллиметра раскраивает металл толщиной предварительно 30 см.Ради того, дабы этого не произошло, следуйте рекомендациям сообразно условию хранения сварочных электродов.Такой род удаляет ржавчину полностью.Основа метода холодной ковки - это станок.Выключая того, вы рискуете поставить потенциальным заказчиком товар ненадлежащего качества.
https://metal-moscow.ru/price.html - арматура 8 мм цена за метр погонный
лист алюминия рифленый
<a href=https://metal-moscow.ru/>металлопрокат в москве купить</a>

Забор из арматуры своими рукамиИтак, вдруг же правильно установить каркас?Таким же образом обвязываем полностью каркас через каждые 50 см.Также учитывайте, сколько изделия соединяются внахлест длиной перед 80 см в зависимости от вида сечения арматуры.Не храните свинец в дубовых коробках.

<
  • 0 Comments
  • 0 Articles
13 November 2017 02:16

Thomastette

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
От этого зависит не один цифра разделов и тематика ресурса, а и его дизайн, что является очень важным элементом.Некоторые нечистоплотные человек занимаются регистрацией большого количества разнообразных имен, которые указывают для один-единственный сайт, с предложением у них это эпитет перекупить за цену, многократно превышащую установленную регистратором.Его главные достоинства — простота, устойчивость и скорость.Первое — сайт вынужден существовать удобным в использовании.Их редкость в том, который вы можете извлекать всякий из них 30 дней абсолютно бесплатно.
<a href=https://vk.com/sozdanie_sajtov_krasnodar_23>продвижение сайта</a>
продвижение сайта
<a href=https://vk.com/sozdanie_sajtov_krasnodar_23>создание сайтов в Краснодаре</a>

Интернет-магазин.И Вы не сможете восстановить его для другом хостинге.РАЗРАБОТКА САЙТА, СОСРЕДОТОЧЕННОГО ДЛЯ КЛИЕНТЕ.Раз Молдавия передала частный домен .Вот несколько шаблонов (хи можно найти вследствие встроенный поиск тем на вордпрессе), которые вам могут пригодиться:

Около этом улучшается конструкция почвы, так вдруг корни сидератов разрыхляют ее.Укрывное нетканое полотно Агроспан представляет собой синтетический материал.Некоторый дачники с удовольствием применяют простые и удобные парники, которые состоят из дуг, покрытых Агроспаном различной плотности.Агроспан качество 42 и 60 — укрывной вещество для крепления для каркас парника, крепление осуществляется способами аналогичными креплению обычной парниковой пленки.
рассадные кассеты
агроспан
<a href=https://agrohoztorg.ru/каталог-товаров/тенты-тарпаулин/>тенты</a>

Более теплолюбивые из них дозволено укрывать в маломальски слоев (накануне восьми). Рассада растений не задыхается и не парится, сиречь почти пленкой.Разве побеги на клубнях уже появились, самые длинные дозволено выломать.Разом следует оговорить, что филиппика не пойдет о плитах, у которых ячейки (ребра жесткости) располагаются не около прямым углом, а наискосок, имеются пузырьки, вкрапления в виде темных точек, мутность – такой вещь не рискнет овладевать даже не искушенный покупатель.Теплицы из поликарбоната, такса которых ниже рыночной, не соответствуют требованиям безопасности, имеют высокие тепловые потери и другие серьезные недостатки.

<
  • 0 Comments
  • 0 Articles
15 November 2017 03:09

CharlesPak

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Веб-сервис — услуга созданная чтобы выполнения каких либо задач в рамках козни WORLD CONSIDERABLE SPIDER'S WEB:
В данных примерах ключевые фразы даны простым перечислением.
Подводные камни быть создании сайта
В приговор - пара примеров красивого (для мой взор) дизайна
Значением будет являться отдельный из массивов, находящийся внутри основного многомерного массива.

создание сайта томск
vk.com/sozdanie.saitov.tomsk - создание сайтов томск
https://vk.com/sozdanie.saitov.tomsk - создание сайтов томск

Следовательно крайне гордо верить продвижение сайта профессионалам, которые будут осуществлять непрерывный мониторинг ресурса и, в случае необходимости, нивелируют всегда вредоносные внешние воздействия.
Только особа, как начало, делал огульно сайт от начала и накануне конца.
Итак, самая распространенная ошибка новичков быть изготовлении интернет-сайтов - возможность создать некачественный код, что в будущем может оказать отрицательное вдохновение для работу с базами данных, взаимодействие с посетителями и формальный вид отображения данных.
Разве вы сразу обозначите, сколько вам нуждаться, это снимет львиную долю недоразумений.
Нарушаются правила русского языка (положим, нет запятых промеж словами при перечислении).

Понимая это, владельцы сайтов уделяют повышенное забота информационному наполнению, но… Поглощать одно маленькое «но».
Потому коль вы не содержатель крупного предприятия, вам может такса изза услуги такого мастера показаться чрезвычайно высокой.
Создать интернет-магазин может всякий человек, что хочет что-то сбывать и обладает необходимыми знаниями.
Люди покупают в интернет-магазинах практически все, от продуктов питания перед бытовой техники.
Информационные ресурсы:

https://buysite70.ru/ - контекстная реклама яндекс
поддержка продвижение сайта
<a href=https://buysite70.ru/>заказать сайт под ключ цена</a>

Подводные камни быть создании сайта
Оптимально, дабы в начале тега стояли самые конкурентные запросы, сообразно которым продвигается страница.
Файлообменный Пиринговый сервис — примерно, Bittorrent.
Заказанная поделка может описывать собой вдруг толстый комплекс создания сайта, вплоть до придумывания названия и регистрации домена, беспричинно и расширение сайта, техническую оптимизацию и редизайн.
Все помните, который подобные компании требуют за приманка услуги порядочно немалую плату, а также часом затягивают сроки выполнения заказа.

<
  • 0 Comments
  • 0 Articles
16 November 2017 03:16

DimizatAcisy

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Исключая того, требование о возмещении ущерба синедрион расценил как незаконное, поскольку “страхование риска ответственности ради нарушение таможенных правил, сиречь страхование противоправного интереса, в силу пункта 1 статьи 928 Гражданского кодекса РФ не допускается"******.
Сервис в сфере транспортировки предлагает не простой перевозку генеральных alias сборных партий груза, но также страхование перевозимых объектов, их таможенное оформление около необходимости, подготовку полного комплекса документов для товар (товарно-транспортной накладной, счет-фактуры, Грузовой Таможенной Декларации и сертификатов соответствия).
В этом случае компенсация затрат экспедитора может осуществляться либо следовать счет увеличения объемов и привлечения низкоквалифицированного персонала — который в конечном итоге приводит к снижению качества работ, либо после счет незаконной деятельности — здесь без комментариев.
Присутствие этом не безвыездно транспортные компании могут делать услуги для должном уровне, в результате чего для рынке остаются наиболее профессиональные игроки сиречь происходит укрупнение и слияние различных служб доставки ради того, чтобы повысить качество предоставляемых транспортно-экспедиторских услуг.
Огромное мера компаний строят принадлежащий бизнес для оказании услуг по грузоперевозкам на различных уровнях административной системы - через городского и регионального уровней перед международного.

<a href=https://vk.com/gruzotaksi_tomsk>газель в томске</a>
услуги грузотакси
https://vk.com/gruzotaksi_tomsk - грузоперевозки

Начните с тех, которые не имеют собственного автопарка.
Уплата пошлин, сборов
морским контейнером
Клиентам, заключающим обязательство на год, страховая компания может предоставить скидку прежде 30% от стоимости страховки.
а) автотранспортная организация, коль будет подтверждено, который недобор, неудача иначе недостаток груза произошли по их вине;


Add comments

Name:*
E-Mail:
Comment:
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: *