设置链接以使用video-js在不同时间播放视频

时间:2013-04-04 12:40:15

标签: javascript video video.js

我正在尝试设置侧面导航,以便在网页上的不同时间播放主要素材视频。

这是我的NOT工作代码,很明显我使用的是video.js插件,没有这种侧面导航,效果很好。

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>
...

代码无效。当我按下链接时没有任何反应。你认为这是因为它是一部很长的电影(大约10米)。我也在考虑在章节中分割电影,然后在每个链接上加载一章。你认为什么是正确的方法?

1 个答案:

答案 0 :(得分:3)

function(chapterOne){ ... }此代码创建未分配给任何变量的匿名函数。所以也许你应该试试这个:

<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>

同时将onClick属性更改为onclick