HTML5视频搜索 [英] HTML5 video seeking

问题描述

如何让我的视频播放器跳过/寻找某个时间。我已经开始使用它，它可以在页面首次加载（在Chrome中）但在任何其他浏览器中都无效。我也有一个闪回落，这可能是一个痛苦，但现在优先考虑的事情的HTML方面
主要问题是它在Chrome之外不起作用！

How can I get my video player to skip/seek to a certain time. I have had a go at this and it works when the page first loads (In Chrome) but not in any other browser. I also have a flash fallback which could be a pain, but for now the priority is the HTML side of things The major issue is that it doesn't work outside Chrome!

编辑：现在可以在IE9，Chrome和Firefox中使用。然而，不是闪回后退！

This now works in IE9, Chrome and Firefox. However, not with the flash fallback!

以下是我到目前为止的尝试。

Below is my attempt so far.

我正在使用到目前为止关注JS：

I'm using the following JS so far:

   <script language="javascript">
     $(function () {
     var v = $("#video").get(0);
         $('#play').click(function(){
                v.play();
         });

        $('.s').click(function(){
            alert("Clicked: "+$(this).html() +"- has time of -" + $(this).attr('s') );
            v.currentTime = $(this).attr('s'); v.play();
        });
     });
    </script>

以下链接：

<video id="video" controls width="500">  
        <!-- if Firefox -->  
        <source src="video.ogg" type="video/ogg" />  
        <!-- if Safari/Chrome-->  
        <source src="video.mp4" type="video/mp4" />  
        <!-- If the browser doesn't understand the <video> element, then reference a Flash file. You could also write something like "Use a Better Browser!" if you're feeling nasty. (Better to use a Flash file though.) -->  
        <object type="application/x-shockwave-flash" data="player.swf"
        width="854" height="504">
            <param name="allowfullscreen" value="true">
            <param name="allowscriptaccess" value="always">
            <param name="flashvars" value="file=video.mp4">
            <!--[if IE]><param name="movie" value="player.swf"><![endif]-->
            <p>Your browser can’t play HTML5 video.</p>
  </object>
    </video>

具有类 s 和自定义属性 s = 60 表示60秒等。

With the context of having buttons with a class s and custom attribute s=60 for "60 seconds" etc.

推荐答案

seekToTime:function( value )
{
    var seekToTime = this.videoPlayer.currentTime + value;
    if( seekToTime < 0 || seekToTime > this.videoPlayer.duration ) 
        return;

    this.videoPlayer.currentTime = seekToTime;
}

这是我们正在使用的搜索功能。这是MooTools的语法，但你会明白这一点。希望它有所帮助。

This is the seek function we are using. It's in MooTools syntax, but you'll get the point. Hope it helps.

这篇关于HTML5视频搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！