CODEWITHSUNDEEP
javascriptvideovideo.js
user1288817
user1288817

Reputation:

Set links to play a video at different times using video-js

I'm trying to set up a side navigation to play the main feature video at different times on the webpage.

This is my NOT working code, obviously Im using video.js plugin and it works well without this side navigation.

HTML

<video id="myVideo" class="video-js vjs-default-skin box" controls preload="none" width="720" height="540" poster="images/myPoster.jpg" data-setup="{}">
  <source src="myVideo.mp4" type='video/mp4'>
  <source src="myVideo.oggtheora.ogv" type='video/ogg'> 
</video>



<a onClick="introduction()">Introduction</a>
<a onClick="chapertOne()">Chapter One</a>

JS

<script type="text/javascript">
 var myPlayer = _V_("myVideo");
   function(introduction){
 // Do something when the event is fired
    myPlayer.currentTime(120); // 2 minutes into the video
    myPlayer.play();
};
</script>

 <script type="text/javascript">
 var myPlayer = _V_("myVideo");
   function(chapterOne){
 // Do something when the event is fired
    myPlayer.currentTime(440); // 4 minutes into the video
    myPlayer.play();
};
</script>
...

The code is not working. Nothing happens when I pressed on the link. Do you think it is because it is a long movie (about 10m). I'm also thinking on dividing the movie in chapters and then load a chapter each link. What do yo think will be the right approach?

Upvotes: 3

Views: 4177

Answers (1)

ant_Ti
ant_Ti

Reputation: 2435

function(chapterOne){ ... } this code create anonymous function that hasn't assigned to any variables. So maybe you should try this:

<script type="text/javascript">
    var myPlayer = _V_("myVideo");

    function introduction() {
        // Do something when the event is fired
        myPlayer.currentTime(120); // 2 minutes into the video
        myPlayer.play();
    };

    function chapterOne() {
        // Do something when the event is fired
        myPlayer.currentTime(440); // 4 minutes into the video
        myPlayer.play();
    };
</script>

Also change onClick attribute to onclick

Upvotes: 3

Related Questions