HTML5视频寻求[更新] [英] HTML5 video seeking [updated]

问题描述

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

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

以下是我迄今为止的尝试。

我正在使用继JS之后：

 < script language =javascript> 
 $（function（）{
 var v = $（＃video）。get（0）; 
 $（'＃play'）。click（function（）{
 v.play（）; 
}）; 
 
 $（'。s'）。click（function（）{
 alert（Clicked：+ $ ）+（this）.attr（'s'））; 
 v.currentTime = $（this）.attr（'s'）; v。 play（）; 
}）; 
}）; 
< / script> 
  

以下链接：

 < video id =videocontrols width =500> 
<！ - 如果Firefox  - > 
< source src =video.oggtype =video / ogg/> 
<！ - 如果是Safari / Chrome  - > 
< source src =video.mp4type =video / mp4/> 
<！ - 如果浏览器不理解< video>元素，然后引用一个Flash文件。你也可以写一些类似使用更好的浏览器！如果你感到讨厌。 （最好使用Flash文件。） - > 
< object type =application / x-shockwave-flashdata =player.swf
 width =854height =504> 
< param name =allowfullscreenvalue =true> 
< param name =allowscriptaccessvalue =always> 
< param name =flashvarsvalue =file = video.mp4> 
<！ -  [if IE]>< param name =movievalue =player.swf><！[endif]  - > 
< p>您的浏览器无法播放HTML5影片。< / p> 
< / object> 
< / video> 
  

使用具有类 s 和自定义属性 s = 60 为60秒等。


解决方案

  seekToTime：函数（值）
 {
 var seekToTime = this.videoPlayer.currentTime + value; 
 if（seekToTime< 0 || seekToTime> this.videoPlayer.duration）
 return; 
 
 this.videoPlayer.currentTime = seekToTime; 
} 
  

这是我们正在使用的查找功能。这是MooTools的语法，但你会明白的。希望它有帮助。

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!

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

Below is my attempt so far.

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>

Which links to the following:

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

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

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

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