字幕字型滾動外掛——scroxt.js

jef發表於2019-03-01
JS

README

scroxt.js Overview

scroxt.js是一個字型滾動的外掛庫，包括視訊彈幕滾動，直播彈幕、直播彈幕強制模式、單行水平左右滾動、文字垂直滾動上下，用於簡單快捷生成滾動字型。效能優秀，通過CPU加速，快取字型元素，幀運動，達到最流暢的效果。相容Chrome、Firefox、Opera、IE9及IE9以上瀏覽器。

Installation

npm install --save scroxt複製程式碼

更新

2017.11.08 視訊彈幕增加播放，暫停，重播，快進，快退介面。詳細檢視視訊彈幕

Getting Started

你能很方便的使用外掛用於字型滾動，scroxt是對一個物件，滾動方式不同對應不同的類名，像水平滾動的類名是Horizontal作為scroxt的屬性，使用的時候只要new scroxt.Horizontal來生成滾動字型。這裡有詳細的例子

demo

一、水平滾動

new scroxt.Horizontal({
    target: ".my-ele",
    data: [`第一條`,`第2條`,`第3條`],
    speed: -5
});複製程式碼

引數：

  • target：水平滾動字型的容器css選擇器
  • data：字型陣列
  • speed: 滾動速度，單位幀移動的距離= speed * 0.1。speed的大小範圍為 1-10

二、垂直滾動

new scroxt.Vertical({
    target: ".my-ele",
    data: [`第一條`,`第2條`,`第3條`,`第4條`,`第5條`],
    speed: 5
});複製程式碼

引數：

  • target：垂直滾動字型的容器css選擇器
  • data：字型陣列
  • speed: 滾動速度，speed的大小範圍為 1-10。單位幀移動的距離= speed * 0.1。

三、視訊彈幕

...
<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引數：

  • video：視訊標籤的css選擇器
  • dataTime：彈幕陣列，陣列每一項由data和time欄位組成，data是每條彈幕的內容，time是彈幕出現的時間/秒單位(video播放的時間);

scroxt.Barrage例項引數：

  • play(): 開始播放
  • stop(): 暫停播放
  • restart(): 重新播放
  • moveInterval(s): 快進s秒
  • moveInterval(-s): 後退s秒

四-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：新增彈幕

四-2、直播彈幕相容低版本的瀏覽器

火狐瀏覽器、IE9以下、瀏覽器操作元素滾動達到一定數量會出現嚴重掉幀的情況。所以在強制模式下，外掛控制彈幕數量（螢幕最多65條彈幕）。但使用者自己看到的彈幕不能缺失，當使用者自己發彈幕時，通過給addBarrage方法傳第二個引數true，只在使用者自己電腦上出現彈幕，已達到欺騙的目的。api如下：

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

//使用者自己發的彈幕
setTimeout(function(){
    scroxtLive.addBarrage("一一一一一一一一一一",true)
},3000);
</script>複製程式碼

聯絡作者：qq-1737752975

相關文章