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

Question

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

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

如何在 Flex 4 中创建这样的组件。

Answer 1

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

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

现在，您要做的是创建一个部分并编写一些 AS3 来处理更改。请注意，这是我个人会这样做的方式，但不一定是您必须这样做的方式。例如，我知道大多数人会反对使用 getter-setter，但我认为这是实现它的绝佳机会。

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;
}

显然，这只是基础。您可以更深入地研究它并添加更多功能。例如，没有擦洗播放头或单击进度条进行搜索的功能。两者都相对容易实现，但是，只要确保您派发事件，以便您可以从其他类知道这些事情何时发生。

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

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