Advanced Search

AS3 FLVPlayback and FLVPlaybackCaptioning Demo

/ Published in: ActionScript 3
Save to your folder(s)
This demo expects there to be 10 video UI components on the stage ('playPauseBtn', 'stopBtn', 'backBtn', 'forwardBtn', 'seekBar', 'captionBtn', 'fullScreenBtn', 'muteBtn', 'volumeBar' and 'bufferingBar') these can all be skinned as required. You also need to have instances of the FLVPlayback and FLVPlaybackCaptioning components in the library (these will be added to the stage at runtime using ActionScript).

In this example, we are looking for an external FLV file called 'sample_video.flv' and an external XML file called 'captions_en.xml'. A good tool for creating captions (TimedText XML files) for FLV file is Captionate (http://www.buraks.com/captionate/).

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // IMPORT CLASSES
  2. import flash.events.MouseEvent;
  3. import flash.events.Event;
  4. import flash.events.IOErrorEvent;
  5. import flash.events.ProgressEvent;
  6. import flash.events.HTTPStatusEvent;
  7. import flash.events.SecurityErrorEvent;
  8. import fl.video.VideoEvent;
  9. import fl.video.VideoState;
  10. import fl.video.FLVPlayback;
  11. import fl.video.FLVPlaybackCaptioning;
  12. import fl.video.VideoProgressEvent;
  13. import fl.video.CaptionChangeEvent;
  14. import fl.video.CaptionTargetEvent;
  15.  
  16. // OUTPUT FLVPLAYBACK NAD CAPTIONING COMPONENT VERSION NUMBERS
  17. trace("FLVPlayback.VERSION: "+FLVPlayback.VERSION);
  18. trace("FLVPlaybackCaptioning.VERSION: "+FLVPlaybackCaptioning.VERSION);
  19.  
  20. // DEFINE VARIABLES
  21. var flvFilename:String = "sample_video.flv";
  22. var flvPath:String = "";
  23. var captionsFilename:String = "captions_en.xml";
  24. var captionsPath:String = "";
  25. var flvPlayback:FLVPlayback;
  26. var flvPlaybackCaptioning:FLVPlaybackCaptioning;
  27.  
  28. // SET FLVPLAYBACK PROPERTIES
  29. flvPlayback = new FLVPlayback();
  30. flvPlayback.x = 0;
  31. flvPlayback.y = 0;
  32. flvPlayback.width = 740;
  33. flvPlayback.height = 416;
  34. flvPlayback.fullScreenTakeOver = false;
  35. flvPlayback.autoPlay = false;
  36. flvPlayback.alpha = 1;
  37. flvPlayback.autoRewind = false;
  38. flvPlayback.isLive = false;
  39. flvPlayback.skin = null;
  40. flvPlayback.source = flvPath + flvFilename;
  41.  
  42. // DEFINE CONTROL BUTTONS
  43. flvPlayback.playPauseButton = playPauseBtn;
  44. flvPlayback.stopButton = stopBtn;
  45. flvPlayback.backButton = backBtn;
  46. flvPlayback.forwardButton = forwardBtn;
  47. flvPlayback.fullScreenButton = fullScreenBtn;
  48. flvPlayback.muteButton = muteBtn;
  49. flvPlayback.volumeBar = volumeBar;
  50. flvPlayback.seekBar = seekBar;
  51.  
  52. flvPlaybackCaptioning = new FLVPlaybackCaptioning();
  53. flvPlaybackCaptioning.flvPlayback = flvPlayback;
  54. flvPlaybackCaptioning.source = captionsPath + captionsFilename;;
  55. flvPlaybackCaptioning.autoLayout = true;
  56. flvPlaybackCaptioning.showCaptions = false; 
  57.  
  58. // ADD EVENT LISTENERS FOR FLVPLAYBACK COMPONENT
  59. flvPlayback.addEventListener(VideoEvent.AUTO_REWOUND, onFlvPlayback_AUTO_REWOUND);
  60. flvPlayback.addEventListener(VideoEvent.BUFFERING_STATE_ENTERED, onFlvPlayback_BUFFERING_STATE_ENTERED);
  61. flvPlayback.addEventListener(VideoEvent.CLOSE, onFlvPlayback_CLOSE);
  62. flvPlayback.addEventListener(VideoEvent.COMPLETE, onFlvPlayback_COMPLETE);
  63. flvPlayback.addEventListener(VideoEvent.FAST_FORWARD, onFlvPlayback_FAST_FORWARD);
  64. flvPlayback.addEventListener(VideoEvent.PAUSED_STATE_ENTERED, onFlvPlayback_PAUSED_STATE_ENTERED);
  65. flvPlayback.addEventListener(VideoEvent.PLAYHEAD_UPDATE, onFlvPlayback_PLAYHEAD_UPDATE);
  66. flvPlayback.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, onFlvPlayback_PLAYING_STATE_ENTERED);
  67. flvPlayback.addEventListener(VideoEvent.READY, onFlvPlayback_READY);
  68. flvPlayback.addEventListener(VideoEvent.REWIND, onFlvPlayback_REWIND);
  69. flvPlayback.addEventListener(VideoEvent.SCRUB_FINISH, onFlvPlayback_SCRUB_FINISH);
  70. flvPlayback.addEventListener(VideoEvent.SCRUB_START, onFlvPlayback_SCRUB_START);
  71. flvPlayback.addEventListener(VideoEvent.SEEKED, onFlvPlayback_SEEKED);
  72. flvPlayback.addEventListener(VideoEvent.SKIN_LOADED, onFlvPlayback_SKIN_LOADED);
  73. flvPlayback.addEventListener(VideoEvent.STATE_CHANGE, onFlvPlayback_STATE_CHANGE);
  74. flvPlayback.addEventListener(VideoEvent.STOPPED_STATE_ENTERED, onFlvPlayback_STOPPED_STATE_ENTERED);
  75. flvPlayback.addEventListener(VideoProgressEvent.PROGRESS, onFlvPlayback_PROGRESS);
  76.  
  77. // ADD EVENT LISTENERS FOR FLVPLAYBACK CAPTIONING COMPONENT
  78. flvPlaybackCaptioning.addEventListener(CaptionChangeEvent.CAPTION_CHANGE, onFlvPlaybackCaptioning_CAPTION_CHANGE);
  79. flvPlaybackCaptioning.addEventListener(CaptionTargetEvent.CAPTION_TARGET_CREATED, onFlvPlaybackCaptioning_CAPTION_TARGET_CREATED);
  80. flvPlaybackCaptioning.addEventListener(Event.COMPLETE, onFlvPlaybackCaptioning_COMPLETE);
  81. flvPlaybackCaptioning.addEventListener(HTTPStatusEvent.HTTP_STATUS, onFlvPlaybackCaptioning_HTTP_STATUS);
  82. flvPlaybackCaptioning.addEventListener(IOErrorEvent.IO_ERROR, onFlvPlaybackCaptioning_IO_ERROR);
  83. flvPlaybackCaptioning.addEventListener(Event.OPEN, onFlvPlaybackCaptioning_OPEN);
  84. flvPlaybackCaptioning.addEventListener(ProgressEvent.PROGRESS, onFlvPlaybackCaptioning_PROGRESS);
  85. flvPlaybackCaptioning.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onFlvPlaybackCaptioning_SECURITY_ERROR);
  86.  
  87. // ADD TO STAGE
  88. addChild(flvPlayback);
  89. addChild(flvPlaybackCaptioning);
  90. addChild(bufferingBar);
  91.  
  92. // DECLARE EVENT HANDLERS
  93. function onFlvPlayback_AUTO_REWOUND(event:VideoEvent):void {
  94. 	trace("onFlvPlayback_AUTO_REWOUND()");
  95. }
  96.  
  97. function onFlvPlayback_BUFFERING_STATE_ENTERED(event:VideoEvent):void {
  98. 	trace("onFlvPlayback_BUFFERING_STATE_ENTERED()");
  99. 	bufferingBar.visible = true;
  100. }
  101.  
  102. function onFlvPlayback_CLOSE(event:VideoEvent):void {
  103. 	trace("onFlvPlayback_CLOSE()");
  104. }
  105.  
  106. function onFlvPlayback_COMPLETE(event:VideoEvent):void {
  107. 	trace("onFlvPlayback_COMPLETE()");
  108. 	bufferingBar.visible = false;
  109. }
  110.  
  111. function onFlvPlayback_FAST_FORWARD(event:VideoEvent):void {
  112. 	trace("onFlvPlayback_FAST_FORWARD()");
  113. }
  114.  
  115. function onFlvPlayback_PAUSED_STATE_ENTERED(event:VideoEvent):void {
  116. 	trace("onFlvPlayback_PAUSED_STATE_ENTERED()");
  117. }
  118.  
  119. function onFlvPlayback_PLAYHEAD_UPDATE(event:VideoEvent):void {
  120. 	//trace("onFlvPlayback_PLAYHEAD_UPDATE()");
  121. }
  122.  
  123. function onFlvPlayback_PLAYING_STATE_ENTERED(event:VideoEvent):void {
  124. 	trace("onFlvPlayback_PLAYING_STATE_ENTERED()");
  125. 	bufferingBar.visible = false;
  126. }
  127.  
  128. function onFlvPlayback_READY(event:VideoEvent):void {
  129. 	trace("onFlvPlayback_READY()");
  130. 	bufferingBar.visible = false;
  131. }
  132.  
  133. function onFlvPlayback_REWIND(event:VideoEvent):void {
  134. 	trace("onFlvPlayback_REWIND()");
  135. }
  136.  
  137. function onFlvPlayback_SCRUB_FINISH(event:VideoEvent):void {
  138. 	trace("onFlvPlayback_SCRUB_FINISH()");
  139. }
  140.  
  141. function onFlvPlayback_SCRUB_START(event:VideoEvent):void {
  142. 	trace("onFlvPlayback_SCRUB_START()");
  143. }
  144.  
  145. function onFlvPlayback_SEEKED(event:VideoEvent):void {
  146. 	trace("onFlvPlayback_SEEKED()");
  147. }
  148.  
  149. function onFlvPlayback_SKIN_LOADED(event:VideoEvent):void {
  150. 	trace("onFlvPlayback_SKIN_LOADED()");
  151. }
  152.  
  153. function onFlvPlayback_STATE_CHANGE(event:VideoEvent):void {
  154. 	trace("onFlvPlayback_STATE_CHANGE()");
  155.  
  156. 	switch (flvPlayback.state) {
  157. 		case VideoState.BUFFERING:
  158. 			trace ("flvPlayback.state == VideoState.BUFFERING");
  159. 			break;
  160. 		case VideoState.CONNECTION_ERROR:
  161. 			trace ("flvPlayback.state == VideoState.CONNECTION_ERROR");
  162. 			break;
  163. 		case VideoState.DISCONNECTED:
  164. 			trace ("flvPlayback.state == VideoState.DISCONNECTED");
  165. 			break;
  166. 		case VideoState.LOADING:
  167. 			trace ("flvPlayback.state == VideoState.LOADING");
  168. 			break;
  169. 		case VideoState.PAUSED:
  170. 			trace ("flvPlayback.state == VideoState.PAUSED");
  171. 			break;
  172. 		case VideoState.PLAYING:
  173. 			trace ("flvPlayback.state == VideoState.PLAYING");
  174. 			break;
  175. 		case VideoState.RESIZING:
  176. 			trace ("flvPlayback.state == VideoState.RESIZING");
  177. 			break;
  178. 		case VideoState.REWINDING:
  179. 			trace ("flvPlayback.state == VideoState.REWINDING");
  180. 			break;
  181. 		case VideoState.SEEKING:
  182. 			trace ("flvPlayback.state == VideoState.SEEKING");
  183. 			break;
  184. 		case VideoState.STOPPED:
  185. 			trace ("flvPlayback.state == VideoState.STOPPED");
  186. 			break;
  187. 		default:
  188. 			trace("flvPlayback.state: "+flvPlayback.state);
  189. 	}
  190.  
  191. }
  192.  
  193. function onFlvPlayback_STOPPED_STATE_ENTERED(event:VideoEvent):void {
  194. 	trace("onFlvPlayback_STOPPED_STATE_ENTERED()");
  195. }
  196.  
  197. function onFlvPlayback_PROGRESS(event:VideoProgressEvent):void {
  198. 	trace("onFlvPlayback_PROGRESS()");
  199. 	//trace("event.target.bytesLoaded: "+event.target.bytesLoaded);
  200. 	//trace("event.target.bytesTotal: "+event.target.bytesTotal+" ("+(Math.floor(((event.target.bytesTotal/1024/ 1024)*100))/100)+" MB)");
  201. 	var total:Number = event.target.bytesTotal;
  202. 	var part:Number = event.target.bytesLoaded;
  203. 	var percentage:Number = part / total;
  204. 	var percentageFormatted:String = Math.floor(percentage * 100)+"%";
  205. 	trace(percentageFormatted+" loaded");
  206. }
  207.  
  208. function onFlvPlaybackCaptioning_CAPTION_CHANGE(event:CaptionChangeEvent):void {
  209. 	trace("onFlvPlaybackCaptioning_CAPTION_CHANGE()");
  210. 	var removeHtmlRegExp:RegExp = new RegExp("<[^<]+?>", "gi");
  211. 	if (event.added) {
  212. 		var objA:Object = event.captionCuePointObject;
  213. 		for (var i in objA){
  214. 			trace(i+": "+objA[i]);
  215. 			if (i == "parameters") {
  216. 				var objB:Object = objA[i];
  217. 				for (var j in objB){
  218. 					trace(j+": "+objB[j]);
  219. 					if (j == "text") {
  220. 						trace(objB[j].replace(removeHtmlRegExp, ""));
  221. 					}
  222. 				}
  223. 			}
  224. 		}
  225. 	}
  226. }
  227.  
  228. function onFlvPlaybackCaptioning_CAPTION_TARGET_CREATED(event:CaptionTargetEvent):void {
  229. 	trace("onFlvPlaybackCaptioning_CAPTION_TARGET_CREATED()");
  230. }
  231.  
  232. function onFlvPlaybackCaptioning_COMPLETE(event:Event):void {
  233. 	trace("onFlvPlaybackCaptioning_COMPLETE()");
  234. }
  235.  
  236. function onFlvPlaybackCaptioning_HTTP_STATUS(event:HTTPStatusEvent):void {
  237. 	trace("onFlvPlaybackCaptioning_HTTP_STATUS()");
  238. 	trace("event.status: "+event.status);
  239. }
  240.  
  241. function onFlvPlaybackCaptioning_IO_ERROR(event:IOErrorEvent):void {
  242. 	trace("onFlvPlaybackCaptioning_IO_ERROR()");
  243. 	trace("event.text: "+event.text);
  244. }
  245.  
  246. function onFlvPlaybackCaptioning_OPEN(event:Event):void {
  247. 	trace("onFlvPlaybackCaptioning_OPEN()");
  248. }
  249.  
  250. function onFlvPlaybackCaptioning_PROGRESS(event:ProgressEvent):void {
  251. 	trace("onFlvPlaybackCaptioning_PROGRESS()");
  252. }
  253.  
  254. function onFlvPlaybackCaptioning_SECURITY_ERROR(event:SecurityErrorEvent):void {
  255. 	trace("onFlvPlaybackCaptioning_SECURITY_ERROR()");
  256. 	trace("event.text: "+event.text);
  257. }
  258.  
  259.  
  260.  
  261. // The 'captions_en.xml' file looks like this ...
  262. //<?xml version="1.0" encoding="UTF-8"?>
  263. //<tt xmlns="http://www.w3.org/2006/04/ttaf1" xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
  264. //	<head>
  265. //		<styling>
  266. //			<style id="1" tts:textAlign="center" tts:fontFamily="_sans" tts:fontSize="16" tts:fontWeight="bold" tts:color="#FFFFFFFF"/>
  267. //			<style id="2" tts:backgroundColor="#00000000"/>
  268. //			<style id="3" tts:backgroundColor="#000000FF"/>
  269. //			<style id="trans" style="1 2"/>
  270. //			<style id="opaq" style="1 3"/>
  271. //		</styling>
  272. //	</head>
  273. //	<body>
  274. //		<div>
  275. //			<!--
  276. //			<p begin="00:00:00.20" dur="00:00:04.00" style="opaq">Nero is a Lionfish<br />(<span tts:fontStyle="italic">Pterois volitans</span>),</p>
  277. //			<p begin="00:00:09.00" dur="00:00:02.00" style="trans">at home in his reef aquarium.</p>
  278. //			-->
  279. //
  280. //			<p begin="00:00:01.000" style="trans">Hi John, Hi James,</p>
  281. //			<p begin="00:00:03.369" style="trans">This is just a test to what a talking head shot would look like.</p>
  282. //			<p begin="00:00:07.340" style="trans">Don&apos;t really know what to say, maybe I could sing a song for you.</p>
  283. //			<p begin="00:00:11.833" style="trans">Having two small children, the only songs I really know are<br />things like Ba Ba Black Sheep and Incy Wincy Spider.</p>
  284. //			<p begin="00:00:22.047" style="trans">Anyway, if I just move a little bit, from side to side.</p>
  285. //			<p begin="00:00:28.133" style="trans">And maybe I&apos;ll just say the alphabet and then we can check syncing.</p>
  286. //			<p begin="00:00:33.724" style="trans">A, B, C, D, E, F, G ...</p>
  287. //			<p begin="00:00:38.791" style="trans">... H, I, J, K, L, M, N, O, P ...</p>
  288. //			<p begin="00:00:42.240" style="trans">... Q, R, S, T, U, V ...</p>
  289. //			<p begin="00:00:45.844" style="trans">... W, X, Y and Z</p>
  290. //			<p begin="00:00:49.188" style="trans">Now I know my ABC, next time won&apos;t you sing with me.</p>
  291. //			<p begin="00:00:56.450" style="trans">Hooray! I know my alphabet. All good.</p>
  292. //			<p begin="00:01:00.656" style="trans">Ok, I&apos;m going to sign-off now and I&apos;ll send this to you once I have popped it in to the demo.</p>
  293. //			<p begin="00:01:06.377" style="trans">And we can test it on the Archos&apos;s.</p>
  294. //			<p begin="00:01:08.388" style="trans">Ok, bye.</p>
  295. //		</div>
  296. //	</body>
  297. //</tt>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.