使用 video-js 跳转到 HTML5 嵌入式视频中的时间戳答案

【问题标题】：Jump to timestamp in HTML5 embedded Video with video-js使用 video-js 跳转到 HTML5 嵌入式视频中的时间戳
【发布时间】：2011-06-02 23:02:21
【问题描述】：

问候溢出，

我正在尝试在网页上创建按钮，以跳转到带有 video-js 的嵌入式视频的标记时间戳。据我所知，我需要更改 currentTime 值以使视频移动到正确的时间戳，但是即使在初始 javascript 调用中设置 currentTime 时，我也无法使其正常工作。

例如，如果我想从视频开始 200 秒：

javascript：

    VideoJS.setupAllWhenReady();
    VideoJS.DOMReady(function(){
    var myPlayer = VideoJS.setup("current_video");
    myPlayer.play();
    myPlayer.currentTime(200);
    });

HTML 片段：

<video id="current_video" class="video-js" width="400" height="300" controls="controls" preload="auto" poster="./videoposter.png">
<source src="./videosource.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>

再次，视频使用 video-js 播放器正常播放，只是当前时间偏移似乎没有应用，视频从头开始。我已经在 chrome、safari、IE 中对此进行了测试，它们似乎都在做同样的事情，所以我认为问题不是特定于浏览器的。我一定是做错了什么……

感谢您的帮助！

【问题讨论】：

如果使用myPlayer.currentTime = 200;，结果相同？
是的，也试过了。也试过 myPlayer.video.currentTime(200);, myPlayer.video.currentTime = 200;等

标签： javascript html html5-video

【解决方案1】：

删除“VideoJS.setupAllWhenReady();”它应该可以工作。这就是我所拥有的：

<!DOCTYPE html>
<html>
 <head>
  <title>Sample styled page</title>
  <script src="video-js/video.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="video-js/video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
 </head>
 <body>
  <h1>Sample styled page</h1>
  <p>This page is just a demo.</p>
  <video id="current_video" class="video-js" width="400" height="300" controls="controls" preload="auto">
    <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
  </video>
  <script>
    //VideoJS.setupAllWhenReady();
    VideoJS.DOMReady(function() {
        var myPlayer = VideoJS.setup("current_video");
        myPlayer.play();
        myPlayer.currentTime(200);
    });

  </script>
 </body>
</html>

【讨论】：

【解决方案2】：

 $(function(){
 var myPlayer = _V_("my_video_1");
     _V_("my_video_1").ready(function(){ 

     myPlayer.src([
      { type: "video/mp4", src: "http://video-js.zencoder.com/oceans-clip.mp4" },
      { type: "video/webm", src: "http://video-js.zencoder.com/oceans-clip.webm" }
    ]);  

    });
  });

  $(window).load(function(){
  var myPlayer = _V_("my_video_1");

 myPlayer.currentTime(30); 
 myPlayer.play()
  });

【讨论】：