Cordova IOS video player

Question

I am using webRTC streaming via RTCMultiConnection. I created a Cordova application and get the blob URL from the server in the video tag. In Android and browsers, this works well. In IOS, the video plays but the control buttons do not work. Also, the video's position is static on the application. I change the page in the application but the video always stays. When I try to pull the page, it looks like this:

My HTML code :

<video webkit-playsinline playsinline class="screen-video" src="" reload="metadata" autoplay controls></video>

And how I append in JS:

var videoURL = event.mediaElement.src;
$('.screen-video').attr('src', videoURL);

My videoURL is: blob : file:///adfsg-123asd1-12asfd3-4fdssdv

Edit: I can see my iPhone's front camera on the browser live. But I can not see myself, on iPhone.

The video player does not work.

Edit 2 (26-09-2017): There is no problem with the mp4 video. I tried with remote mp4 video, and it works well.

Answer 1

iOS doesn't play nice with embed media sadly.

As this SO answer suggests:

For the controls, as the videos always play in full-screen, the space left will capture all the click and touch events.

A workaround suggested above could be to set the video's tag width & height to 1/1 dimensions - fixed position to -10,-10 and trigger "play" manually with a custom UI instead the video.

Note the following info from Apple's Dev Site:

Optimization for Small Screens

Currently, Safari optimizes video presentation for the smaller screen on iPhone or iPod touch by playing video using the full screen—video controls appear when the screen is touched, and the video is scaled to fit the screen in portrait or landscape mode. Video is not presented within the webpage. The height and width attributes affect only the space allotted on the webpage, and the controls attribute is ignored. This is true only for Safari on devices with small screens. On Mac OS X, Windows, and iPad, Safari plays video inline, embedded in the webpage.

Default Height and Width on iOS

Because the native dimensions of a video are not known until the movie metadata loads, a default height and width of 150 x 300 is allocated on devices running iOS if the height or width is not specified. Currently, the default height and width do not change when the movie loads, so you should specify the preferred height and width for the best user experience on iOS, especially on iPad, where the video plays in the allocated space.

iPhone Video Placeholder

The placeholder provides a way for the user to play the media. If the iOS device cannot play the specified media, there is a diagonal bar through the control, indicating that it cannot play.

In case you are willing to consider alternatives, this cordova plugin could be useful:

This plugin allows you to stream audio and video in a fullscreen, native player on iOS and Android.

Basic usage:

var videoUrl = STREAMING_VIDEO_URL;

  // Just play a video
  window.plugins.streamingMedia.playVideo(videoUrl);