具有“双”进度条的视频播放器(视频加载/视频播放进度)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了具有“双”进度条的视频播放器(视频加载/视频播放进度)相关的知识,希望对你有一定的参考价值。

我正在实现基于Flex 3的FLV视频播放器,我想添加类似于YouTube播放器的功能。

我希望进度条既显示视频显示进度,又显示视频加载状态。我该如何实现这种行为?

在彼此的顶部使用2个进度条?我也使用Flex mx:VideoDisplay组件,我需要更改吗?

答案

是的,您应该在放置着陆栏的背景中将两个条形放在彼此的顶部,而在前面放置当前位置条。

但最后这比使它完全正常运行的工作要多一些......我会创建一个实现所有条形/滑块功能的新类。

该载荷仅监听更新(val)以将其新值设置为百分比。播放栏将需要点击和mousedown / mousemove上的一些功能,以寻求和再次设置更新功能,包括在玩家后期用户交互中触发搜索的事件。

然后将加载栏更新绑定到播放器的progress事件可以在此处找到所有事件

//setting up loadingbar
player.addEventListener(ProgressEvent.PROGRESS,slider_update);


//function to update the slider
private function slider_update(E:ProgressEvent):void{
    var percentage:float = 0;
    if(E.bytesTotal != 0){
       E.bytesLoaded/E.bytesTotal
    }
    slider.update(percentage)
}

使用当前的playbar它几乎是一样的

//listens to statechanges of the player to handle updates for cur-pos

player.addEventListener(VideoEvent.PLAYHEAD_UPDATE, checkStatechange);

private function checkStatechange(E:VideoEvent):void{
    if(player.totalTime!=0){
        timeSlider.update(E.playheadTime/E.totalTime);
    };

继续绑定点击以立即设置搜索 - 鼠标下移和移动以使视频滚动成为可能...实际上对于mousedown的搜索,mousemove应该在舞台上监听所以mouseUp否则用户必须留在加载栏上寻求这种情况在大多数情况下几乎不可能处理;) - 很有趣}

以上是关于具有“双”进度条的视频播放器(视频加载/视频播放进度)的主要内容,如果未能解决你的问题,请参考以下文章

网页插入SWF视频,如何带有播放控制按钮、进度条等!

js 代码实现视频进度条点到哪个位置就播放那个位置的视频。进度条是用css样式另做的。

html5 video 标签 怎样禁止拖动或者点击进度条

uniapp实现app端图片+视频轮播

使用html5 video播放的视频加载很慢怎么优化

【Android音视频】视频开发优化