MP4 video remains hidden on mobile Flex app

Question

I'm currently struggling on my Flex mobile project using video player. Basically, the problem is that I don't seem to be able to play, or at least see, .MP4 videos at all (no video, no sound, the player view is simply empty) on a iOS mobile device. As soon as I replace the source with a .FLV video, everything is working perfectly.

I have tried two approaches, even though they are using the same components underneath from what I've understood.

• OSMF: using VideoElement, MediaPlayer, MediaContainer and MediaPlayerSprite.

      private var media:VideoElement;
      private var mediaPlayer:MediaPlayer;
      private var mediaContainer:MediaContainer;
      private var mediaSprite:MediaPlayerSprite;
  
  
      protected function onViewCreationComplete(event:FlexEvent):void
      {
          media = new VideoElement(new URLResource("http://10.140.1.165/jobs/92/eproofing/in/pages/versions/1/page1/video.mp4"));
          mediaPlayer = new MediaPlayer(media);
          mediaContainer = new MediaContainer();
          mediaContainer.addMediaElement(media);
          mediaSprite = new MediaPlayerSprite(mediaPlayer, mediaContainer);
          mediaSprite.addEventListener(MouseEvent.CLICK, onVideoSpriteClicked, false, 0, true);
          mediaSprite.mediaPlayer.addEventListener(TimeEvent.CURRENT_TIME_CHANGE, onVideoTimeChanged);
  
          videoContainer.height = manager.selectedPage.formatHeight;
          videoContainer.width = manager.selectedPage.formatWidth;
          videoContainer.addChild(mediaSprite);
      }
  

• StageVideo: using Video, NetConnection and NetStream (StageVideo object usage is actually not yet implemented in the following code, this will be the next step)

      private var video:Video;
      private var ns:NetStream;
      private var nc:NetConnection;
  
      private var isVideoPlaying:Boolean = false;
  
  
      protected function onViewCreationComplete(event:FlexEvent):void
      {
          video = new Video();
          nc = new NetConnection();
          nc.connect(null);
          ns = new NetStream(nc);
          ns.client = {onMetaData:onMetaData};
  
          ns.addEventListener(NetStatusEvent.NET_STATUS, onVideoLoaded);
          ns.play("http://10.140.1.165/jobs/92/eproofing/in/pages/versions/1/page1/video.mp4");
          this.isVideoPlaying = true;
      }
  
      private function onVideoLoaded(event:NetStatusEvent):void
      {
          video.attachNetStream(ns);
          videoContainer.addChild(video);
  
          videoContainer.height = video.height = video.videoHeight;
          videoContainer.width = video.width = video.videoWidth;
      }
  
      private function onMetaData(o:Object):void
      {
  
      }
  

Both gave me the same result: the video appears and is played correctly as long as I'm using .FLV, I can't see/hear anything as soon as I'm loading a .MP4 video instead And of course, MP4 is the format I want to use for this project. I might add that I'm using H.264 codec for these .MP4 files.

Is there anything I'm doing wrong?

Note that both formats are working as long as I'm using the emulator, the .MP4 issue is only occurring when I deploy the app on my iPad.

This is a mobile Flex 4.6 project, using AIR 3.9 on Flash Builder 4.7 for Windows 7 Pro

Answer 1

H.264 video is not supported on iOS devices with RTMP, and I've not seen it work without using the HTTP Live Streaming protocol. Here's a section from the ActionScript reference for NetStream.play:

Special considerations for H.264 video in AIR 3.0 for iOS

For H.264 video, the iOS APIs for video playback accept only a URL to a file or
stream. You cannot pass in a buffer of H264 video data to be decoded. Depending
on your video source, pass the appropriate argument to NetStream.play() as
follows:   

- For progressive playback: Pass the URL of the file (local or remote).

- For streaming video: Pass the URL of a playlist in Apple's HTTP Live Streaming
(HLS) format. This file can be hosted by any server; Flash Media Server 4.5 and
higher has the advantage of being able to encode streams in HLS format.

Answer 2

It's not easy, but IF you really want H264 over RTMP on iOS, you could add a ANE controlling an iOS RTMP Video Playing App(native). There are some small companies that make RTMP H264 Video players for iOS.