如何控制html5 video 控制条显示时间

如何控制html5 video 控制条显示时间,第1张

1:可以使用html5的默认控制条。

2:例子如下,关键是controls="controls"

<video src="movie.ogg" controls="controls">

您的浏览器不支持 video 标签。

</video>

3:当然每个浏览器的表现形式可能会不一样,如果要做到一致的话,

需要自己制做界面,自己写控制代码,这个就比较复杂了。

Video对象可以通过 ontimeupdate 事件来报告当前的播放进度,如果监听了这个事件,视频每播放一秒都会执行一次该事件;

video对象可以通过获取 currentTime 属性值来得到当前播放的时间

var video = document.getElementById('video')

video.ontimeupdate = function(){    // 监听事件

    var currentTime = Math.floor(video.currentTime)    // 取得当前播放的时间,由于 currentTime 返回的是个浮点数,所以要向下取整

    if (currentTime == 60) {    // 播放到60秒

        video.setAttribute('controls','controls')

        alert('60s')

    }

}

嵌入播放按钮 播放按钮与flash联系起来就可以了,或者是使用html5的默认控制条。

嵌入播放按钮的方法:进度条时间算法,进度像素=当前时间/总时间*总像素。

举个例子:

进度条progressBar1 为名称举例:

progressBar1.Maximum这里是进度条的最大值。这个在属性里面设置。

我们在时钟里面这么写:

if( progressBar1.Value<progressBar1.Maximum )

progressBar1.Value=progressBar1.Value+1(这里加多少都可以,因为这就是每次进多少)

else

time1.Stop()//停止触发


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7055082.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存