Cordova IOS video player

9
votes

I am using webRTC streaming via RTCMultiConnection. I created a cordova application and get the blob url from server in video tag. In android and browsers works well. In IOS, video plays but control buttons does not work. Also video's position is static on application. I change page in application but video always stay. When i try to pull page, it looks like here :

enter image description here

enter image description here

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 like : blob : file:///adfsg-123asd1-12asfd3-4fdssdv

Edit : I can see my iphone's front camera on browser live. But i can not see me, in iphone.

Videoplayer does not work.

Edit 2 : 26.09.2017 There is no problem with mp4 video. I tried with remote mp4 video, and it works well.

Here is screenshots, they are all same. Only src different.

p.s Big video is mp4 always static position, and small video is blob and when i scrolling, it scroll to. :

https://i.imgyukle.com/2017/09/25/kgZev.jpg

https://i.imgyukle.com/2017/09/25/kg4kx.jpg

https://i.imgyukle.com/2017/09/25/kg6a6.jpg

enter image description here

1
javascriptioscordovavideo

1 Answers

0
votes

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);