Hello guys I have got custom fullscreen icon that triggers fullscreen on my video. Everything is ok except that it doesn't work on Apple's devices. Do you know how to fix that?
$('.fullscreen_btn').click(function() {
fullscreen=true;
var mediaElement = document.getElementById('videoAbout');
if(mediaElement.requestFullScreen) {
mediaElement.requestFullScreen();
}
else if(mediaElement.webkitRequestFullScreen) {
mediaElement.webkitRequestFullScreen();
}
else if(mediaElement.mozRequestFullScreen) {
mediaElement.mozRequestFullScreen();
}
else if(mediaElement.msRequestFullScreen) {
mediaElement.mozRequestFullScreen();
}
});
As I said - code above is working on Windows/android devices, but not on Apple's.
I sloved my question. All i had to do is that:
var mediaElement = document.getElementById('videoAbout');
mediaElement.webkitEnterFullscreen();
mediaElement.enterFullscreen();
This is opening fullscreen on HTML5 video on iOS devices.
Quoting directly from the website
In Safari, the built-in video controls include a play/pause button, volume control, and a time scrubber. In Safari 5.0 and later on the desktop and on iOS 4.2 on the iPad, the controls also include a full-screen playback toggle on the lower right. The controls automatically fade out when the video is playing and fade in when the user hovers over the video or touches it.
I also says If you embed audio or video in your website, you should use HTML5. you might be using old html4, I don't know. Try this link
Related
Hi i have a video on my page (mobile view), by default its controls attr is turned off. I want to turn them on and show just on FULLSCREEN (I have a custom fullscreen button).
I was trying to add $('#videoAbout').attr('controls', ''); and also $('#videoAbout').attr('controls', 'true'); when Fullscreen is turned on, but it doesn't work on mobiles. On desktop resized to mobile resolution it works fine.
Can anybody help me out?
Here is live example on my webpage.
To enable the autoplay of a video we just add the "autoplay" attribute to the video tag.
This doesn't work on mobile devices and browsers like Google Chrome, iPad, iPhone, the "play" method will not work until there is no user interaction with the touchscreen.
But in this link or this link, with a custom JavaScript player, they bypass this block, and the video autoplay on iPhone, iPad, Webkit Browsers and all Mobile Devices without user interaction.
How can i do it myself?
if at the load of the page i simulate touch events this might unlock the video "play" method?
i cloud load a video url only with canvas? without the video tag?
Please help and explain me.
There's a library which uses canvas to autoplay inline video on mobile. The downside is that there is no audio, since canvas originally wasn't intended for that.
The library basically loads all the frames and then shows them to you in a sequence. This brings along some limitations regarding the length of the video.
Beats gifs tho....
https://github.com/gka/canvid
Is there a good way to detect if a client browser allows inline media playback for HTML5 video?
Update
I am not trying to simply detect video support.
I am trying to detect if a video can only play fullscreen or also inline. Because on the iPhone safari iOS videos only play in fullscreen, but on iPad videos may be played inline. And by inline I mean in the page without switching to fullscreen.
In iOS10 you can now have a video play inline if the playsinline attribute is added to the video tag.
You can detect this with ('playsInline' in document.createElement('video')).
However this isn't sufficient because this won't exist on desktop browsers - where obviously playing inline is a standard feature.
So this is what I came up with : If not iPhone / iPad then we just assume video can be played inline (this may fail for certain android devices). Otherwise run the test above to check for iOS10
Here is my Modernizr test.
Modernizr.addTest('inpagevideo', function ()
{
return navigator.userAgent.match(/(iPhone|iPod)/g) ? ('playsInline' in document.createElement('video')) : true;
});
Whereas the document iOS-Specific Considerations says:
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.
iOS
var videoIsFullscreen = screen.width < 320 &&
navigator.userAgent.indexOf("Safari") > -1 &&
navigator.userAgent.indexOf("Chrome") == -1 &&
navigator.userAgent.match(/(iPhone|iPod)/);
Note that im not sure if small screen is of 320px, you should adjust this value.
EDIT
Take a look at this post.
Summarizing:
var isSmallScreen = screen.width <= 320;
/// the shadows here
var isWideScreen = screen.width >= 568;
After all, I found this post that may help you much
Can I avoid the native fullscreen video player with HTML5 on iPhone or android?
ANDROID
How to play inline html5 video in Android Browser
Note that is for native Android Browser not for Android Chrome.
Starting from iOS 10 video fullscreen option will be available for phones as well, when adding attribute playsinline to video element.
For earlier versions webkit-playsinline can be used, but it will only be respected on iPhones when page is pinned to home screen.
<video webkit-playsinline playsinline></video>
To detect whether inline playback is available canplay event listener can be used, to check whether video is in full screen. If phone doesn't support inline playback it will go straight to fullscreen when starting playback.
var inlinePlaybackSupported = true;
var elem = document.querySelector('video');
elem.addEventListener('canplay', function () {
//if in fullscreen here, then inline playback is not supported;
if (elem.webkitDisplayingFullscreen) {
inlinePlaybackSupported = false;
}
});
The solution I'm using is this:
var video = document.createElement( 'video' );
...
video.addEventListener( 'playing', function () {
// Note: we are adding event listener for 'playing' event, not for 'play' event!
if ( video.webkitDisplayingFullscreen ) {
console.log( 'Inline playback is not supported' );
} else {
console.log( 'Inline playback is supported' );
}
}, false );
Now there is obviously a problem with this aproach: you don't know whether inline is supported or not until after the video has started playing. Also, the event may trigger multiple times if the user pauses the video (not really a problem, but you have to be careful).
I've tested this on iPod touch, iPhone, iPad, Nexus 5 and Htc One X. It provides correct resulsts on all of this deivces.
I don't know if it's going to work on android devices that play video in fullscreen by default. Personally, I've never saw an android device that plays video in fullscreen. But running my method on nexus 5 gives an interesting console log message:
'HTMLVideoElement.webkitDisplayingFullscreen' is deprecated. Please use the 'fullscreenchange' and 'webkitfullscreenchange' events instead.
So I presume that for android you'll have to use something like that:
video.addEventListener( 'webkitfullscreenchange', function ( e ) {
if ( document.webkitIsFullScreen ) {
console.log( 'Inline playback is not supported' );
} else {
console.log( 'Inline playback is supported' );
}
}, false );
but personally, I never saw this event being fired. Neither on android, nor on iOS.
Some other things that I've tested on several iOS devices that DOESN'T WORK:
property video.webkitSupportsFullscreen - always returns false
events 'webkitendfullscreen' and 'webkitenterfullscreen' - these are the funny ones - webkitendfullscreen works just fine, but webkitenterfullscreen never gets fired
ADDED:
I actually managed to find an android device that only shows video in fullscreen (Fly IQ245 Plus). Although its behavior is very similar to that of iOS, I was unable to detect fullscreen change by any means mentioned above.
I have a scenario where I have search results that contain video content. Each video item in the results has a thumbnail sized video player, so up to 10 html 5 video players can exist per result set. When the user clicks the thumbnail, the video goes fullscreen and automatically plays the video. When the user exits fullscreen, the video pauses.
This all works great on iOS devices, but on android I have significantly more even handling to worry about. Here's the logic as I have it now:
goFullScreen: function (ev) {
var el = ev.target,
isVideoFullscreen = el.webkitDisplayingFullscreen;
el.webkitEnterFullScreen();
// the approach below is the only way I could get reliable fullscreen detection on android
$(window).bind("resize", function (e) {
if (isVideoFullscreen != el.webkitDisplayingFullscreen) {
isVideoFullscreen = el.webkitDisplayingFullscreen;
if (isVideoFullscreen) {
el.load();
el.play();
} else {
el.pause();
}
}
});
}
Even though iOS does not need all of this even handling, it still works fine. The problem with android is that when I exit fullscreen, the video pauses, but the poster image is replaced for the video I just paused with a still from the video (to be expected), but all subsequent videos in the result set have their poster image replaced with an ugly video icon. As a result, the thumbnails just look like broken videos. But if you tap them they still go fullscreen and play just fine.
I'm testing on a Galaxy Nexus and a Galaxy SII. I can say that the el.pause() is not responsible, if removed the video will continue playing in the thumbnail and all video tags below it will still have the broken poster icon.
This works as expected on desktop webkit browser and on iOS devices. Only experiencing this issue on android 4+ devices. Also remember that the EnterFullscreen request has to happen in the scope it's in. Calling out of this scope will prevent it from working due to security restrictions on mobile devices. I've pretty much exhausted all ideas so I'm looking here to hopefully get a few more.
Any suggestions would be greatly appreciated.
I've given up on trying to solve all of the bugs and quirks in Android. Instead, I'm just linking directly to the mpeg4 videos from the thumbnails. So no more video tags, no more event handling.
The only side effect is that some versions of android display a dialog on how you want to play the video, which is not ideal but better than any alternative I could find. Fortunately the iOS experience is consistent no matter what approach I take.
I'm looking to add some videos to my mobile webapp. For the best UX, I'd like to avoid having a simple static video-tag. (because its in an element which is webkit animated and video + webkit animations don't always play nicely together in my experience.)
Rather, I'd like to have an image (with a play icon on it) to "link" to the video. Mobile YouTube (as seen on iOS) have done this very nicely where when you click the image, the video seems to "pop" up to fullscreen and plays. How do they do this? Is it a link? A previously hidden video-tag? Some webkit-animation to do the "popping"?
I snooped around using Chrome Inspector (+user agent switcher to iphone4) but the videos don't play on the desktop browser, and the code overall looks quite complex..
Can you help?
What you can do is on-click of the video thumbnail, you can load the video url using the object/embed tags. In IOS, whenever a video starts playing it automatically plays it in fullscreen(feature of IOS itself)
I believe you can do something similar to this on certain browsers (e.g. WebKit.)