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?
Related
Hi I was curious how the fullscreen with scrolling works on a youtube page.
Normally when you put a video in fullscreen there is no scrolling. But for youtube they are able to make the video fullscreen (and by extension the browser) and still allow a user to scroll down the page.
I have a feeling they are doing some sort of trick and "highjacking" the fullscreen function and triggering the video to go into theatre mode.
Not sure where to start at all for the code.
YouTube just makes the whole html element full screen and changes the height and width of the video element to 100% of the height and width of the viewport.
Naturally, when you open a website in iPhone Mobile Safari in portrait and rotate it to landscape, it is going to turn "full-screen" (hide bottom-top browser bar). Then you rotate it back to portrait, it keeps the full-screen view (the bottom-top browser bar still not visible). To test, simple open Wikipedia in your iPhone (or on an iPhone Simulator) in portrait, turn it to landscape (going to be fullscreen right away), and turn it back to portrait (keeps its fullscreen view).
I need to change this behavior. I want to make sure, in portrait, the top-bottom status bars are always visible, but in landscape, my website is full-screen. (Because my HTML game is not scrollable, only this back and forth rotation is the issue.)
This game works on this way:
https://lobby.sgplayfun.com/touch/spadenew/20190115P/games/triplepanda/index.jsp?game=S-TP02&language=en_US
Open this game in portrait Safari on an iPhone (or on an iPhone Simulator), turn it to landscape (going to be full-screen) then turn it back to portrait, and the top browser bar is going to appear ???
How can I achieve the same, how does this Panda game do this?
Things I tried
Copy the < meta viewport > tag from Panda, did not work.
look for what does the "ioshack" and "iPhoneX" HTML class do - not helped
google all around, even check Chinese forums and pixiJS forums (that Panda game is a pixiJS app), did not found any useful.
After more investigation, I found the following truth at least on iOS 9-12:
Safari does not keep the full-screen view in portrait mode if the body is not scrollable, meaning the content fits the default view where the top and bottom bar is visible (they will automatically appear in this case when you rotates your phone)
Safari does keep the full-screen view in portrait mode if you use height:100vh on your or tag (instead of e.g 100%)
So, changing the body style to "height: 100%" AND making sure there is no div longer than the body was enough to force Safari avoiding full-screen mode in portrait.
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);
Initially it's showing fine when watching the page in portrait mode and it's fine when changing orientation from portrait to landscape but while changing from landscape to portrait, the web page goes in zoom-in mode and doesn't show the complete page anymore. For this I am using:
width=device-width, minimum-width=768px, maximum-width=1024, initial-scale=0.75, minimum-scale=0.25, maximum-scale=2.0
Any solution regarding same?
You'll need to use maximum-scale=1.0.
If you want to be able to zoom the page manually there's a workaround with JS: How do I reset the scale/zoom of a web app on an orientation change on the iPhone?
I am developing a video player using html5 for iPad and iPhone device, I implemented a scrub bar for video seeking. It works fine in the normal screen, if the page is zoomed then it behaves in a different way, I need a external resource for this. Is there is any plugin for it or any other idea for it?
How about preventing the zoom? If you design your page for a iPhone/iPad, just make it fit the screen and unzoomable.