I'm using the DOMParser to manipulate AJAX-loaded html content before injecting it into the DOM. caniuse state that current support is good, but doesn't go that far back - for IE with only partial support until version 10 and for iOS only full support in Mobile Safari from version 8.1. But in this post the claim is made that it will work all the way back to IE6 (no mention here about mobile browsers). So, my question is: If one uses window.DOMParser or the ActiveX version Microsoft.XMLDOM what kind of coverage will one have? Will it cover IE back to IE6 as claimed in the linked post or is that too optimistic; and roughly what proportion of mobile browser users would one exclude requiring DOMParser support - pur in another way: is the mobile platform ready for DOMParser-supported applications?
If you use something in the spirit of
try { Microsoft.XMLDOM } else {window.DOMParser}
You will be good as far back as IE 6. But three years later I hope you do not need that support anymore :)
I am trying to build a web app that will allow users to use the built in camera on an iPad to take a picture or video of themselves and then post it to Facebook. So far I have had no luck when testing getUserMedia() in Safari for iOS 6 or the Chrome app.
This info graphic shows that it is not supported by Safari with iOS 6 but it should work with Chrome, no?
http://caniuse.com/stream
Any help would be much appreciated.
Currently the only way for mobile Safari to get an image from the camera (or photo roll) is with an input element. It is quite simple:
<input id="image-picker" type="file" accept="image/*" />
Then in js:
$("#image-picker").change( function (event) {
var files = event.target.files;
if (files.length>0) {
// Do something with files[0]
}
});
Chrome for iOS uses identical methods/views for displaying and interpreting HTML, with the exception of a few Safari-specific optimizations. If Safari does not support getUserMedia(), then Chrome cannot support it either unless they build their own port of WebKit for iOS, and even then, it might be a stretch. The functionality you are after may be available through some other means, but not using getUserMedia().
Now Safari supports it starting from IOS 11 & Safari 11.
The namespaces have changed a little as its now mediaDevices prefixed.
Check https://caniuse.com/?search=mediaDevices
If you visit a site that uses Flash, and you don't have Flash installed on your browser, a message will be shown to you to install Flash. A similar procedure happens when Silverlight is involved instead of Flash.
What happens if a browser does not support HTML 5? Will I have to install something to get HTML 5 support in that case? Is that even possible?
Browsers will ignore elements it doesn't support and it won't apply css styles to those elements either. You won't get any explicit message that the browser doesn't support HTML5. You can, as the page author, provide your own message if the browser doesn't depending on the circumstance. You can, for example, provide a message that will display to the user inside a video or audio tag.
Well what happened earlier, wenn browsers supported HTML3 and you used HTML4? Nothing really, and that's what's going to happen for HTML5.
Flash and Silverlight are handled using browser plugins, so the browser can warn you if the plugin is not installed. HTML5 is not a plugin, so what you could do is to use JavaScript and check for the browser version.
Users won't get a message if their browser doesn't support certain html5.
What you could do is check what html5 or css3 you need, and look at http://caniuse.com/ wich browsers are compatible with those functions and then use a script to give older browser users a notification to update to a newer browser.
but what happen if a browser does not support HTML 5 ?
Exactly the same as what you described:
If you see when a site uses flash technology ,and you have not flash
component installed on you browser, a message will be shown to you to
install flash(same as silverlight)
This feature detection has absolutely nothing to do with HTML5. It's the implementation of the <object> tag that allows you to specify an url to download the component from if the browser hasn't installed it. It is a browser dependent implementation though.
#Ali Foroughi I didn't notice a clear cut work around if you have HTML 5 elements in a website and how to get older browsers namely IE 8 and older to display the new HTML5 elements. Other answers are true that the HTML5 element won't display correctly or at all but what can be done about this.
There a couple things you can do to either "teach" older browsers to handle HTML5 correctly either by CSS, JavaScript, or an HTML5Shiv. These methods are explained here.
Of course these can't be implemented by the end user but by the websites designer/developer.
Was searching for the answer as to a work around in case someone has an older browser and HTML5 elements are used. I figured if there are work around's for certain CSS styling by using some sort of webkit in the CSS file surely there is for HTML5.
What would be best way to target only Dolphin Browser with your CSS rules and not a single other browser?
Dolphin is browser on the Evo. Something like what targets Firefox:
#-moz-document url-prefix() {
h1 {
color: red;
}
}
Dolphin on Android and IOS has basically the EXACT same user agent string compared to Safari on IOS, or in the Android scenario, as the native Android browser on Android 2.X at least.
I personally think they did this deliberately haha
The way I think you could detect Dolphin is with:
Detect if "Safari" is in the UA, (sure it will still match IOS Safari and Native Android browser, but then check how high the header is, the Dolphin header is twice as tall and even has that anonying bar at the bottom.
I have never heard of this browser, but chances are that there are no CSS specific hacks to target it. You would have to detect it using the USER_AGENT string (either on server side or in JavaScript) and serve the appropriate CSS rules.
Related:
How can I detect the browser version with JS?
What is better: CSS hacks or browser detection? not really related but good reading
Any php code to detect the browser with version and operating system?
Is there a way to play a video fullscreen using the HTML5 <video> tag?
And if this is not possible, does anybody know if there is a reason for this decision?
2020 answer
HTML 5 provides no way to make a video fullscreen, but the parallel Fullscreen API defines an API for elements to display themselves fullscreen.
This can be applied to any element, including videos.
Browser support is good, but Internet Explorer and Safari need prefixed versions.
An external demo is provided as Stack Snippet sandboxing rules break it.
<div id="one">
One
</div>
<div id="two">
Two
</div>
<button>one</button>
<button>two</button>
div {
width: 200px;
height: 200px;
}
#one { background: yellow; }
#two { background: pink; }
addEventListener("click", event => {
const btn = event.target;
if (btn.tagName.toLowerCase() !== "button") return;
const id = btn.textContent;
const div = document.getElementById(id);
if (div.requestFullscreen)
div.requestFullscreen();
else if (div.webkitRequestFullscreen)
div.webkitRequestFullscreen();
else if (div.msRequestFullScreen)
div.msRequestFullScreen();
});
2012 answer
HTML 5 provides no way to make a video fullscreen, but the parallel Fullscreen specification supplies the requestFullScreen method which allows arbitrary elements (including <video> elements) to be made fullscreen.
It has experimental support in a number of browsers.
2009 answer
Note: this has since been removed from the specification.
From the HTML5 spec (at the time of writing: June '09):
User agents should not provide a
public API to cause videos to be shown
full-screen. A script, combined with a
carefully crafted video file, could
trick the user into thinking a
system-modal dialog had been shown,
and prompt the user for a password.
There is also the danger of "mere"
annoyance, with pages launching
full-screen videos when links are
clicked or pages navigated. Instead,
user-agent specific interface features
may be provided to easily allow the
user to obtain a full-screen playback
mode.
Browsers may provide a user interface, but shouldn't provide a programmable one.
Most of the answers here are outdated.
It's now possible to bring any element into fullscreen using the Fullscreen API, although it's still quite a mess because you can't just call div.requestFullScreen() in all browsers, but have to use browser specific prefixed methods.
I've created a simple wrapper screenfull.js that makes it easier to use the Fullscreen API.
Current browser support is:
Chrome 15+
Firefox 10+
Safari 5.1+
Note that many mobile browsers don't seem to support a full screen option yet.
Safari supports it through webkitEnterFullscreen.
Chrome should support it since it's WebKit also, but errors out.
Chris Blizzard of Firefox said they're coming out with their own version of fullscreen which will allow any element to go to fullscreen. e.g. Canvas
Philip Jagenstedt of Opera says they'll support it in a later release.
Yes, the HTML5 video spec says not to support fullscreen, but since users want it, and every browser is going to support it, the spec will change.
webkitEnterFullScreen();
This needs to be called on the video tag element, for example, to fullscreen the first video tag on the page use:
document.getElementsByTagName('video')[0].webkitEnterFullscreen();
Notice: this is outdated answer and no longer relevant.
Many modern web browsers have implemented a FullScreen API that allows you to give full screen focus to certain HTML elements. This is really great for displaying interactive media like videos in a fully immersive environment.
To get the full screen button working you need to set up another event listener that will call the requestFullScreen() function when the button is clicked. To ensure that this will work across all supported browsers you are also going to need to check to see if the requestFullScreen() is available and fallback to the vendor prefixed versions (mozRequestFullScreen and webkitRequestFullscreen) if it is not.
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
Reference:- https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
Reference:- http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos
From CSS
video {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(polina.jpg) no-repeat;
background-size: cover;
}
I think that if we want to have a open way to view videos in our browsers without any closed source plugins (and all the security breaches that comes with the history of the flash plugin...). The tag has to find a way to activate full screen.. We could handle it like flash does: to do fullscreen, it has to be activated by a left click with your mouse and nothing else, I mean it's not possible by ActionScript to launch fullscreen at the loading of a flash by example.
I hope I've been clear enough: After all, I'm only a french IT student, not an english poet :)
See Ya!
A programmable way to do fullscreen is working now in both Firefox and Chrome (in their latest versions). The good news is that a spec has been draft here:
http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
You will still have to deal with vendor prefixes for now but all the implementation details are being tracked in the MDN site:
https://developer.mozilla.org/en/DOM/Using_full-screen_mode
You can change the width and height to be 100%, but it won't cover the browser chrome or the OS shell.
Design decision is because HTML lives inside the browser window. Flash plugins aren't inside the window, so they can go full screen.
This makes sense, otherwise you could make img tags that covered the shell, or make h1 tags so the whole screen was a letter.
No, it is not possible to have fullscreen video in html 5. If you want to know reasons, you're lucky because the argument battle for fullscreen is fought right now. See WHATWG mailing list and look for the word "video". I personally hope that they provide fullscreen API in HTML 5.
Firefox 3.6 has a full screen option for HTML5 video's, right-click on the video and select 'full screen'.
The latest Webkit nightlies also support full screen HTML5 video, try the Sublime player with the latest nightly and hold Cmd / Ctrl while selecting the full screen option.
I guess Chrome / Opera will also support something like this. Hopefully IE9 will also support full screen HTML5 video.
This is supported in WebKit via webkitEnterFullscreen.
An alternative solution would be to have to browser simply provide this option on the contextual menu. No need to have Javascript to do this, though I could see when it would be useful.
In the mean time an alternative solution would simply be to maximise the window (Javascript can provide screen dimensions) and then maximise the video within it. Give it a go and then simply see if the results are acceptable to your users.
The complete solution:
function bindFullscreen(video) {
$(video).unbind('click').click(toggleFullScreen);
}
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
}
else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
HTML 5 video does go fullscreen in the latest nightly build of Safari, though I'm not sure how it is technically accomplished.
Yes. Well what happens with HTML5 video is that you just put the <video> tag and the browser will give it's own UI, and thus the ability for full screen viewing. It really makes life much better on us users to not have to see the "art" some developer playing with Flash could make :) It also adds consistency to the platform, which is nice.
As of Chrome 11.0.686.0 dev channel Chrome now has fullscreen video.
You can do this if you tell to user to press F11(full screen for many browsers), and you put video on entire body of page.
If none of these answers dont work (as they didnt for me) you can set up two videos. One for regular size and another for fullscreen size. When you want to switch to fullscreen
Use javascript to set the fullscreen video's 'src' attribute to the smaller videos 'src' attribute
Set the video.currentTime on the fullscreen video to be the same as the small video.
Use css 'display:none' to hide the small video and display the big one with the via 'position:absolute' and 'z-index:1000' or something really high.
If you have option to define your site as progressive web app (PWA), then there is also option to use display: "fullscreen" under manifest.json. But this will only work if user adds/installs your webapp to home screen and opens it up from there.
it's simple, all the problems can be solved like this,
1) have escape always take you out of fullscreen mode
(this doesn't apply to manually entering fullscreen through f11)
2) temporarily display a small banner saying fullscreen video mode is entered (by the browser)
3) block fullscreen action by default, just like has been done for pop-ups and local database in html5 and location api and etc, etc.
i don't see any problems with this design. anyone think i missed anything?