最初のテキストが最初の行に表示されるため、最初の字幕行が2行目に移動することを意味するビデオに字幕を2行表示したい。1 行目と 2 行目で同じ字幕が出力されるため、どういうわけか機能しません。テキストの表示を担当する関数は $("#video").bind('timeupdate',function(){}); です。「text」変数は最初の行を表示し、「second」変数は最初のテキストから置き換えられた 2 行目を表示する必要があります。私のウェブサイトの例は、リンクで見ることができます(Firefox で動作)。動画上部のサブタイトルは「秒」、動画下部のサブタイトルは「テキスト」です。字幕の場所を気にしないでください。機能が正常に動作するようになったら修正します。
ここに私のHTML5 / JavaScriptコーディング例、
<html>
<head>
<title>HTML5 included Javascript....</title>
<meta name="description" content="Test" charset="utf-8"></meta>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<style>
.container{position:relative;}
.container video {
position:absolute;
z-index:-1;
}
.subtitle2 {
position:absolute;
width:640px;
top:400;
left:120;
z-index:2000;
color:white;
text-shadow:black 2px 2px 6px;
font-weight:bold;
font-size:150%;
}
.second {
position:absolute;
z-index:2000;
color:white;
text-shadow:black 2px 2px 6px;
font-weight:bold;
font-size:150%;
}
</style>
<script type="text/javascript">
var subtitleArray = new Array(); //stored all values from XML caption file
var tempText = "";
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",dname,false);
xhttp.send();
return xhttp.responseXML;
}
function getCaption()
{
//alert("get caption 2");
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
}
//c.innerHTML = subtitleArray[0][2];
}
$(document).ready(function(){
//alert("get caption 1");
getCaption();
var subtitle2 = document.getElementById('subtitle2');
var video = document.getElementById('video');
$("#video").bind('play',function(){
/*
setInterval(function(){
//timer.innerHTML = $('#video')[0].currentTime;
var text = "", cap = "";
for( var i = 0; i < subtitleArray.length;i++)
{
//alert("looping");
//var currentTime = video.currentTime();
var cueStart = parseFloat(subtitleArray[i][0]);
var cueEnd = cueStart + parseFloat(subtitleArray[i][1]);
cap = subtitleArray[i][2];
if (video.currentTime >= cueStart && video.currentTime <= cueEnd) {
text = cap;
}
//var t = document.getElementById('timer').innerHTML = text;
$( "#second" ).html( prevLineText );
console.log( prevLineText );
subtitle.innerHTML = text;
prevLineText = text;
console.log( prevLineText +"\n");
}
},1);*/
});
$("#video").bind('timeupdate',function(){
//timer2.innerHTML = $('#video')[0].currentTime;
var text = "", cap = "";
for( var i = 0; i < subtitleArray.length;i++)
{
//alert("looping");
//var currentTime = video.currentTime();
var cueStart = parseFloat(subtitleArray[i][0]);
var cueEnd = cueStart + parseFloat(subtitleArray[i][1]);
cap = subtitleArray[i][2];
if (video.currentTime >= cueStart && video.currentTime <= cueEnd) {
text = cap;
}
if ( text != tempText && text != "" ) {
console.log( text );
console.log(tempText);
$("#second").html(text);
}
subtitle2.innerHTML = text;
tempText = text;
console.log( tempText );
}
});
});
//window.onload = load;
</script>
</head>
<body>
<div id="container" class="container">
<video id="video" width="930" height="492" controls>
<source src="caption.mp4" type="video/mp4">
<source src="caption.ogg" type="video/ogg" />
<source src="caption.webm" type="video/webm" />
</video>
<div id= "subtitle2" class="subtitle2">
</div>
<div id="second" class="second">
</div>
</div>
</body>
</html>