要在jQuery中根据视频的播放时间显示字幕,你可以监听视频的timeupdate
事件,该事件在视频的播放位置发生改变时触发。以下是一个简单的示例,假设你有一个视频元素和相应的字幕列表:
HTML:
<video id="video" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div id="subtitles">
<div class="subtitle" data-start="10" data-end="20">这是第一个字幕</div>
<div class="subtitle" data-start="20" data-end="30">这是第二个字幕</div>
<!-- 更多字幕 -->
</div>
JavaScript (使用jQuery):
$(document).ready(function() {
var $video = $('#video');
var $subtitles = $('#subtitles .subtitle');
$video.on('timeupdate', function() {
var currentTime = $video[0].currentTime; // 当前播放时间
$subtitles.each(function() {
var $subtitle = $(this);
if (currentTime >= $subtitle.data('start') && currentTime < $subtitle.data('end')) {
// 显示字幕
$subtitle.css('display', 'block');
} else {
// 隐藏字幕
$subtitle.css('display', 'none');
}
});
});
// 初始隐藏所有字幕
$subtitles.hide();
});
确保你的视频和字幕时间戳正确,并根据需要调整字幕的显示方式。这个示例中使用了.data()
函数来存储字幕的开始和结束时间,并在timeupdate
事件处理函数中根据视频的当前时间来显示和隐藏字幕。