General help

Javascript Video Seeker

 
Picture of Callum Laverick
Javascript Video Seeker
 

Hi All,

I running Moodle v3.2 and using the adaptable theme (most recent version).

I'm currently trying to make buttons that will allow the user to skip through the video so they can find the relevant section to them. It works great locally as all things do however when trying to implement into Moodle it is proving problematic. I know its my JavaScript that is letting me down I was wandering if someone had tried something similar with any success. I have been adding it as a label and then inputting source code but with no success.

Code:

<html> 

<head>

<style>

.vidnavbutton {

background-color:#009688;

border: none;

    color: white;

    padding: 5px 7px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    margin: 4px 2px;

    cursor: pointer;

}

div.vidnavbar {

background-color:#e6f2ff;

max-height:100px;

max-width:800px;

border:none;

padding-top:10px;

padding-left:10px;

padding-bottom:10px;

padding-right:10px;

color:#;

padding:7px 16px;

text-align: center;

display:inline-block;

}

.vidnavbutton:hover {

background-color:#00332e;

color: white;

}


</style>

</head>

<body>


<video id="myVideo" width="600" height="400" controls>

  <source src="#############" type="video/mp4"></source>

  <source src="#############" type="video/ogg"></source>

  Your browser does not support HTML5 video.

</video>


 <div class="vidnavbar">  

  <!--Buttons-->

  <button onclick="getCurTime()" type="button" class="vidnavbutton">Get current time position</button>

  <!--Chap 1 jump-->

  <button onclick="setCurTime()" type="button" class="vidnavbutton">Jump to Chapter 1</button>

  <!--Chap 2 jump-->

  <button onclick="setCurTime1()" type="button" class="vidnavbutton">Jump to Chapter 2</button>

  <!--Chap 3 jump-->

  <button onclick="setCurTime2()" type="button" class="vidnavbutton">Jump to Chapter 3</button>

  <!--Chap 4 jump-->

  <button onclick="setCurTime3()" type="button" class="vidnavbutton">Jump to Chapter 4</button>

  <!--Chap 5 jump-->

  <button onclick="setCurTime4()" type="button" class="vidnavbutton">Jump to Chapter 5</button>

  <!--Chap 6 jump-->

  <button onclick="setCurTime5()" type="button" class="vidnavbutton">Jump to Chapter 6</button>

  <!--Chap 7 jump-->

  <button onclick="setCurTime6()" type="button" class="vidnavbutton">Jump to Chapter 7</button>

  <!--Chap 8 jump-->

  <button onclick="setCurTime7()" type="button" class="vidnavbutton">Jump to Chapter 8</button>

  <!--Chap 9 jump-->

  <button onclick="setCurTime8()" type="button" class="vidnavbutton">Jump to Chapter 9</button>

  <!--Chap 10 jump-->

  <button onclick="setCurTime9()" type="button" class="vidnavbutton">Jump to Chapter 10</button>

 </div>


<br> 



<script>

var vid = document.getElementById("myVideo");

//Shows Current Time

function getCurTime() { 

    alert(vid.currentTime);

//Jump to Current Time of Chapter 1

function setCurTime() { 

    vid.currentTime=1;

//Jump to Current Time of Chapter 2

function setCurTime1(){

vid.currentTime=2;

}

//Jump to Current Time of Chapter 3

function setCurTime2(){

vid.currentTime=3

}

//Jump to Current Time of Chapter 4

function setCurTime3(){

vid.currentTime=4;

}

//Jump to Current Time of Chapter 5

function setCurTime4(){

vid.currentTime=5;

}

//Jump to Current Time of Chapter 6

function setCurTime5(){

vid.currentTime=6;

}

//Jump to Current Time of Chapter 7

function setCurTime6(){

vid.currentTime=7;

}

//Jump to Current Time of Chapter 8

function setCurTime7(){

vid.currentTime=8;

}

//Jump to Current Time of Chapter 9

function setCurTime8(){

vid.currentTime=9;

}

//Jump to Current Time of Chapter 10

function setCurTime9(){

vid.currentTime=10;

}


</script> 


</body> 

</html>

<!--End-->


I have input the CSS and Javascript into the custom section in appearance menu, yet it still does not work. Note: Video links have been removed.

Any help would be greatly appreciated.

 
Average of ratings: -
Picture of Callum Laverick
Re: Javascript Video Seeker
 

Attached is the developer console errors.


 
Average of ratings: -