Innehållsförteckning för video på en website
Hej,
Har fastnat lite med koden (är nybörjare, så kanske inte så konstigt).
Jag försöker att bygga en sida som innehåller en videofilm samt en innehållsförteckning som skall vara klickbar.
Klicket leder till en tidskod i filmen som då startar och sedan slutar på en viss annan tidskod - dvs. man spelar upp ett ämne och sedan pausar filmen eller går till posterframe.
Det jag har gjort är att jag har använt HTML och JavaScript för videostyrningen och det ser ut som följande:
----
<body>
<table>
<tr>
<td>
<div class="center" style="text-align:left">
<p>
<text onclick="playPause()">PLAY FULL FAQ</text><p>
<text onclick="chapt1()">Topic 1</text><br>
<text onclick="chapt2()">Topic 2</text><br>
<text onclick="chapt3()">Topic 3</text><br>
<text onclick="chapt4()">Topic 4</text><p>
</p>
</td>
<td>
<video id="video1" width="500"><source src="minfinavideo.mp4" type="video/mp4"><source src="minfinavideo.ogg" type="video/ogg">Your browser does not support HTML5 video.</source></source></source></video>
</div>
</tr>
<br>
<script type="text/javascript">
var myVideo = document.getElementById("video1");
element.addEventListener("click", playPause());
element.addEventListener("click", chapt1());
element.addEventListener("click", chapt2());
element.addEventListener("click", chapt3());
element.addEventListener("click", chapt4());
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function chapt1() {
myVideo.play();
myVideo.pause();
myVideo.currentTime = 25;
myVideo.duration = 5;
myVideo.play();
}
function chapt2() {
myVideo.play();
myVideo.pause();
myVideo.currentTime = 40;
myVideo.play();;
}
function chapt3() {
myVideo.play();
myVideo.pause();
myVideo.currentTime = 60;
myVideo.play();;
}
function chapt4() {
myVideo.play();
myVideo.pause();
myVideo.currentTime = 75;
}
</script>
</body>
----
Vad jag kämpar med är att hitta kommandot för att sätta "endframe" eller duration på kapitlen i FAQ'n samt vad som händer då den är färdig (hur får jag den att trigga posterbilden?).
Dessutom vill jag att min function PlayPause skall starta från böjan om jag kör kapitel 1 och sedan går tillbaka till att klicka på "Play full FAQ".
Har labbat lite med att sätta in videolänken med olika namn och i HTML5 kunna sätta suffix på videolänken (#t=X,Y), men det kladdar till det väldigt mycket och känns omständigt.
Är det någon som kan förbarma sig över denna fråga? Säkert jättelätt för er som kan
Med vänlig hälsning,
Mats
