I'm making an HTML5 game.
Is there anyway to provide the user with a button to make it full-screen? For any browsers.
I think the answer is yes:
Webkit fullscreen api seems like it's coming.
http://peter.sh/2011/01/javascript-full-screen-api-navigation-timing-and-repeating-css-gradients/
Very cool.
Mozilla, Chrome and Safari now have a Javascript API to make an element full screen.
What one does to make an element full screen, is:
document.getElementById("myvideo").requestFullScreen()
http://www.sitepoint.com/html5-full-screen-api/
Short answer: no.
Longer answer: WebKit has an experimental implementation of fullscreen, but only for the video element. Mozilla is looking at doing a spec where any element can be made full screen (see also), but no formal spec document has yet been produced, and there are no implementations.
Edit:
Just a note, experimental implementations of the Full Screen API are now available in everything except IE.
Related
Independent composition doesn't seem to work for the rendering process of my video. My ads are broken too. They remain black and give an error:
Independent composition is disabled for video rendering. This can
negatively impact performance
I'm using the GoogleIMA SDK.
From MSDN:
The HTML5 video tag is an element that is explicitly targeted for
independent composition. Independently rendering and composing HTML5
video enables a fast and smooth media playback experience.
I don't know why this doesn't work, is this a bug?
I'm not sure if it's a bug or intentionally done this way (Not sure since it's pretty weird that video gets dropped from independent rendering).
But i do know how to fix this. The way to fix it is to look for CSS animations/transforms on the <video> element. These are usually suspect of a <video> element being kicked out of independent rendering.
Hope this helps!
For those that wandered in from a Google search like I did, but the marked answer does not solve your issue
If there are no animations on your <video> element, but you are still getting this error, make sure you don't have the
transform-style: preserve-3d;
property in the style it may also break Edge, with the solution being to remove this property or to pray that Edge goes away some-time soon.
Chrome browser does not seem to have a scrollbar for datalist. It works on firefox and IE, but not chrome. Is this a chrome issue with not keeping up with HTML5 standards? Can I manually add it with CSS?
It’s not much of answer, I know, but from what I’ve read/tried you don’t have any control over how it’s displayed.
I know it’s not really a solution, but you could try using a jQuery plugin that has pretty much the same functionality, but allows for better styling. Untested, but QuickSelect looks it’ll do the same, or you could look for a polyfill.
I need to hide the full screen button of the video tag in HTML5.
Is there any way to achieve it ?
Thanks.
I think you can accomplish this by changing the css for the #document fragments, these are DOM1 specs and supported by all browsers, but about the styling, I'm not sure.
Simple webkit browser (chrome on windows) specific solution
The following solution is webkit specific
video::-webkit-media-controls-fullscreen-button {
display: none;
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}
Here is the fiddle for it.
Warning:
This will not work on browsers who have a rendering engine other than webkit e.g. Firefox or Internet Explorer, or obsolete versions of Opera that had Blink/Presto.
This may not work with implementations of webkit browsers in Operating systems other than windows e.g. Safari on macOS.
Update:
After multiple readers complained that the aforementioned solution did not work for certain browsers, I'm updating the answer.
Taking care of Vendor specific implementations:
The above solution is -webkit- browser specific and was tested in Chrome on Windows.
The implementation of shadow DOM hasn't been standardized, and therefore, may vary from one browser vendor to another.
Almost all browsers today have great developer tools, but some features are intentionally locked, but can be opened with a little effort, for instance, in Firefox most such configurations can be accessed in the about:config page.
Developers are advised to unlock the shadow DOM features in their browser.
Then, they can inspect the <video> component
How to enable shadow DOM selection in Chrome
Go to Chrome > Developer Tools > Settings (gear icon)
Under Elements look for Show user agent shadow DOM option
Check (select) the box
You'll be able to inspect the underlying shadow DOM
Observe their respective styling
You will notice that they're similar to pseudo class selectors
Some unsolicited free advise for Hiding the full screen button of the video tag in HTML5
Finding the solution can be as easy as writing CSS with pseudo class selectors
But like every other CSS, it might require a lot of trial-n-error
And you might undergo a lot of frustration to make it work
But always remember, it's worth it.
Additionally, as #paulitto suggests, DOM methods can be implemented after removing controls attribute from <video> element. Refer this tutorial for more.
You need just to write this code in your css:
video::-webkit-media-controls-fullscreen-button {
display: none;
}
And the fulscreen button will hide
You can disable the fullscreen button using the controlsList="nofullscreen" attribute
Supported Browsers: Chrome, Edge, Edge Beta. It doesn't work with Firefox.
Refer the fiddle
Attribute values:
controlsList="nodownload nofullscreen noremoteplayback"
You must have controls attribute in <video> tag to get the features of controlsList.
Reference Page
I think you are not able to do that without hiding all the controls.
You can use its dom methods to implement your own controls and design them to look exactly the same as built in controls
Or you can also use external html5 video plugins to implement this
You can write your custom code for controls
eg. For changing video time use below code
document.getElementsByTagName('video')[0].currentTime=10;
Below link provides all necessary examples to do manual controls on video with javascript
HTML5 Video Events and API
Please check out this snippet of my site.
http://jsfiddle.net/TmnPV/
The logo is made up of the 'circle1' and other div tags in the same html sections. It doesn't show up on jsfiddle either and it looks different on every browser.
On chrome = shows all
On firefox = no logo shows and bottom text under input field is larger
On safari = no logo shows
What can I do?
This is called, umm... , welcome to wild wild world of web. Every browser vendor parses html/css/javascript differently. Some are lenient, some are strict. (Chrome Vs. Opera). Some have different Box model, some have standard operational behavior, some tend to do their own thing.(Opera Vs. IE6)
Answer to different renderings : You have to hunt down each and every little quirk. One by one.
Welcome.
You'll need to adjust your styles for older browsers if you plan on doing alot of css3 transforms.
IE 6, 7, and 8 just don't have the ability to read those styles.
Even on Firefox, depending on the version, you'll run into various spacing issues since the rendering engine is different than Chrome (and Safari).
For using html5 and css3 in older IEs you can (sparingly) use polyfills, which duplicate the effect using javascript. You can see a list of available polyfills here:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Quirksmode is a great resource for checking compatibility: http://www.quirksmode.org/compatibility.html
I would highly recommend the Firebug add-on for Firefox to see where the extra spacing, etc is happening.
When you run into a specific issue with a specific browser that you can't figure out post a question here. It's much easier to help with one bug than just general browser problems.
That's mostly because you are using code to work with one browser. Different browser uses different code renderer. It's hard to make everything look the same, even tho Internet explorer is the worst, other browsers have different features. Opera has most of the HTML5 form features, that no other browser supports so far, but Chrome and Firefox supports the most of the HTML5 attributes. Hope this helps understand the reason why.
What, if any, considerations (HTML, CSS, JavaScript) should you take when designing for Google Chrome?
Chrome uses Webkit, the same engine as is used by Safari, OmniWeb, iCab and more. Just code everything based on the standards and verify in each browser.
I think first and foremost you should focus on using HTML and scripting that follows the standards.
After you have that running, file a bug report then make the browser-specific tweaks. If Chrome is worth a flip you shouldn't have to tweak things for it.
The same ones you'd take for Safari, as they share the same rendering engine (with a slight version mismatch).
I'm sure filing a bug report really helps with all those IE rendering issues!
Realistically, you need to test your application in each browser, no browser 100% follows the W3C standards so ultimately you can't rely on following that at all. You need to test everything you do in any browser you wish to support.
As has been mentioned, Google Chrome has the same rendering engine as Safari/iPhone/etc., WebKit which passes Acid3, so there should be minimal issues if you follow the standards. But don't rely on it. Google Chrome currently uses a slightly older version of WebKit than Safari. I'm sure they'll eventually be on the same version at some point, but unfortunately any new browser becomes just another browser to test in.
Are you designing specifically for Chrome, or do you want to make sure your pages work well with Chrome?
Assuming it's the latter, then just use the same design considerations you'd do for any browser. If applicable, keep in mind that many phones and video game consoles have web browsers now.
Chrome uses a new JavaScript engine, so you'll have to test your JavaScript using Chrome as well as Safari. The HTML and CSS may render pretty much the same, but they use different JavaScript engines.