播放器进度条组件

Posted 2023-04-18

参考技术A 播放器进度条由如下部分组成：

中间的进度条由如下部分组成：

根据以上的分析，首先我们需要知道歌曲播放的时长，以此来改变黄色进度条和进度条按钮的位置。

歌曲播放使用的是 audio 控件，可以通过控件的 timeupdate 事件得到(或者设置)歌曲已播放的时长this.currentTime = e.target.currentTime

将百分比设置为计算属性，得到百分比： percent  = this.currentTime / this.currentSong.duration

在父组件（player.vue）上传入percent属性，子组件(progress-bar.vue)中使用props接收参数，由此得到百分比

进度条总长度：barWidth = 黑色进度条长度 - 按钮宽度

黄色进度条长度和按钮位置的偏移量相同，使用offset变量表示：offset = percent * barWidth

设置黄色进度条宽度：

设置按钮偏移量

由于有多处地方可能使用到改变进度条长度和按钮偏移量，因此使用一个函数对其进行包装：

在按钮所在div上监听如下事件：

其中，progressTouchStart事件中，需要记录开始的位置，设置一个标识变量表示已经开始拖拽事件，记录当前黄色进度条的宽度，由于记录的这些值可能会在move或者end函数中使用到，因此组件应该维护一个变量对象来记录这些值，这里使用 this.touch =

progressTouchMove事件中，应该根据拖拽的位置重新计算偏移量offset 

在progressEnd事件中，应该将标识标量设置为false，并且通过拖拽结果重新计算歌曲已播放百分比

其中_triggerPercent所做工作如下：

由此，父组件（player.vue）中可以监听percentChange事件，并且根据参数percent计算已播放事件，并且设置audio控件的currentTime

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

我正在实现基于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否则用户必须留在加载栏上寻求这种情况在大多数情况下几乎不可能处理;） - 很有趣}