【问题标题】:HTML5 video seekingHTML5 视频搜索
【发布时间】:2012-03-07 20:50:15
【问题描述】:

如何让我的视频播放器跳过/搜索到某个时间。我对此进行了尝试,它在页面首次加载(在 Chrome 中)时有效,但在任何其他浏览器中均无效。我也有一个闪退,这可能会很痛苦,但现在优先考虑的是 HTML 方面 主要问题是它不能在 Chrome 之外运行!

编辑:现在可以在 IE9、Chrome 和 Firefox 中使用。但是,不能使用 Flash 后备!

以下是我目前的尝试。

到目前为止,我正在使用以下 JS:

   <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 秒”等的按钮的上下文中。

【问题讨论】:

    标签: javascript jquery html html5-video


    【解决方案1】:
    seekToTime:function( value )
    {
        var seekToTime = this.videoPlayer.currentTime + value;
        if( seekToTime < 0 || seekToTime > this.videoPlayer.duration ) 
            return;
    
        this.videoPlayer.currentTime = seekToTime;
    }
    

    这是我们正在使用的搜索功能。它采用 MooTools 语法,但您会明白的。希望对您有所帮助。

    【讨论】:

    • 现在更改了我的代码以考虑结束/开始溢出。但是闪存回退呢?如何控制 SWF?生病需要额外的JQ
    • 接受了这个答案,因为我现在遇到的问题与问题无关。
    【解决方案2】:

    我猜你用 js 和 css 构建了自己的控件?!好吧,因此你必须扩展你的 swf,你可以从 javascript 调用你的 seek 函数。外部接口是你的朋友:在 actionscript/flash 中:

     import flash.external.ExternalInterface; 
    
     ExternalInterface.addCallback( "methodName", this, method ); 
    
     function method() { trace("called from javascript"); }
    

    通过 javascript 调用它

    function callAS() {
        swf.methodName();
    }
    

    【讨论】:

    • 我目前正在使用基本的 Flash 视频播放器,我打算使用 FlowPlayer 或 JWPLayer 等。只是想知道如何将它们连接到我的事件中 :)
    猜你喜欢
    • 2012-09-25
    • 2012-11-20
    • 1970-01-01
    • 2011-04-15
    • 1970-01-01
    • 2017-06-16
    • 2017-08-14
    • 1970-01-01
    相关资源
    最近更新 更多