Flex 4中的自定义视频搜索栏控制[关闭]

Posted 2021-05-06

我正在使用Flex 4创建自定义视频播放器。

我需要创建一个自定义搜索栏，使其有三层，与youtube视频播放器相同。第一层是背景，第二层是下载进度，第三层是已过去的视频。搜索栏也可以点击。

如何在Flex 4中创建此类组件。

答案

不幸的是，我不相信内置的ScrubBar类具有此功能，因此您最好自己构建它（而不是将其添加到该类）。

为此，我将基于Group创建一个新的MXML组件。在该组件中，您需要四件事：三个用于条形/背景的矩形和一个用于播放头的椭圆（或另一个矩形或任何你想要的东西）。将它们叠加在一起。将背景rect设置为100％高度和宽度，将另外两个设置为100％高度。

现在，您要做的是创建一个部分并编写一些AS3来处理更改。请注意，这是我个人会这样做的，但不一定是你必须这样做的。例如，我知道大多数人会对使用吸气剂的人不满意，但我认为这是一个完美的机会。

private var _progress:Number; //0-1
private var _download:Number; //0-1

public function set progress(value:Number):void{
    this._progress = value;
    this.progressBar.percentWidth = value * 100;
    this.playhead.x = value * this.width - this.playhead.width / 2;
    this.dispatchEvent(new Event(Event.PROGRESS)); //this line is optional and you would be better suited creating your own VideoEvent class to handle events across the entire player rather than using the built in events.
}

public function get progress():Number{
    return this._progress;
}

public function set download(value:Number):void{
    this._download = value;
    this.downloadBar.percentWidth = value * 100;
}

public function get download():Number{
    return this._download;
}

显然，这只是基础知识。您可以进一步深入了解并添加更多功能。例如，没有用于擦除播放头或单击要查找的进度条的功能。两者都相对容易实现，但是，只需确保调度事件，以便在发生这些事情时从其他类中了解。

现在，从视频控件类中，您需要将您的scrubbar类的progress和download属性绑定到VideoDisplay或NetStream事件。要做到这一点，你只需将eventListeners添加到你用于侦听进度和缓冲区更改的任何一个（不确定你将用于VideoDisplay，但对于NetStream你必须听NetStatus.STATUS来获取缓冲区和其他好东西，你必须不幸的是，创建一个Timer来监听进度。在每个相应的函数中，只需将适当的属性设置为VideoDisplay或NetStream对象为您提供的值（在NetStream的情况下，ns.time表示当前时间，ns.bytesLoaded表示下载）。

我只是略过了你需要做的事情，但是这应该会给你足够的想法来开始这方面的工作。