Playing FLVs using VP6Player

examples/inspector/js/inspectorGfx.js

@@ -22,6 +22,7 @@ function createPlaybackEaselHost(file) {
 
 var easel;
 function createEasel() {
+  Shumway.GFX.VP6Player.SWFPath = "../../utils/vp6player/vp6player.swf";
   Shumway.GFX.WebGL.SHADER_ROOT = "../../src/gfx/gl/shaders/";
   easel = new Easel(document.getElementById("easelContainer"));
   easel.startRendering();

extension/firefox/Makefile

@@ -42,6 +42,7 @@ build: ensureoutputdir
 	mkdir -p $(BUILD_DIR)/content/libs
 	cp ../../build/libs/builtin.abc $(BUILD_DIR)/content/libs/
 	cp ../../build/libs/relooper.js $(BUILD_DIR)/content/libs/
+	cp ../../utils/vp6player/vp6player.swf $(BUILD_DIR)/content/
 	# Copying closure optimized shumway.js files
 	cp $(BUNDLES_DIR)/shumway*.js $(BUILD_DIR)/content/
 	cp ../../build/version/version.txt $(BUILD_DIR)/content/version.txt
@@ -71,6 +72,7 @@ restartless:
 	ln -s ../../../build/libs $(RESTARTLESS_DIR)/content/libs
 	ln -s ../../../build/bundles/shumway.gfx.js $(RESTARTLESS_DIR)/content/shumway.gfx.js
 	ln -s ../../../build/bundles/shumway.player.js $(RESTARTLESS_DIR)/content/shumway.player.js
+	ln -s ../../../utils/vp6player/vp6player.swf $(RESTARTLESS_DIR)/content/vp6player.swf
 	ln -s ../../../build/version/version.txt $(RESTARTLESS_DIR)/content/version.txt
 	cd $(RESTARTLESS_DIR); pwd > "$(PROFILE)/extensions/[email protected]"
 	grep "nglayout.debug.disable_xul_cache\", true" "$(PROFILE)/prefs.js" 1>/dev/null || echo "Set create 'nglayout.debug.disable_xul_cache' boolean preference to 'true'."

extension/firefox/content/ShumwayStreamConverter.jsm

@@ -106,6 +106,11 @@ function isShumwayEnabledFor(startupInfo) {
   var url = startupInfo.url;
   var baseUrl = startupInfo.baseUrl;
 
+  if (/^resource:\/\/shumway\//i.test(url)) {
+    // disabled for internal Shumway SWFs
+    return false;
+  }
+
   // blacklisting well known sites with issues
   if (/\.ytimg\.com\//i.test(url) /* youtube movies */ ||
     /\/vui.swf\b/i.test(url) /* vidyo manager */  ||

src/flash/net/NetStream.ts

@@ -639,12 +639,18 @@ module Shumway.AVMX.AS.flash.net {
         Debug.warning('MediaSource API is not enabled, falling back to regular playback');
         isMediaSourceEnabled = false;
       }
+      var flvMode: string = flvOption.value;
       var forceMediaSource = false;
-      if (/\.flv($|\?)/i.test(url)) {
-        if (flvOption.value === 'supported') {
+      var useVP6Player = false;
+      if (flvMode === 'alwaysflash') {
+        useVP6Player = true;
+      } else if (/\.flv($|\?)/i.test(url)) {
+        if (flvMode === 'supported') {
           forceMediaSource = true;
-        } else if (flvOption.value === 'mock') {
+        } else if (flvMode === 'mock') {
           url = 'resource://shumway/web/noflv.mp4';
+        } else if (flvMode === 'flash') {
+          useVP6Player = true;
         } else {
           setTimeout(() => {
             this._netStream.dispatchEvent(new this.sec.flash.events.NetStatusEvent(events.NetStatusEvent.NET_STATUS,
@@ -653,10 +659,14 @@ module Shumway.AVMX.AS.flash.net {
           return;
         }
       }
+
       if (!forceMediaSource && !isMediaSourceEnabled) {
         somewhatImplemented("public flash.net.NetStream::play");
         this._state = VideoStreamState.OPENED;
         this._url = FileLoadingService.instance.resolveUrl(url);
+        if (useVP6Player) {
+          this._url = 'vp6:' + this._url;
+        }
         return;
       }
 

src/gfx/references-base.ts

@@ -23,6 +23,7 @@
 /// <reference path='geometry.ts'/>
 /// <reference path='regionAllocator.ts'/>
 /// <reference path='nodes.ts'/>
+/// <reference path='vp6player.ts' />
 /// <reference path='renderables/renderables.ts'/>
 /// <reference path='filters.ts'/>
 

src/gfx/renderables/renderables.ts

@@ -212,7 +212,23 @@ module Shumway.GFX {
       this._assetId = assetId;
       this._eventSerializer = eventSerializer;
 
-      var element: HTMLVideoElement = document.createElement('video');
+      RenderableVideo._renderableVideos.push(this);
+
+      if (typeof registerInspectorAsset !== "undefined") {
+        registerInspectorAsset(-1, -1, this);
+      }
+
+      this._state = RenderableVideoState.Idle;
+    }
+
+    private _setupVideoElement(useFlash: boolean): HTMLVideoElement {
+      var element: HTMLVideoElement;
+      if (useFlash) {
+        element = <HTMLVideoElement>VP6Player.createDOMElement();
+      } else {
+        element = document.createElement('video');
+      }
+
       var elementEventHandler = this._handleVideoEvent.bind(this);
       element.preload = 'metadata'; // for mobile devices
       element.addEventListener("play", elementEventHandler);
@@ -230,14 +246,7 @@ module Shumway.GFX {
 
       this._video = element;
       this._videoEventHandler = elementEventHandler;
-
-      RenderableVideo._renderableVideos.push(this);
-
-      if (typeof registerInspectorAsset !== "undefined") {
-        registerInspectorAsset(-1, -1, this);
-      }
-
-      this._state = RenderableVideoState.Idle;
+      return element;
     }
 
     public get video(): HTMLVideoElement {
@@ -342,7 +351,9 @@ module Shumway.GFX {
       var ESTIMATED_VIDEO_SECOND_SIZE: number = 500;
       switch (type) {
         case VideoControlEvent.Init:
-          videoElement.src = data.url;
+          var useVP6Player = data.url && data.url.indexOf('vp6:') === 0;
+          videoElement = this._setupVideoElement(useVP6Player);
+          videoElement.src = useVP6Player ? data.url.substring('vp6:'.length) : data.url;
           this.play();
           this._notifyNetStream(VideoPlaybackEvent.Initialized, null);
           break;
@@ -422,7 +433,8 @@ module Shumway.GFX {
         if (renderable.willRender()) {
           // If the nodes video element isn't already on the video layer, mark the node as invalid to
           // make sure the video element will be added the next time the renderer reaches it.
-          if (!renderable._video.parentElement) {
+          if (!renderable._video.parentElement ||
+              renderable._video.parentElement === VP6Player.hiddenLayer) {
             renderable.invalidate();
           }
           renderable._video.style.zIndex = renderable.parents[0].depth + '';