play-resources: chapters support
This commit is contained in:
parent
860961e377
commit
efa2077840
|
@ -31,7 +31,7 @@ function arrayForEach(array, iter) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function addButton(container, res) {
|
function addButton(container, res, chapters) {
|
||||||
var button = $('<a class="play" title="Abspielen"><span class="postercaption">▶ Play</span></a>');
|
var button = $('<a class="play" title="Abspielen"><span class="postercaption">▶ Play</span></a>');
|
||||||
if (res.poster) {
|
if (res.poster) {
|
||||||
var img = $('<img class="poster"/>');
|
var img = $('<img class="poster"/>');
|
||||||
|
@ -54,7 +54,7 @@ function addButton(container, res) {
|
||||||
button.click(function() {
|
button.click(function() {
|
||||||
button.remove();
|
button.remove();
|
||||||
|
|
||||||
addPlayer(container, res);
|
addPlayer(container, res, chapters);
|
||||||
|
|
||||||
var section = container.parents().
|
var section = container.parents().
|
||||||
filter(function() {
|
filter(function() {
|
||||||
|
@ -66,7 +66,16 @@ function addButton(container, res) {
|
||||||
container.append(button);
|
container.append(button);
|
||||||
}
|
}
|
||||||
|
|
||||||
function addPlayer(container, res) {
|
function parseTime(time) {
|
||||||
|
var parts = time.split(":"), part;
|
||||||
|
var r = 0;
|
||||||
|
while((part = parts.shift())) {
|
||||||
|
r = r * 60 + parseInt(part);
|
||||||
|
}
|
||||||
|
return r;
|
||||||
|
}
|
||||||
|
|
||||||
|
function addPlayer(container, res, chapters) {
|
||||||
var types = arrayMap(res, function(res) {
|
var types = arrayMap(res, function(res) {
|
||||||
return res.type;
|
return res.type;
|
||||||
});
|
});
|
||||||
|
@ -127,6 +136,30 @@ function addPlayer(container, res) {
|
||||||
if (fallback)
|
if (fallback)
|
||||||
html5player.append(fallback);
|
html5player.append(fallback);
|
||||||
container.append(html5player);
|
container.append(html5player);
|
||||||
|
if (chapters[0]) {
|
||||||
|
var dl = $('<dl class="chapters"></dl>');
|
||||||
|
var prevStart;
|
||||||
|
chapters.find('chapter').each(function() {
|
||||||
|
var title = this.getAttribute('title');
|
||||||
|
var start = this.getAttribute('start');
|
||||||
|
var href = this.getAttribute('href');
|
||||||
|
if (start && start != prevStart) {
|
||||||
|
var dt = $('<dt><a href="#"></a></dt>');
|
||||||
|
var dt_a = dt.find('a');
|
||||||
|
dt_a.text(start);
|
||||||
|
dt_a.click(function(ev) {
|
||||||
|
ev.preventDefault();
|
||||||
|
html5player[0].currentTime = parseTime(start);
|
||||||
|
});
|
||||||
|
dl.append(dt);
|
||||||
|
}
|
||||||
|
prevStart = start;
|
||||||
|
var dd = $('<dd></dd>');
|
||||||
|
dd.text(title);
|
||||||
|
dl.append(dd);
|
||||||
|
});
|
||||||
|
container.append(dl);
|
||||||
|
}
|
||||||
} else if (fallback) {
|
} else if (fallback) {
|
||||||
container.append(fallback);
|
container.append(fallback);
|
||||||
} else {
|
} else {
|
||||||
|
@ -164,7 +197,7 @@ $(document).ready(function() {
|
||||||
}), canPlay)) {
|
}), canPlay)) {
|
||||||
var liEl = $('<li class="play-resource"></li>');
|
var liEl = $('<li class="play-resource"></li>');
|
||||||
$(this).before(liEl);
|
$(this).before(liEl);
|
||||||
var player = addButton(liEl, res);
|
var player = addButton(liEl, res, $(this).find('chapters'));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} catch (x) {
|
} catch (x) {
|
||||||
|
|
|
@ -717,6 +717,26 @@ li audio, li video, li .poster {
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.chapters {
|
||||||
|
margin: 0.5em auto;
|
||||||
|
}
|
||||||
|
.chapters dt, .chapters dd {
|
||||||
|
line-height: 2em;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.chapters dt {
|
||||||
|
width: 8em;
|
||||||
|
text-align: right;
|
||||||
|
margin-bottom: -2em;
|
||||||
|
}
|
||||||
|
.chapters dt:after {
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
.chapters dd {
|
||||||
|
margin-left: 10em;
|
||||||
|
}
|
||||||
|
|
||||||
p.blockquote {
|
p.blockquote {
|
||||||
padding: .5em .5em .5em 2em;
|
padding: .5em .5em .5em 2em;
|
||||||
border-left: 20px solid #eee;
|
border-left: 20px solid #eee;
|
||||||
|
|
Loading…
Reference in New Issue