使用video-js跳转到HTML5嵌入式视频中的时间戳 [英] Jump to timestamp in HTML5 embedded Video with video-js

查看:1927
本文介绍了使用video-js跳转到HTML5嵌入式视频中的时间戳的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问候溢出,

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

I'm trying to create buttons on a webpage that jump to tagged timestamps for an embedded video with video-js. Far as I can gather, I need to change the currentTime value in order to have the video move to the correct timestamp, however I can't get this to work even when setting currentTime in the initial javascript call.

例如,如果我想在视频中开始200秒:

For example, if I wanted to start 200 seconds into the video:

javascript:

javascript:

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

HTML Snip:

HTML Snip:

<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播放器正常播放,只是currentTime偏移看起来不像要应用,视频从头开始。我已经在chrome,safari,IE中测试了它们,它们似乎都做同样的事情所以我认为问题不是浏览器特定的。我一定做错了...

Again, the video plays properly using the video-js player, just the currentTime offset doesn't seem to be applied and the video starts from the beginning. I've tested this in chrome, safari, IE and they all seem to do the same thing so I don't think the problem is browser specific. I must be doing something wrong...

感谢您的帮助!

推荐答案

删除VideoJS.setupAllWhenReady();它应该工作。这就是我所拥有的:

Remove the "VideoJS.setupAllWhenReady();" and it should work. This is what I have:

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

这篇关于使用video-js跳转到HTML5嵌入式视频中的时间戳的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆