]> git.openstreetmap.org Git - potlatch2.git/blob - net/systemeD/potlatch2/help/VideoPlayer.mxml
fdb6f89e5f907da671dcc9fca21d216ce5a27e06
[potlatch2.git] / net / systemeD / potlatch2 / help / VideoPlayer.mxml
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="0">
3         <mx:ViewStack id="videoStack" width="100%" height="100%">
4                 <mx:Box id="previewContainer">
5                         <mx:Image id="preview" width="100%" height="100%" source="{previewImage}" 
6                                 click="playVideo()" />
7                 </mx:Box>
8                 <mx:Box id="videoContainer">
9                         <mx:VideoDisplay id="video" 
10                                 metadataReceived="prepareVideo()"
11                                 playheadUpdate="advanceProgress(event)"
12                                 click="playVideo()"
13                                 autoPlay="false"
14                                 width="100%" height="100%" />
15                 </mx:Box>
16         </mx:ViewStack>
17         <mx:HBox backgroundColor="#6495ED" width="100%" height="16"> 
18                 <mx:Image id="playButton" width="16" height="16" source="{playImage}" click="playVideo()" />
19                 <mx:HSlider width="100%" id="progressBar" liveDragging="true" 
20                         allowTrackClick="false" 
21                         thumbPress="progressThumbPress(event);" 
22                         thumbRelease="progressThumbRelease(event);" />
23         </mx:HBox> 
24
25         <mx:Script> 
26                 <![CDATA[ 
27
28                         /** VideoPlayer component for P2 help dialog.
29                                 Embed like this:
30
31                                 <help:VideoPlayer width="400" height="300" 
32                                         file="videos/test.flv" 
33                                         previewImage="videos/test_preview.png" />
34                                         
35                                 previewImage is the image that will be shown in the video pane
36                                 before the user clicks 'play' - usually a still of the first frame
37                                 of the video. (This means the video file won't be downloaded unless 
38                                 the user actually wants it.)
39                         */
40
41                         import mx.events.VideoEvent;
42
43                         [Bindable] public var file:String;
44                         [Bindable] public var previewImage:String; 
45                         private var wasPlaying:Boolean;
46
47                         [Bindable] [Embed(source="../../../../embedded/video_play.png" )] public var playImage:Class;
48                         [Bindable] [Embed(source="../../../../embedded/video_pause.png")] public var pauseImage:Class;
49
50                         public function playVideo():void {
51                                 if (videoStack.selectedChild==previewContainer) {
52                                         preview.alpha=0.5;
53                                         video.source=file;
54                                         video.play();
55                                         playButton.source=pauseImage;
56                                 } else if (video.playing) {
57                                         video.pause();
58                                         playButton.source=playImage;
59                                 } else {
60                                         video.play();
61                                         playButton.source=pauseImage;
62                                 }
63                         }
64                         public function prepareVideo():void {
65                                 videoStack.selectedChild=videoContainer;
66                                 progressBar.maximum=video.totalTime;
67                         }
68                         public function progressThumbPress(event:Event):void { 
69                                 wasPlaying=video.playing;
70                                 video.pause();
71                                 playButton.source=playImage;
72                         }
73                         public function progressThumbRelease(event:Event):void { 
74                                 video.playheadTime = event.currentTarget.value; 
75                                 if (wasPlaying) playVideo();
76                         } 
77                         public function advanceProgress(event:VideoEvent):void {
78                                 progressBar.value = event.playheadTime;
79                         }
80                         public function stopPlaying():void {
81                                 if (!video.playing) return;
82                                 video.pause();
83                                 playButton.source=playImage;
84                         }
85
86                 ]]> 
87         </mx:Script>
88 </mx:VBox>