gpt4 book ai didi

javascript - HTML5,如何将视频当前时间与标题数组匹配以在Javascript中打印标题?

转载 作者:行者123 更新时间:2023-11-28 09:17:00 32 4
gpt4 key购买 nike

我创建了 subtitleArray,它从 XML 获取开始时间、持续时间和文本。现在我如何匹配包含循环和 if 语句的视频当前播放时间。如果是,它会在网站上打印标题。这是一些代码,

function init()
{
var subtitleArray = new Array();
var tempArray = new Array();
var c = document.getElementById('container');

captionsDoc = loadXMLDoc("captions.xml");
x=captionsDoc.getElementsByTagName('text');

for(var i=0;i<x.length;i++)
{
var tempArray = new Array();
tempArray[0] = x[i].getAttribute('start'); // get start time
tempArray[1] = x[i].getAttribute('dur'); // get duration time
tempArray[2] = x[i].childNodes[0].nodeValue; // get text

subtitleArray[i] = tempArray; //put all 3 values in array


}

video = document.getElementById("caption");

video.addEventListener('progress', progressHandler);
var text = "", cap = "";

function progressHandler() {

for( int i = 0; i < subtitleArray.length;i++)
{
var currentTime = video.getCurrentTime();
var cueStart = parseFloat(subtitleArray[i][0]);
var cueEnd = cueStart + parseFloat(subtitleArray[i][1]);
var diff = cueStart - currentTime;
cap = subtitleArray[i][2];

if (currentTime >= cueStart && currentTime <= cueEnd) {
text = cap.text;
}
}


c.innterHTML = text;



}
window.onload = init;
</script>
</head>

<body>
<video id="caption" width="320" height="240" controls>
<source src="caption.mp4" type="video/mp4">
</video>
<div id="container">
</div>
</body>

最佳答案

我不知道你是否已经看过它并忽略了它,但我相信 Popcorn.js 是专门为此用途而设计的:http://popcornjs.org/

我相信他们有 HTML5 视频与幻灯片、文本等同步的演示。

它在 Github 上开源,并且有很多演示。

关于javascript - HTML5,如何将视频当前时间与标题数组匹配以在Javascript中打印标题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15523798/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com