javascript，为啥在播放视频时第二行无法从第一行替换？
Posted
技术标签:
【中文标题】javascript，为啥在播放视频时第二行无法从第一行替换？【英文标题】：javascript, why the second text line couldn't replace from first line while the video is playing?javascript，为什么在播放视频时第二行无法从第一行替换？ 【发布时间】：2013-04-03 21:01:49 【问题描述】：我希望字幕在视频上显示 2 行，这意味着当第一个文本出现在第一行时，第一行将移动到第二行。不知何故，它不起作用，因为第一行和第二行打印相同的字幕。负责显示文本的函数是 $("#video").bind('timeupdate',function()); “text”变量应该显示第一行，“second”变量应该显示从第一个文本替换的第二行。我的网站示例可以在 a link 上看到（在 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>
.containerposition: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" 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>
【问题讨论】：
【参考方案1】：我找到了解决方案，这里有代码，
var tempText = "", prevText="";
$("#video").bind('timeupdate',function()
var text = "", cap = "";
for( var i = 0; i < subtitleArray.length;i++)
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 (tempText != text && text != "")
prevText = tempText;
$("#second").html(prevText);
subtitle.innerHTML = text;
if ( text != "" )
tempText = text;
);
【讨论】：
以上是关于javascript，为啥在播放视频时第二行无法从第一行替换？的主要内容，如果未能解决你的问题，请参考以下文章
使用 AVPlayer 时为啥我的视频无法在我的 UIView 中播放
为啥我的第二个音频文件不能使用 currentTime 属性播放？