字幕字体滚动插件

2023-04-14 13:05| 来源: 网络整理| 查看: 265

READMEscroxt.js Overview

scroxt.js是一个字体滚动的插件库，包括视频弹幕滚动，直播弹幕、直播弹幕强制模式、单行水平左右滚动、文本垂直滚动上下，用于简单快捷生成滚动字体。性能优秀，通过CPU加速，缓存字体元素，帧运动，达到最流畅的效果。兼容Chrome、Firefox、Opera、IE9及IE9以上浏览器。

Installationnpm 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。三、视频弹幕... 播放暂停快进 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); }); ...复制代码

scroxt.Barrage参数：

video：视频标签的css选择器 dataTime：弹幕数组，数组每一项由data和time字段组成，data是每条弹幕的内容，time是弹幕出现的时间/秒单位(video播放的时间);

scroxt.Barrage实例参数：

play(): 开始播放 stop(): 暂停播放 restart(): 重新播放 moveInterval(s): 快进s秒 moveInterval(-s): 后退s秒四-1、直播弹幕... 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); ...复制代码

参数：

target：目标容器元素方法： addBarrage：添加弹幕四-2、直播弹幕兼容低版本的浏览器

火狐浏览器、IE9以下、浏览器操作元素滚动达到一定数量会出现严重掉帧的情况。所以在强制模式下，插件控制弹幕数量（屏幕最多65条弹幕）。但用户自己看到的弹幕不能缺失，当用户自己发弹幕时，通过给addBarrage方法传第二个参数true，只在用户自己电脑上出现弹幕，已达到欺骗的目的。api如下：

var scroxtLive = new scroxt.Live({ target: ".scroxt-video-barrage", strongLock:true }); //用户自己发的弹幕 setTimeout(function(){ scroxtLive.addBarrage("一一一一一一一一一一",true) },3000); 复制代码

联系作者：qq-1737752975

【本文地址】

字幕字体滚动插件

字幕字体滚动插件

今日新闻

推荐新闻