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.
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);
Related
All of my research and effort has been hitting a wall so far in this regard: Is there any way to make video autoplay on Safari in iOS currently?
Some have mentioned video transcoding or using playsinline (which works on Android), but nothing has worked for iOS / Safari.
I believe the following is still the current picture for iOS:
elements will now honor the autoplay attribute, for elements which meet the following conditions:
elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
elements will also be allowed to autoplay without a user gesture.
If a element gains an audio track or becomes un-muted without a user gesture, playback will pause.
elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.
elements will pause if they become non-visible, such as by being scrolled out of the viewport.
Source: https://webkit.org/blog/6784/new-video-policies-for-ios/
This also requires that the video element has the 'playsinline' attribute.
So there is support for autoplay video, but it is limited so may not meet your particular needs.
One other note - if your use case is for a web view rather than a regular browser, then you have more control. See the documentation for 'wkwebviewconfiguration' and in particular 'mediaTypesRequiringUserActionForPlayback' here:
https://developer.apple.com/documentation/webkit/wkwebviewconfiguration
Video view agora videochat with error
Agora video chat is showing half black and half video
I had the same issue if I use AgoraRTS plugin, also check if you are using the same codec: vp8 or h264
I would recommend specifying {fit: cover} when you are playing the video in the element using the .play() function.
It sizes the video to fit the container while maintaining the aspect ratio.
In case, the above is not the issue and you can't view the full range of the video captured by the media device, then try the steps given in the below-given link:https://docs.agora.io/en/faq/video_blank#issue-description
Do get back to us if the issue remains unresolved.
When I rotate the smartphone in a horizontal position, then full screen video playback is enabled by default.
I found information that you can change the smartphone settings in the chrome browser settings: chrome://flags/#rotate-to-fullscreen and set the status to disabled.
But is it possible to disable full-screen video playback when smartphone rotated using JS or CSS?
I am developing a time-lapse video player using HTML5 Video element and is controlled by mouse (touch) events. The problem is that the videos which will be played are encoded at a different frame rate, not fixed like common 24 FPS. In native platforms such as iOS, there is a native API which provides video's frame rate. I am wondering if is there any similar API on HTML5 Media API. Without this information, I cannot play a video smoothly on my player.
Mozzila Developer Network does not list any methods for finding the framerate of a media element. However, there is an experimental method called seekToNextFrame which could be used to advance frame by frame. This is only supported by firefox behind a flag.
Some mobile devices only support h.264 video decoding at certain resolutions. The iPhone 5 for instance can't decode videos larger than 1080p.
I'm making a site that uses large 360 degree videos as a video texture in webgl but I need to know when the video can't be decoded so i can fallback to a lower resolution.
As far as I can tell, such devices don't emit an error when trying to display the video, they just silently fail.
Is there a way, within a browser to get the maximum video resolution or at least to know if the video has failed to decode.