Плагин прокрутки шрифта субтитров — scroxt.js

TypeScript

README

scroxt.js Overview

scroxt.js — это библиотека плагинов для прокрутки шрифтов, включающая в себя видео-чат, чат в режиме реального времени, принудительный режим чата в режиме реального времени, однострочную горизонтальную прокрутку влево и вправо, вертикальную прокрутку текста вверх и вниз, используемую для простого и быстрого создания прокручиваемых шрифтов. Отличная производительность благодаря ускорению процессора, кэшированию элементов шрифта, перемещению кадров для достижения максимально плавного эффекта. Совместимость с браузерами Chrome, Firefox, Opera, IE9 и выше.

Installation

npm install --save scroxt

возобновить

08.11.2017 Добавлены интерфейсы «Воспроизведение», «Пауза», «Повтор», «Быстрая перемотка вперед» и «Быстрая перемотка назад» к видеозаграждению. Подробнеевидеозаградительный огонь

Getting Started

Вы можете легко использовать плагины для прокрутки шрифтов. scroxt для объекта. Разные методы прокрутки соответствуют разным именам классов. Например, имя класса горизонтальной прокрутки Horizontal как атрибут scroxt. При его использовании вам нужны только новые scroxt.Horizontal для создания шрифта Scroll. Подробный пример здесь

demo

1. Горизонтальная прокрутка

new scroxt.Horizontal({
    target: ".my-ele",
    data: ['第一条','第2条','第3条'],
    speed: -5
});

параметр:

  • цель: контейнерный селектор css для шрифтов с горизонтальной прокруткой
  • данные: массив шрифтов
  • скорость: скорость прокрутки, расстояние, пройденное за кадр = скорость * 0,1. Размерный ряд скорости 1-10

2. Вертикальная прокрутка

new scroxt.Vertical({
    target: ".my-ele",
    data: ['第一条','第2条','第3条','第4条','第5条'],
    speed: 5
});

параметр:

  • цель: контейнерный селектор css для шрифтов с вертикальной прокруткой
  • данные: массив шрифтов
  • скорость: скорость прокрутки, диапазон скоростей 1-10. Расстояние, пройденное за кадр = скорость * 0,1.

3. Видеозаградительный огонь

...
<div class="scroll-box-barrage">
    <div class="scroxt-video-barrage">
        <video id="my-video" preload="auto" width="640" height="auto">
          <source src="http://14.215.100.242/v.cctv.com/flash/mp4video6/TMS/2011/01/05/cf752b1c12ce452b3040cab2f90bc265_h264818000nero_aac32-1.mp4" type='video/mp4'>
        </video>
    </div>
    <div class="play">播放</div>
    <div class="pause">暂停</div>
    <div class="fast-forward">快进</div>
</div>
<script type="text/javascript" src="./dist/js/scroxt.js"></script>
<script type="text/javascript">
    var scroxtBarrage = new scroxt.Barrage({
        video: "#my-video",
        dataTime: [{
            data:"第一条弹幕",
            time:1
        },{
            data:"第二条弹幕",
            time:3
        },{
            data:"第三条弹幕",
            time:2
        }]
    });
    //播放
    document.querySelector(".play").addEventListener("click",function(){
        scroxtBarrage.play();
    });
    //暂停
    document.querySelector(".pause").addEventListener("click",function(){
        scroxtBarrage.stop();
    });
    //前进5s
    document.querySelector(".fast-forward").addEventListener("click",function(){
        scroxtBarrage.moveInterval(5);
    });
</script>
...

Параметр scroxt.Barrage:

  • видео: селектор css для тега видео
  • dataTime: Массив Bullet Chatting, каждый элемент массива состоит из полей данных и времени, data — это содержимое каждой пули в чате, time — единица времени/секунды появления пули в чате (время воспроизведения видео);

Параметры экземпляра scroxt.Barrage:

  • play(): начать играть
  • stop(): приостановить воспроизведение
  • Перезапустить (): Повтор
  • moveInterval(s): быстрая перемотка вперед на s секунд
  • moveInterval(-s): вернуться на s секунд

4-1. Живой шквал

...
<div class="scroll-box-barrage">
    <div class="scroxt-video-barrage" style="width: 100%;">
        <img class="video-bg" src="./img/bg.png" style="width: 100%;height: auto;display: block;vertical-align: middle;">
    </div>
</div>
<script type="text/javascript" src="./dist/js/scroxt.js"></script>
<script type="text/javascript">
var scroxtLive = new scroxt.Live({
    target: ".scroxt-video-barrage",
});
var i = 0;
setInterval(function(){
    i++;
    scroxtLive.addBarrage(i+"你好啊")
},100)
//用户自己发的弹幕
setTimeout(function(){
    scroxtLive.addBarrage("一一一一一一一一一一",true)
},3000);
</script>
...

параметр:

  • target: целевой элемент контейнера
    метод:
  • addBarrage: добавить заграждение

4-2. Шквал прямых трансляций совместим с браузерами более ранних версий.

Браузер Firefox, ниже IE9, и прокрутка элементов работы браузера достигает определенного числа, будут серьезные потери кадров. Так вот в форсированном режиме плагин контролирует количество заграждений (до 65 заграждений на экране). Однако шквал, который видит пользователь, не может отсутствовать.Когда пользователь отправляет шквал сам, передав второй параметр true методу addBarrage, шквал появится только на собственном компьютере пользователя, который достиг цели обмана. . Апи выглядит следующим образом:

<script type="text/javascript">
var scroxtLive = new scroxt.Live({
    target: ".scroxt-video-barrage",
    strongLock:true
});

//用户自己发的弹幕
setTimeout(function(){
    scroxtLive.addBarrage("一一一一一一一一一一",true)
},3000);
</script>

Связаться с автором: qq-1737752975

Категории