81 lines
2.4 KiB
HTML
81 lines
2.4 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Mlib5</title>
|
|
<meta name="robots" content="noindex, nofollow">
|
|
<meta name="creator" content="stubbfel">
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
|
|
|
|
<link rel="stylesheet" type="text/css" href="css/style.css" title="style">
|
|
</head>
|
|
<body onload="pageLoad();">
|
|
<div id="wrapper">
|
|
<header id="mlibheader">
|
|
mlib5
|
|
</header>
|
|
<div id="breadcrumb"></div>
|
|
<div id="contentwrapper">
|
|
<nav id="sidenav">
|
|
<ul>
|
|
<li>item1</li>
|
|
<li>item2</li>
|
|
<li>item3</li>
|
|
<li>subitem1</li>
|
|
<li>subitem2</li>
|
|
<li>item4</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<section id="playersec">
|
|
<div id="timeline">test</div>
|
|
<audio controls autoplay id="player">
|
|
<source id ="playersource" src="audio.ogg">;
|
|
</audio>
|
|
</section>
|
|
|
|
<nav id="playerlistsec">
|
|
<ul class="menu">
|
|
<li onclick="jump('audio.ogg#t=3000','Kapitel1')">Kapitel1</li>
|
|
<li class="subli" onclick="jump('audio.ogg#t=3000','Kapitel1')">UnterKapitel1</li>
|
|
<li class="subli" onclick="jump('audio.ogg#t=6000','Kapitel2')">UnterKapitel2</li>
|
|
<li class="subli" onclick="jump('audio.ogg#t=9000','Kapitel3')">UnterKapitel3</li>
|
|
<li onclick="jump('audio2.ogg#t=5000','Kapitel4')">Kapitel4</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<footer></footer>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
<script>
|
|
var actTitle = "start";
|
|
var bread = document.getElementById('breadcrumb');
|
|
var player = document.getElementById('player');
|
|
var mediaSource = document.getElementById('playersource');
|
|
|
|
function pageLoad() {
|
|
player.addEventListener('timeupdate', timeUpdate);
|
|
player.addEventListener('onended', trackEndet);
|
|
|
|
}
|
|
|
|
function jump(newSrc,newTitle) {
|
|
mediaSource.src = newSrc;
|
|
actTitle = newTitle;
|
|
player.load();
|
|
}
|
|
|
|
function timeUpdate() {
|
|
|
|
if (player.currentTime > 9000) {
|
|
actTitle = 'Kapitelbread2';
|
|
}
|
|
bread.innerHTML = actTitle;
|
|
}
|
|
|
|
function trackEndet() {
|
|
bread.innerHTML = actTitle;
|
|
}
|
|
</script>
|