我正在使用视频 JS HTML5 播放器播放一些视频，我想在视频播放器下方添加章节的视觉表示。
我基本上是从数据库中获取有多少章节，并使用 PHP 创建该数量的 div。
<div class="chapter-progress">
<div class="chapter-breaker"></div>
<? $tableName = 'sourceChapters';
$mysqlQuery = "SELECT * FROM " . $tableName . " WHERE recSourceId = "
.$sourceVideo['recId']. " ORDER BY recOrdering ASC;";
$sourceChapters = mysql_query($mysqlQuery); ?>
<? $chapterBreakerNo = 0; ?>
<? while($chapterBreakers = mysql_fetch_array($sourceChapters)){ ?>
<div class="chapter-breaker-title" id="chapter-breaker-title<?=$chapterBreakerNo?>">
<p><?=$sourceChapters['recContent']?></p></div>
<div class="chapter-breaker" id="chapter-breaker<?=$chapterBreakerNo?>"></div>
<? $chapterBreakerNo++ ?>
<? } ?>
<div class="chapter-breaker-title" id="last-title"></div>
<div class="chapter-breaker" style="float:right"</div>
</div>
因此，有章节分隔符标题 div 将被设置为章节的实际大小，并且章节分隔符只是一条线，1% 厚来分割章节。
然后我使用 JavaScript onload 函数来设置这些 div 的样式。
/* -----------------------------------------------function for styling the chapter progress bar ---------------------------------------*/
function styleChapters(){
//also run the chapter system on load
chapterSys();
// total video duration
var duration = myPlayer.duration();
//find the time difference for the first chapter , this is just the chapter time
var timeDif = (<?=$chapterPlayOffsets[0]?>);
// work out the percentage width for the div width
var percentageMargin = ((timeDif/duration) * 100 -1);
//get the first chapter breaker title and style the width
document.getElementById("chapter-breaker-title0").style.width = percentageMargin + "%";
document.getElementById("chapter-breaker-title0").innerHTML="00";
// for the rest of the chapters
<? for($i=1;$i<count($chapterPlayOffsets);$i++) { ?>
//total video duration
var duration = myPlayer.duration();
// find the difference between the chapter and the previous chapter
var timeDif = (<?=$chapterPlayOffsets[$i]?>) - (<?=$chapterPlayOffsets[$i-1]?>);
// get the percentage for div length minus 1% for the width of the chapter breakers
var percentageMargin = ((timeDif/duration) * 100) -1;
//style each of the divs width
document.getElementById("chapter-breaker-title<?=$i?>").style.width = percentageMargin + "%";
//put the chapter title in
document.getElementById("chapter-breaker-title<?=$i?>").innerHTML="<?= $chapterTitles[$i-1] ?>";
<? } ?>
//put the last title in
<? $lastTitle = count($chapterPlayOffsets)-1 ?>
document.getElementById("last-title").innerHTML="<?=$chapterTitles[$lastTitle] ?>";
}
所以它应该是这样的：
问题是这适用于除 Internet Explorer 之外的所有浏览器。
就好像 div 根本没有宽度样式。
所以它看起来像这样：
如果有人可以看到或解释为什么这可能不起作用，那将非常有帮助
.chapter-progress{
width:100%;
height:20px;
background: rgb(255,204,0)
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC)
-50% 0 repeat;
margin:auto;
float:left;
}
.chapter-breaker{
height:100%;
width:1%;
background-color: rgb(0, 51, 153);
float:left;
}
.chapter-breaker-title{
height:100%;
float:left;
}
HTML 输出：
div class="chapter-progress">
<div class="chapter-breaker"></div>
<div class="chapter-breaker-title" id="chapter-breaker-title0">
00
</div>
<div class="chapter-breaker" id="chapter-breaker0"></div>
<div class="chapter-breaker-title" id="chapter-breaker-title1">
01
</div>
<div class="chapter-breaker" id="chapter-breaker1"></div>
<div class="chapter-breaker-title" id="chapter-breaker-title2">
02
</div>
<div class="chapter-breaker" id="chapter-breaker2"></div>
<div class="chapter-breaker-title" id="chapter-breaker-title3">
03
</div>
<div class="chapter-breaker" id="chapter-breaker3"></div>
<div class="chapter-breaker-title" id="chapter-breaker-title4">
04
</div>
<div class="chapter-breaker" id="chapter-breaker4"></div>
<div class="chapter-breaker-title" id="last-title">
05
</div>
<div class="chapter-breaker" style="float: right;">
</div>
</div>
div的输出对我来说似乎都很好，但是javascript没有设置chapter-breaker-title div的宽度