mirror of
https://github.com/bytedance/xgplayer.git
synced 2025-04-05 03:05:02 +08:00
feat(xgplayer): 字幕增加逐字显示能力
This commit is contained in:
hongqiongxing
hongqx
parent
b0a890a4f7
commit
26fcf2c246
218
fixtures/subtitle/index.html
Normal file
218
fixtures/subtitle/index.html
Normal file
@ -0,0 +1,218 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="referrer" content="no-referrer" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
|
||||
<script>
|
||||
var ua = navigator.userAgent.toLowerCase()
|
||||
console.log('ua', ua, (ua.indexOf('mobile') > -1 || ua.indexOf('ipad') > -1) && location.href.indexOf('vconsole=1') > -1)
|
||||
if ((ua.indexOf('mobile') > -1 || ua.indexOf('ipad') > -1) && location.href.indexOf('vconsole=1') > -1) {
|
||||
var vConsole = new window.VConsole();
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.pannel {
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
background: #72a0c8;
|
||||
}
|
||||
.message-pannel {
|
||||
margin-top: 20px;
|
||||
color: #333a3c;
|
||||
}
|
||||
.message-info {
|
||||
margin-top: 20px;
|
||||
border: 1px solid #728bb8;
|
||||
padding: 10px 10px;
|
||||
}
|
||||
h4 {
|
||||
margin-block-start: 0.2em;
|
||||
margin-block-end: 0.2em;
|
||||
}
|
||||
p {
|
||||
line-height: 18px;
|
||||
display: block;
|
||||
line-height: 16px;
|
||||
/* margin: 10px; */
|
||||
margin-block-start: 0.4em;
|
||||
margin-block-end: 0.4em;
|
||||
}
|
||||
.ext-controls0 {
|
||||
height: 80px !important;
|
||||
background-color: #000;
|
||||
}
|
||||
.xgplayer .my-pop {
|
||||
height: 100px;
|
||||
width: 400px;
|
||||
background-color: #72a0c8;
|
||||
border: 2px solid red;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
padding-left: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="video0" style="margin: 0 auto"></div>
|
||||
<div class="pannel">
|
||||
<div class="tool">
|
||||
<button type="submit" class="btn" id="js-destroy0" onclick="window.destroy(0)">
|
||||
销毁
|
||||
</button>
|
||||
<button type="submit" class="btn" id="js-reinit0" onclick="window.init(0)">
|
||||
重新初始化
|
||||
</button>
|
||||
<button type="submit" class="btn" id="js-playnext0" onclick="window.playNext(0)">
|
||||
播放下一个
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn"
|
||||
id="js-changelang0"
|
||||
onclick="window.changeLang(0)"
|
||||
>
|
||||
切换语言
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn"
|
||||
id="js-changelang0"
|
||||
onclick="window.createDot(0)"
|
||||
>
|
||||
添加预览点
|
||||
</button>
|
||||
</div>
|
||||
<div class="message-pannel">
|
||||
<div class="message-info" id="js-show-lang0">
|
||||
<h4>current lang:</h4>
|
||||
</div>
|
||||
|
||||
<div class="message-info" id="js-show-log0">
|
||||
<h4>log info:</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.WorldBookDayQuestionOne__textWrap {
|
||||
/* width: 150px; */
|
||||
margin: 0 auto;
|
||||
margin-top: 100px;
|
||||
background-color: burlywood;
|
||||
}
|
||||
.WorldBookDayQuestionOne__text {
|
||||
opacity: 0;
|
||||
animation: fade-in 1500ms ease-out both 1/*infinite*/;
|
||||
/* @for $idx from 1 through 50 {
|
||||
&:nth-child(#{$idx}) {
|
||||
animation-delay: #{($idx - 1) * $fadeInDur};
|
||||
}
|
||||
} */
|
||||
}
|
||||
.WorldBookDayQuestionOne__text:nth-child(1) {
|
||||
animation-delay: 0ms;
|
||||
}
|
||||
.WorldBookDayQuestionOne__text:nth-child(2) {
|
||||
animation-delay: 100ms;
|
||||
}
|
||||
.WorldBookDayQuestionOne__text:nth-child(3) {
|
||||
animation-delay: 200ms;
|
||||
}
|
||||
.WorldBookDayQuestionOne__text:nth-child(4) {
|
||||
animation-delay: 300ms;
|
||||
}
|
||||
.WorldBookDayQuestionOne__text:nth-child(5) {
|
||||
animation-delay: 400ms;
|
||||
}
|
||||
.WorldBookDayQuestionOne__text:nth-child(6) {
|
||||
animation-delay: 500ms;
|
||||
}
|
||||
.WorldBookDayQuestionOne__text:nth-child(7) {
|
||||
animation-delay: 600ms;
|
||||
}
|
||||
.WorldBookDayQuestionOne__text:nth-child(8) {
|
||||
animation-delay: 700ms;
|
||||
}
|
||||
.WorldBookDayQuestionOne__text:nth-child(9) {
|
||||
animation-delay: 800ms;
|
||||
}
|
||||
.WorldBookDayQuestionOne__text:nth-child(10) {
|
||||
animation-delay: 900ms;
|
||||
}
|
||||
.WorldBookDayQuestionOne__text:nth-child(11) {
|
||||
animation-delay: 1000ms;
|
||||
}
|
||||
|
||||
.WorldBookDayQuestionOne__text:nth-child(12) {
|
||||
animation-delay: 1100ms;
|
||||
}
|
||||
.WorldBookDayQuestionOne__text:nth-child(13) {
|
||||
animation-delay: 1200ms;
|
||||
}
|
||||
.WorldBookDayQuestionOne__text:nth-child(14) {
|
||||
animation-delay: 1300ms;
|
||||
}
|
||||
.WorldBookDayQuestionOne__text:nth-child(15) {
|
||||
animation-delay: 1400ms;
|
||||
}
|
||||
.WorldBookDayQuestionOne__text:nth-child(16) {
|
||||
animation-delay: 1500ms;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="WorldBookDayQuestionOne__textWrap">
|
||||
<span key="0" class="WorldBookDayQuestionOne__text">你</span>
|
||||
<span key="0" class="WorldBookDayQuestionOne__text">好</span>
|
||||
<span key="0" class="WorldBookDayQuestionOne__text">我</span>
|
||||
<span key="0" class="WorldBookDayQuestionOne__text">是</span>
|
||||
<span key="0" class="WorldBookDayQuestionOne__text">布</span>
|
||||
<span key="0" class="WorldBookDayQuestionOne__text">莱</span>
|
||||
<span key="0" class="WorldBookDayQuestionOne__text">恩</span>
|
||||
<span key="0" class="WorldBookDayQuestionOne__text">哈</span>
|
||||
<span key="0" class="WorldBookDayQuestionOne__text">里</span>
|
||||
<span key="0" class="WorldBookDayQuestionOne__text">斯</span>
|
||||
<span key="0" class="WorldBookDayQuestionOne__text"><b>图形技术总监游戏</b></span>
|
||||
<span key="0" class="WorldBookDayQuestionOne__text">。嗨</span>
|
||||
<span key="0" class="WorldBookDayQuestionOne__text">我是</span>
|
||||
<span key="0" class="WorldBookDayQuestionOne__text">杰罗姆</span>
|
||||
<span key="0" class="WorldBookDayQuestionOne__text">请</span>
|
||||
<span key="0" class="WorldBookDayQuestionOne__text">注意</span>
|
||||
</div>
|
||||
<style>
|
||||
@keyframes typing {
|
||||
from { width: 0 }
|
||||
to {width: 100%;}
|
||||
}
|
||||
.my-texts {
|
||||
font-size: 18px;
|
||||
display: inline-block;
|
||||
/* width: 1000px; */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
animation: typing 2s steps(30);
|
||||
}
|
||||
</style>
|
||||
<p class="my-texts">你好，我是布莱恩哈里斯，<b>图形技术总监游戏</b>。嗨，我是杰罗姆请注意目标特别计划的一部分</p>
|
||||
<script></script>
|
||||
<script type="module" defer src="./index.js"></script>
|
||||
<script>
|
||||
// window.onload = function(){
|
||||
// window.initPlayer()
|
||||
// }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
359
fixtures/subtitle/index.js
Normal file
359
fixtures/subtitle/index.js
Normal file
@ -0,0 +1,359 @@
|
||||
import Player, { SimplePlayer, Util } from '../../packages/xgplayer/src/index'
|
||||
// import Poster from '../../packages/xgplayer/src/plugins/poster'
|
||||
// import Start from '../../packages/xgplayer/src/plugins/start'
|
||||
// import { TextTrack } from '../../packages/xgplayer/src/index'
|
||||
import { I18N } from '../../packages/xgplayer/src'
|
||||
// import DynamicBg from '../../packages/xgplayer/src/plugins/dynamicBg'
|
||||
import Subtitle from '../../packages/xgplayer-subtitles/src'
|
||||
console.log('vconsole')
|
||||
window.Util = Util
|
||||
window.POS = {
|
||||
"h": 0.40625,
|
||||
"y": 0.1899999976158142
|
||||
}
|
||||
// 全局配置语言
|
||||
I18N.extend([
|
||||
{
|
||||
LANG: 'zh',
|
||||
TEXT: {
|
||||
PAUSE_TIPS: '暂停0',
|
||||
PLAY_TIPS: '起播0'
|
||||
}
|
||||
},
|
||||
{
|
||||
LANG: 'en',
|
||||
TEXT: {
|
||||
PAUSE_TIPS: 'Pause0',
|
||||
PLAY_TIPS: 'Play0'
|
||||
}
|
||||
}
|
||||
])
|
||||
|
||||
window.player = null
|
||||
window.player1 = null
|
||||
window.subtitle = null
|
||||
function init(index = 0, config = {}) {
|
||||
const p = `player${index}`
|
||||
if (window[p]) {
|
||||
window[p].destroy()
|
||||
window[p] = null
|
||||
}
|
||||
window[p] = new Player({
|
||||
id: 'video' + index,
|
||||
url: './demo.mp4',
|
||||
DynamicBg: {
|
||||
disable: false
|
||||
},
|
||||
marginControls: true,
|
||||
loop: false,
|
||||
autoplay: true,
|
||||
autoplayMuted: false,
|
||||
videoInit: true,
|
||||
preloadTime: 20,
|
||||
width: '80%',
|
||||
ignores:['playbackrate'],
|
||||
plugins: [],
|
||||
rotate: true,
|
||||
// controls: {
|
||||
// // mode: 'normal',
|
||||
// // initShow: true
|
||||
// },
|
||||
fullscreen: {
|
||||
// rotateFullscreen: true
|
||||
},
|
||||
progress: {
|
||||
// root: document.getElementById('controls0')
|
||||
},
|
||||
DynamicBg: {
|
||||
disable: false
|
||||
},
|
||||
volume: {
|
||||
position: 'rootTop'
|
||||
},
|
||||
rotate: {
|
||||
innerRotate: false
|
||||
},
|
||||
mobile: {
|
||||
// gestureX: false
|
||||
},
|
||||
// timeSegments: ,
|
||||
// timeSegmentsControls:{
|
||||
// disable: false,
|
||||
// segments: [{start: 0, end: 10}]
|
||||
// },
|
||||
keyboard: {
|
||||
seekStep: 2
|
||||
},
|
||||
progresspreview: {
|
||||
// width: 88.23,
|
||||
// height: 50,
|
||||
mode: 'short'
|
||||
},
|
||||
seekedStatus: 'auto',
|
||||
texttrack: {
|
||||
debugger: false,
|
||||
list: [{
|
||||
label: '双语',
|
||||
language: 'double',
|
||||
id: '0',
|
||||
isDefault: true,
|
||||
url: '../subtitle/vtt/double.vtt',
|
||||
}, {
|
||||
label: '中文',
|
||||
language: 'cn',
|
||||
id: '1',
|
||||
isDefault: undefined,
|
||||
url: '../subtitle/vtt/cn.vtt'
|
||||
}, {
|
||||
label: '英文',
|
||||
url: '../subtitle/vtt/en.vtt',
|
||||
id: '2',
|
||||
isDefault: false,
|
||||
language: 'en'
|
||||
}],
|
||||
updateMode: 'vod',
|
||||
isDefaultOpen: true,
|
||||
mode: 'external',
|
||||
},
|
||||
definition: {
|
||||
position: 'controlsLeft',
|
||||
list: [],
|
||||
defaultDefinition: '360p',
|
||||
isItemClickHide: false
|
||||
},
|
||||
height: 700,
|
||||
startTime: 40,
|
||||
...config
|
||||
})
|
||||
window._onClick = function(id) {
|
||||
console.log(id)
|
||||
}
|
||||
|
||||
// setTimeout(() => {
|
||||
// window[p].registerPlugin(Poster)
|
||||
// }, 10)
|
||||
window[p].once('canplay',() => {
|
||||
console.log('>>>>>canplay seek', window[p].media.seekable.end(0))
|
||||
// window[p].seek(30)
|
||||
// window[p].play()
|
||||
})
|
||||
|
||||
window[p].on('source_success', (data) => {
|
||||
console.log('source_success', data)
|
||||
})
|
||||
window[p].on('source_error', (data) => {
|
||||
console.error('source_error', data)
|
||||
})
|
||||
// window[p].usePluginHooks('progresspreview', 'transformTime', (plugin, time) => {
|
||||
// plugin.setTimeContent(`~~${(time)}~~`)
|
||||
|
||||
// // 阻止插件内部默认钩子逻辑
|
||||
// return false
|
||||
// })
|
||||
|
||||
window[p].on('download_speed_change', data => {
|
||||
console.log('[download_speed_change]', data)
|
||||
// addLog(index, `[download_speed_change] speed:${data.speed}, realTimeSpeed:${data.realTimeSpeed || 0}`)
|
||||
})
|
||||
|
||||
// window[p].on('xglog', data => {
|
||||
// console.log('[xglog]', data)
|
||||
// if (data.eventType === 'firstFrame' || data.eventType === 'waitingEnd') {
|
||||
// addLog(
|
||||
// index,
|
||||
// `[xglog] eventType:${data.eventType} ${data.costTime || 0} ${data.endType || ''}`
|
||||
// )
|
||||
// }
|
||||
// })
|
||||
|
||||
window.currentTime = 0
|
||||
window[p].on('timeupdate', () => {
|
||||
// if (window[p].currentTime > currentTime) {
|
||||
// currentTime = window[p].currentTime
|
||||
// }
|
||||
})
|
||||
window[p].useHooks('play', () => {
|
||||
console.log('useHooks play dddd')
|
||||
return true
|
||||
})
|
||||
window[p].usePluginHooks('mobile', 'videoClick', (plugin, event, data) =>{
|
||||
console.log('mobile videoClick', event, data)
|
||||
return true
|
||||
})
|
||||
|
||||
window[p].usePluginHooks('mobile', 'videoDbClick', (plugin, event, data) =>{
|
||||
console.log('mobile videoDbClick', event, data)
|
||||
return true
|
||||
})
|
||||
|
||||
// window[p].usePluginHooks('progress', 'dragstart', (plugin, event, data) =>{
|
||||
// console.log('progress', data)
|
||||
// // TODO
|
||||
// if (data.currentTime > currentTime) {
|
||||
// return false
|
||||
// }
|
||||
// })
|
||||
|
||||
// window[p].usePluginHooks('progress', 'drag', (plugin, event, data) =>{
|
||||
// // TODO
|
||||
// if (data.currentTime > currentTime) {
|
||||
// return false
|
||||
// }
|
||||
// })
|
||||
|
||||
window[p].on('user_action', data => {
|
||||
console.log('[user_action]', data)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function initSubtitle(player) {
|
||||
const options = {
|
||||
player: player,
|
||||
subTitles: [{
|
||||
label: '中文',
|
||||
language: 'cn',
|
||||
id: '0',
|
||||
isDefault: false,
|
||||
url: './subtitle/double.vtt'
|
||||
}, {
|
||||
label: '中文',
|
||||
language: 'cn',
|
||||
id: '1',
|
||||
// list: _lis1,
|
||||
isDefault: true,
|
||||
//url: 'http://tosv.byted.org/obj/tos-cn-o-0004/0edaf77715f44faebe2e348f5157280a'
|
||||
url: './subtitle/cn1.vtt'
|
||||
//url: 'http://lf1-xgcdn-tos.pstatp.com/obj/tos-cn-o-0004/52ce3882d70941d5b660913cbd83d969'
|
||||
//url: './ass/cn.ass'
|
||||
}, {
|
||||
label: '英文',
|
||||
language: 'en',
|
||||
id: '1',
|
||||
// list: _lis1,
|
||||
isDefault: false,
|
||||
//url: 'http://tosv.byted.org/obj/tos-cn-o-0004/0edaf77715f44faebe2e348f5157280a'
|
||||
url: './subtitle/en2.vtt'
|
||||
//url: 'http://lf1-xgcdn-tos.pstatp.com/obj/tos-cn-o-0004/52ce3882d70941d5b660913cbd83d969'
|
||||
//url: './ass/cn.ass'
|
||||
}],
|
||||
defaultOpen: true,
|
||||
mode: 'stroke',
|
||||
// line: 'single',
|
||||
line: 'double',
|
||||
offsetBottom: 10,
|
||||
baseSizeX: 49, // 横向基准字号
|
||||
baseSizeY: 28, // 竖向基准字号, 宽高比例大于1.2视作竖向视频
|
||||
minSize: 16, // 最小字号
|
||||
minMobileSize: 13, // 移动端兜底字号
|
||||
fitVideo: true, // 是否适配视频画面
|
||||
domRender: true,
|
||||
renderMode: 'step'
|
||||
}
|
||||
let subTitle = new Subtitle(options)
|
||||
subTitle.on('resize', (data) => {
|
||||
console.log('subTitle resize', data)
|
||||
})
|
||||
window.subTitle = subTitle
|
||||
player && subTitle.attachPlayer(player)
|
||||
}
|
||||
|
||||
init()
|
||||
initSubtitle(window.player0)
|
||||
|
||||
// init(1, {
|
||||
// i18n: [
|
||||
// {
|
||||
// LANG: 'zh',
|
||||
// TEXT: {
|
||||
// PLAY_TIPS: '播放1',
|
||||
// PAUSE_TIPS: '暂停1',
|
||||
// PAUSE_TIPS1: '测试1',
|
||||
// CSSFULLSCREEN_TIPS: '网页全屏1'
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// LANG: 'en',
|
||||
// TEXT: {
|
||||
// PLAY_TIPS: 'Play1',
|
||||
// PAUSE_TIPS: 'Pause1',
|
||||
// PAUSE_TIPS1: 'test1',
|
||||
// CSSFULLSCREEN_TIPS: 'pagefullscreen1'
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
// enableContextmenu: true
|
||||
// })
|
||||
|
||||
function addLog(index, mse) {
|
||||
const logDom = document.getElementById(`js-show-log${index}`)
|
||||
const p = document.createElement('p')
|
||||
p.innerHTML = mse
|
||||
logDom.appendChild(p)
|
||||
}
|
||||
|
||||
function clearLog(index) {
|
||||
const logDom = document.getElementById(`js-show-log${index}`)
|
||||
const ps = logDom.getElementsByTagName('p')
|
||||
let _len = ps.length
|
||||
while (ps.length > 0) {
|
||||
logDom.removeChild(ps[0])
|
||||
_len--
|
||||
}
|
||||
}
|
||||
|
||||
function changeLang(index) {
|
||||
const logDom = document.getElementById(`js-show-lang${index}`)
|
||||
const p = logDom.getElementsByTagName('p')
|
||||
const player = window[`player${index}`]
|
||||
if (player.lang === 'zh') {
|
||||
player.lang = 'en'
|
||||
} else if (player.lang === 'en') {
|
||||
player.lang = 'zh'
|
||||
}
|
||||
if (p.length === 0) {
|
||||
const p = document.createElement('p')
|
||||
p.innerHTML = player.lang
|
||||
logDom.appendChild(p)
|
||||
} else {
|
||||
p[0].innerHTML = player.lang
|
||||
}
|
||||
console.log('p', p)
|
||||
}
|
||||
|
||||
function playNext(index) {
|
||||
console.log('playNext', index)
|
||||
const p = `player${index}`
|
||||
const config = {}
|
||||
}
|
||||
|
||||
function destroy(index) {
|
||||
console.log('destroy', index)
|
||||
const p = `player${index}`
|
||||
window[p] && window[p].destroy()
|
||||
}
|
||||
|
||||
window.changeLang = changeLang
|
||||
window.clearLog = clearLog
|
||||
window.addLog = addLog
|
||||
window.playNext = playNext
|
||||
window.destroy = destroy
|
||||
window.initPlayer = init
|
||||
window.initSubtitle = initSubtitle
|
||||
window.createDot = (index) => {
|
||||
const player = window[`player${index}`]
|
||||
const time = parseInt(Math.random(1) * player.duration, 10)
|
||||
const duration = parseInt(Math.random(1) * 30 + 10, 10)
|
||||
const ISPOT = {
|
||||
time: time, // 进度条在此时间戳打点 单位为s
|
||||
text: '', // 打点处的自定义文案
|
||||
id: time, // 标记唯一标识，用于删除的时候索引
|
||||
duration: duration, // 进度条标识点的时长 默认1s【可选】单位为s
|
||||
color: '#fff', // 进度条标识点的显示颜色【可选】
|
||||
style: {}, // 指定样式
|
||||
width: 6,
|
||||
height: 6
|
||||
}
|
||||
console.log(ISPOT)
|
||||
player.plugins.progresspreview.createDot(ISPOT)
|
||||
}
|
||||
@ -46,6 +46,7 @@
|
||||
mode: 'bg', //可选 字幕显示模式，支持bg(背景）和 stroke(字体边框填充)，默认stroke
|
||||
line: 'double', // 可选 字幕最大显示行数 默认单行，single, 支持single/double/three、
|
||||
updateMode: 'vod' // 字幕更新类型，vod-字幕内容会做缓存，live-字幕内容不做缓存, 渲染完即丢弃， 默认为vod 1.1.0 之后的版本支持
|
||||
renderMode: 'normal', // 渲染方式，step - 逐字渲染 normal或者''- 普通渲染
|
||||
debugger: 'false' // 调试信息输出，默认为false
|
||||
}
|
||||
const subTitle = new window.XgSubtitle(options)
|
||||
@ -65,7 +66,13 @@
|
||||
language: any, //必选, 当前字幕对应的语言,language和id必选其一
|
||||
id: any, //必选, 当前字幕对应的id,language和id必选其一
|
||||
isDefault: boolean, //必选 是否是默认字幕
|
||||
url: string //必选 字幕链接地址
|
||||
url: string // url/list/stringContent 必选一个 字幕链接地址
|
||||
list: [{
|
||||
start: number, // 该条字幕开始时间，单位s
|
||||
end: number, // 该条字幕结束时间，单位s
|
||||
text: Array<string> // 字幕内容
|
||||
}],
|
||||
stringContent: string // string类型，该string必须是vtt格式
|
||||
},
|
||||
...
|
||||
],
|
||||
|
||||
@ -89,6 +89,7 @@ export default class Subtitle extends EventEmitter {
|
||||
fontColor: '#fff', // 字体颜色
|
||||
domRender: true,
|
||||
updateMode: 'vod', // 消费模式，vod 点播 live 直播
|
||||
renderMode: '', // step - 逐字渲染
|
||||
debugger: false
|
||||
}
|
||||
|
||||
@ -123,6 +124,9 @@ export default class Subtitle extends EventEmitter {
|
||||
this.seiTime = 0
|
||||
this.lastSeiTime = 0
|
||||
this._curTexts = []
|
||||
this._curRenderTask = []
|
||||
this._renderIntervalId = -1
|
||||
this._lastTimeStamp = -1
|
||||
this.setSubTitles(options.subTitles, this.config.defaultOpen)
|
||||
}
|
||||
|
||||
@ -239,6 +243,8 @@ export default class Subtitle extends EventEmitter {
|
||||
}
|
||||
this.player.on('destroy', this.destroy)
|
||||
this.player.on('timeupdate', this._onTimeupdate)
|
||||
this.player.on('pause', this._onPause)
|
||||
this.player.on('play', this._onPlay)
|
||||
this.player.on('core_event', this._onCoreEvents)
|
||||
if (this._isOpen) {
|
||||
this.switch().catch(e => {
|
||||
@ -254,7 +260,9 @@ export default class Subtitle extends EventEmitter {
|
||||
}
|
||||
player.off('destroy', this.destroy)
|
||||
player.off('timeupdate', this._onTimeupdate)
|
||||
player.on('core_event', this._onCoreEvents)
|
||||
player.off('pause', this._onPause)
|
||||
player.off('play', this._onPlay)
|
||||
player.off('core_event', this._onCoreEvents)
|
||||
if (config.domRender) {
|
||||
if (player.root) {
|
||||
unObserver(player.root, this._onResize)
|
||||
@ -670,6 +678,16 @@ export default class Subtitle extends EventEmitter {
|
||||
return curTime
|
||||
}
|
||||
|
||||
_onPause = () => {
|
||||
this.stopRender()
|
||||
}
|
||||
|
||||
_onPlay = () => {
|
||||
if (this._curRenderTask.length > 0) {
|
||||
this.startRender(-1)
|
||||
}
|
||||
}
|
||||
|
||||
_onTimeupdate = () => {
|
||||
if (!this._isOpen) {
|
||||
return
|
||||
@ -687,7 +705,6 @@ export default class Subtitle extends EventEmitter {
|
||||
this.config.updateMode === 'live' ? this._liveUpdate(curTime) : this._update(curTime)
|
||||
}
|
||||
}
|
||||
getItemsByIndex
|
||||
_onResize = (target) => {
|
||||
const { _videoMeta, config } = this
|
||||
if (!config.domRender) {
|
||||
@ -901,6 +918,7 @@ export default class Subtitle extends EventEmitter {
|
||||
if (!ids || ids.length < 1) {
|
||||
return
|
||||
}
|
||||
this._log('>>>>_renderByWords__remove', ids)
|
||||
const children = this.innerRoot.children
|
||||
const removeIndex = []
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
@ -920,10 +938,11 @@ export default class Subtitle extends EventEmitter {
|
||||
*/
|
||||
__render (jsonItems = []) {
|
||||
this._log('__render', jsonItems.length, this.config.domRender)
|
||||
if (jsonItems.length > 0 && this.config.domRender) {
|
||||
jsonItems.map(jsonItem => {
|
||||
const { renderMode, domRender } = this.config
|
||||
if (jsonItems.length > 0 && domRender) {
|
||||
jsonItems.forEach(jsonItem => {
|
||||
let className = `text-track-${this.config.line}`
|
||||
jsonItem.text.map((item, index) => {
|
||||
jsonItem.text.forEach((itemText, index) => {
|
||||
if (index > 0) {
|
||||
className += ' text-track-deputy'
|
||||
}
|
||||
@ -933,12 +952,99 @@ export default class Subtitle extends EventEmitter {
|
||||
'data-end': jsonItem.end,
|
||||
'data-index': jsonItem.index
|
||||
}
|
||||
this.innerRoot.appendChild(Util.createDom('xg-text-track-span', item, attr, className))
|
||||
const _dom = Util.createDom('xg-text-track-span', '', attr, className)
|
||||
this.innerRoot.appendChild(_dom)
|
||||
if (renderMode === 'step') {
|
||||
// 用于宽度占位
|
||||
const _dom1 = Util.createDom('xg-text-track-span', '', attr, `${className} text-track-space`)
|
||||
this.innerRoot.appendChild(_dom1)
|
||||
_dom1.innerHTML = itemText
|
||||
this._renderByWords(_dom, index, jsonItem.start, jsonItem.end, itemText)
|
||||
} else {
|
||||
_dom.innerHTML = itemText
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
_renderByWords (_dom, index, start, end, itemText) {
|
||||
const _textNode = document.createTextNode('')
|
||||
_dom.appendChild(_textNode)
|
||||
const _words = Util.splitWords(itemText)
|
||||
// 避免显示不全，缩短时长100ms
|
||||
let duration = parseInt((end - start) * 1000, 10)
|
||||
if (duration > 300) {
|
||||
duration -= 100
|
||||
}
|
||||
const _len = _words.length
|
||||
const _task = {
|
||||
dom: _textNode,
|
||||
ids: index,
|
||||
wordList: _words,
|
||||
interval: duration / _len,
|
||||
start,
|
||||
end,
|
||||
duration,
|
||||
lastTime: 0
|
||||
}
|
||||
this._log('>>>>_renderByWords', duration, _task)
|
||||
const { _curRenderTask } = this
|
||||
let _index = -1
|
||||
for (let i = 0; i < _curRenderTask.length; i++) {
|
||||
if (_curRenderTask[i].ids === index) {
|
||||
_index = i
|
||||
break
|
||||
}
|
||||
}
|
||||
if (_index > -1) {
|
||||
_curRenderTask.slice(_index, 1)
|
||||
}
|
||||
_curRenderTask.push(_task)
|
||||
this.startRender(-1)
|
||||
}
|
||||
|
||||
startRender = (timer) => {
|
||||
if (timer > 0 && this._renderIntervalId) {
|
||||
window.cancelAnimationFrame(this._renderIntervalId)
|
||||
this._renderIntervalId = -1
|
||||
}
|
||||
if (!this.textTrack) {
|
||||
return
|
||||
}
|
||||
const { _curRenderTask } = this
|
||||
this._lastTimeStamp = new Date().getTime()
|
||||
const emptyArr = [] // 单词列表为空需要清空的索引
|
||||
_curRenderTask.forEach((item, index) => {
|
||||
const { lastTime, wordList, interval, dom, ids } = item
|
||||
if (timer < 0 || this._lastTimeStamp < 0 || this._lastTimeStamp - lastTime >= interval) {
|
||||
const _words = wordList.shift()
|
||||
_words && dom.appendData(_words)
|
||||
item.lastTime = this._lastTimeStamp
|
||||
}
|
||||
if (wordList.length < 1) {
|
||||
emptyArr.push({
|
||||
index,
|
||||
ids: ids
|
||||
})
|
||||
}
|
||||
})
|
||||
this._log('>>>>_renderByWords emptyArr', emptyArr.length, _curRenderTask.length)
|
||||
emptyArr.forEach(item => {
|
||||
_curRenderTask.splice(item.index, 1)
|
||||
this._log('>>>_renderByWords remove emptyArr', item.index, _curRenderTask.length)
|
||||
})
|
||||
if (_curRenderTask.length > 0) {
|
||||
this._renderIntervalId = window.requestAnimationFrame(this.startRender)
|
||||
}
|
||||
}
|
||||
|
||||
stopRender () {
|
||||
if (this._renderIntervalId) {
|
||||
window.cancelAnimationFrame(this._renderIntervalId)
|
||||
}
|
||||
}
|
||||
|
||||
show () {
|
||||
if (!this.config.domRender) {
|
||||
return
|
||||
@ -959,6 +1065,8 @@ export default class Subtitle extends EventEmitter {
|
||||
this.removeAllListeners()
|
||||
this.player = null
|
||||
this.textTrack = null
|
||||
this._curRenderTask = []
|
||||
this.stopRender()
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -20,13 +20,15 @@ xg-text-track.xg-text-track {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
xg-text-track-inner {
|
||||
display: block;
|
||||
max-width: 92%;
|
||||
text-align: center;
|
||||
}
|
||||
xg-text-track-span {
|
||||
display: -webkit-box;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
@ -46,6 +48,11 @@ xg-text-track.xg-text-track {
|
||||
&.text-track-three{
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
&.text-track-space {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.text-track-bg {
|
||||
|
||||
@ -336,4 +336,65 @@ export function checkSubtitle (src, dist) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
export function isEnglish (str) {
|
||||
// 判断字符串是否为空
|
||||
if (str === null || str.trim() === '') {
|
||||
return false
|
||||
}
|
||||
// 判断字符串是否为纯英文
|
||||
return /^[a-zA-Z]+$/.test(str)
|
||||
}
|
||||
/**
|
||||
* 检测是否是半角标点符号
|
||||
* @param {*} str
|
||||
* @returns
|
||||
*/
|
||||
export function patchABCbiaodian (str) {
|
||||
const reg = /[\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]/
|
||||
if (reg.test(str)){
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 检测是否是中文标点符号
|
||||
* @param {*} temp
|
||||
* @returns
|
||||
*/
|
||||
export function patchCn (temp) {
|
||||
const reg = /[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/
|
||||
if (reg.test(temp)){
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
export function splitWords (str) {
|
||||
const arr = str.split('')
|
||||
const retArr = []
|
||||
let lastIsEn = false
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
const _str = arr[i]
|
||||
if (isEnglish(_str)) {
|
||||
if (!lastIsEn) {
|
||||
retArr.push(_str)
|
||||
lastIsEn = true
|
||||
} else {
|
||||
const _lIdx = retArr.length - 1
|
||||
retArr[_lIdx] = `${retArr[_lIdx]}${_str}`
|
||||
}
|
||||
} else if (_str.match(/^[ ]*$/) || patchABCbiaodian(_str) || patchCn(_str)){
|
||||
lastIsEn = false
|
||||
const _lIdx = retArr.length - 1
|
||||
retArr[_lIdx] = `${retArr[_lIdx]}${_str}`
|
||||
} else {
|
||||
lastIsEn = false
|
||||
retArr.push(_str)
|
||||
}
|
||||
}
|
||||
return retArr
|
||||
}
|
||||
@ -37,7 +37,7 @@
|
||||
}
|
||||
|
||||
|
||||
// 外挂字幕的dom样式
|
||||
// // 外挂字幕的dom样式
|
||||
xg-text-track.xg-text-track {
|
||||
font-family: "PingFang SC","SF Pro SC","SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@ -60,13 +60,15 @@ xg-text-track.xg-text-track {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
xg-text-track-inner {
|
||||
display: block;
|
||||
max-width: 92%;
|
||||
text-align: center;
|
||||
}
|
||||
xg-text-track-span {
|
||||
display: -webkit-box;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
@ -86,6 +88,11 @@ xg-text-track.xg-text-track {
|
||||
&.text-track-three{
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
&.text-track-space {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.text-track-bg {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user