視頻網站製作實戰（四）：Flex 進階播放器整合 XML 影片列表

進階播放器 mytube1.mxml

擴充簡易播放器：透過 HTTPService 載入 XML 影片清單，支援上一個/下一個/播放/選單切換，播放完畢自動跳下一支。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="https://www.adobe.com/2006/mxml" layout="absolute" creationComplete="movieXmlData.send()">
    <mx:HTTPService method="get" url="https://localhost:8080/movies.php" id="movieXmlData" result="onGetMovies(event)" />
    <mx:Script>
        <![CDATA[
            import mx.rpc.events.ResultEvent;
            import mx.controls.VideoDisplay;
            import mx.controls.List;
            import mx.rpc.http.HTTPService;
            import mx.collections.ArrayCollection;

            [Bindable] private var movies : ArrayCollection = new ArrayCollection();

            public function onGetMovies(event : ResultEvent) : void {
                var firstMovie : String = event.result.movies.movie[0].source.toString();
                videoPlayer.source = firstMovie;
                movies = event.result.movies.movie;
                movieList.selectedIndex = 0;
            }

            public function onPrevious() : void {
                if (movieList.selectedIndex == 0) movieList.selectedIndex = movies.length - 1;
                else movieList.selectedIndex -= 1;
                videoPlayer.source = this.movieList.selectedItem.source.toString();
            }

            public function onPlay() : void {
                videoPlayer.source = this.movieList.selectedItem.source.toString();
                videoPlayer.play();
            }

            public function onNext() : void {
                if (movieList.selectedIndex >= (movies.length - 1)) movieList.selectedIndex = 0;
                else movieList.selectedIndex += 1;
                videoPlayer.source = this.movieList.selectedItem.source.toString();
            }

            public function onChange() : void {
                videoPlayer.source = this.movieList.selectedItem.source.toString();
            }
        ]]>
    </mx:Script>

    <mx:HBox width="100%" paddingLeft="10" paddingTop="10" paddingRight="10">
        <mx:VBox>
            <mx:VideoDisplay width="400" height="300" id="videoPlayer" complete="onNext()" />
            <mx:HBox width="100%" horizontalAlign="center">
                <mx:Button label="<<" click="onPrevious()" />
                <mx:Button label="Play" click="onPlay()" />
                <mx:Button label=">>" click="onNext()" />
            </mx:HBox>
        </mx:VBox>
        <mx:List width="100%" height="340" id="movieList" dataProvider="{movies}" change="onChange()" labelField="title"></mx:List>
    </mx:HBox>
</mx:Application>

功能亮點

• 資料綁定：[Bindable] 讓 List 自動更新。
• 事件驅動：creationComplete 載入 XML，complete 自動播放下一支。
• 循環播放：上一個/下一個到達邊界時回圈。

現代化替代方案

Flex/Flash 已停止支援，建議採用：

• 前端：React/Vue + HTML5 <video> + HLS.js / Dash.js
• 後端：PHP/Laravel/Node.js 提供 JSON API
• 串流：Nginx + nginx-rtmp-module 或 SRS 支援 RTMP/HLS/DASH