I'm using video JS HTML5 player to play some videos and I want to add a visual representation of the chapters underneath the video player.
I'm basically grabbing how many chapters there are from the database and create that number of the divs with PHP.
<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>
So there is chapter-breaker-title divs that are going to be styled to be the actual size of the chapters and there are chapter breaker which are just a line, 1% thick to split the chapters.
I then use a JavaScript onload function to style these divs.
/* -----------------------------------------------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] ?>";
}
So this is what it should look like:
The problem is that this works on all browsers apart from Internet Explorer.
It's as if the divs are not having their width styled at all.
So it looks like this:
If anyone can see or explain why this may not be working, it would be very helpful
.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 output :
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>
The ouput of the divs all seem fine to me but the javascript has not styled the width of the chapter-breaker-title divs
