I am developing a website for a client, which contains a few videos, you can see it at this adress : https://clad.web.epfprojets-sceaux.com/index.php
The problem is about the 100% width video, not the 3 first.
To make videos go fullscreen on laptop, I use :
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
It appears it doesn't work when I browse the site from my iPhone 8 on google chrome.
Can someone help me find how to fix this problem please ?
Related
i want to add to my css
the fullscreen check, similar to this below :
#media all and (display-mode: fullscreen) {
body {
background-color: red;
}
}
this example has taken from here:
https://developer.mozilla.org/en-US/docs/Web/CSS/#media/display-mode
I would need it to work on Chrome mobile Android, but as of today, I'm trying but it doesn't work, although it is compatible, on other mobile browsers(Edge or Samsung browser) it works.
Note: to launch Fullscreen on browser i use something like :
function fullScreenMode() {
var doc = window.document;
var docEl = doc.documentElement;
var requestFullScreen = docEl.requestFullscreen();
requestFullScreen.call(docEl);
}
then fullScreenMode() via debug on Chrome:inspect on console,
I am programming web page with Google map on it and some markers (points). Markers have some InfoWindows, in InfoWindow is a link to a <div> tag on the same page. Something like
var infowindow = new google.maps.InfoWindow({
content: 'See info'
});
In this way, the user can display InfoWindow on the map, and then the user can display additional information below on the web page.
It works fine. BUT if the map is in FullScreen mode, the link does not work.
If user clicks on the link in the full screen mode, I would like to
Exit full screen mode, and
Scroll to the anchored <div
id="info">
Can somebody help?
I have tested, that if the link goes to another web page, then it works fine even in the FullScreen mode. The problem is only in linking the same page (via #id).
I tweaked my original solution:
I muset set onClick listener to link ant this listener has to handle the two steps: 1) exit full screen mode and 2) scroll to given tag
Exiting full screen mode is done by i) Checking if document is in full screen mode and if yes, then ii) Exit full screen mode.
This must be done for different webkits
function onClickListener(id) {
// Exit Full Screen Mode
if (document.fullscreenElement ) {
document.exitFullscreen();
} else if (document.mozFullScreenElement ) {
document.mozCancelFullScreen();
} else if (document.webkitFullscreenElement ) {
document.webkitExitFullscreen();
} else if (document.msFullscreenElement ) {
document.msExitFullscreen();
}
// Scroll to #id - using jQuery
$('html,body').animate({scrollTop:$('#'+id).offset().top}, 700);
return false;
}
At certain times in my app I am hiding the UIStatusBar on iOS 7.
-(UIStatusBarAnimation)preferredStatusBarUpdateAnimation {
return UIStatusBarAnimationFade;
}
-(BOOL)prefersStatusBarHidden {
if (self.state == StateModal) {
return YES;
}
return NO;
}
However, this the y-origin of the view controller's UINavigationBar. It moves up since there is not UIStatusBar visible, but I would like to retain the height of the status bar, but makes it's content invisible.
Is this possible? I don't have to take iOS 6 into account, just iOS 7.
You can change current window windowLevel to UIWindowLevelStatusBar, when controller is appeared
https://stackoverflow.com/a/21158994/2035054
I am trying to solve a problem of playing a list of selected videos and audio clips on mobile devices in a browser without user intervention.
I generate a list of URLs of videos and audios. ( I store it in an array).
Then I want to play the list (of URLs of Videos and Audio) continuously, non-stop without user intervention, for example, without involving user to click every clip to play.
I have tried it in HTML 5 with mobile jquery. It is indeed working well on desktop HTML5 enabled browser but it is not working on mobile devices the way I want due to the fact the autoplay feature is disabled on mobile browsers. Existing code given below.
I am willing to using any other solution, as long as it plays list of URLs of Videos and
Audios on mobile devices in a mobile browser continuously.
Any help will be greatly appreciated. I really need to solve this problem.
Thanks.
TJ
function NextFrag(){
if (index < URLArray.length)
{
if(index == 0 )
{
$("#VideoContainer").html('<video id="video1" controls ="controls" > "<source src= "'+ URLArray[index]+ '" type="video/mp4"></source> </video>' );
index++;
$("#video1").bind( "ended", NextFrag);
}
else
{
$("#VideoContainer").html('<video id="video1" controls autoplay > "<source src= "'+ URLArray[index]+ '" type="video/mp4"></source> </video>' );
index++;
$("#video1").bind( "ended", NextFrag);
}
}
If you want to continuously play a list of videos/audios using <video> or <audio> element on mobile devices you have to:
create only one such element,
start playing it with user interaction (because it's impossible to execute the play() method of media element on mobile devices without user action, such as a click/touch event),
and then change only "src" attribute of it
If you remove that media element from DOM then you'll loose the 'scope' of user action event and the next video will need another user action (click/touch) to start it.
The simplest implementation of such continuous looping playlist using jQuery:
<div id="player"></div>
<button id="playBtn">Play</button>
<script>
var videos = [
'video1.mp4',
'video2.mp4',
'video3.mp4'
],
mediaElement,
container,
playBtn,
currentItem = 0;
function createVideo(){
mediaElement = $('<video/>').attr({
id: 'vid',
preload: "none"
}).prop({
controls: true
}).css({
width: '480px',
height: '360px',
position: 'relative'
});
// listen to the events
mediaElement.on('loadstart', playVideo);
mediaElement.on('ended', endedListener);
// add <video> element to the DOM
container.append(mediaElement);
}
function applySrc(src){
mediaElement.attr('src', src); // just change the 'src' attribute
mediaElement[0].load(); // important on iOS
}
function changeVideo(itemId){
applySrc(videos[itemId]);
}
function removeVideo(){
if(mediaElement){
mediaElement.remove();
}
}
function playVideo(){
mediaElement[0].play();
}
function endedListener(evt){
currentItem >= videos.length - 1 ? currentItem = 0 : currentItem++;
changeVideo(currentItem);
}
$(document).ready(function() {
playBtn = $('#playBtn');
container = $('#player');
playBtn.on('click', function(){
removeVideo();
createVideo();
applySrc(videos[currentItem]);
});
});
</script>
Please remember not to use global scope to define that functions - here it's just to simplify the example.
I've successfully tested that solution on:
iPhone 5 iOS 7.0.4 Safari
iPad 2 iOS 7.0.4 Safari
Samsung Galaxy Tab 2 7.0 - GT-P3100 - Android 4.0.3 - native, Chrome, Firefox
Samsung Galaxy SIII - GT-I9300 - Android 4.2.2 - native browser, Chrome, Firefox
Nokia Lumia 925 - Windows Phone 8.0 - IEMobile 10
It's working fine on all desktop browsers too.
I have an app with one NavigationController and 4 UIViewController.
I like to have 3 UIViewController in UIInterfaceOrientationPortrait and one in the Landscape mode. The Landscape Orientation should appear immediately, when the view appears. Unfortunately, the mode changes only when I turn the device.
What can I do to change immediately to landscape without rotate the device?
Here is the code for my NavigationController.m
-(NSUInteger)supportedInterfaceOrientations
{
return [self.topViewController supportedInterfaceOrientations];
}
- (BOOL)shouldAutorotate
{
return [self.topViewController shouldAutorotate];
}
This is for the Portrait UIViewcontroller.m
- (NSUInteger)supportedInterfaceOrientations
{
return UIInterfaceOrientationMaskPortrait;
}
And for the Landscape UIViewController.m :
- (NSUInteger)supportedInterfaceOrientations
{
return UIInterfaceOrientationMaskLandscapeRight;
}
- (UIInterfaceOrientation)preferredInterfaceOrientationForPresentation
{
// (iOS 6)
// Force to portrait
return UIInterfaceOrientationLandscapeRight;
}
In advance thanks for your help!