The draggable attribute seems to have no effect in browsers on touch devices.
<div draggable="true">Draggable Box</div>
https://jsfiddle.net/41z5uz4t/
With a mouse, I can drag this element around. If I try to drag it around on my touch screen (Windows 10, Chrome), regular touch events, such as navigating back, seem to take precedence. I've tried holding it, then dragging. This doesn't work either.
Is there a polyfill for fixing this behavior in Chrome? Am I supposed to be doing something different?
Draggable attribute is "experimental technology" it is currently not supported on any of the major mobile browsers.
If you wnat to make an Drag'n'Drop UI you should use some JS library for that, like, greensock nice library and Touchpunch with jQuery UI and there are much more just search on the web.
I'll just make that clear the draggable attribute is not supported today by the major mobile browsers.
EDIT:
Seems that it is bug in Chrome with the touch screen devices like yours I found a solution that maybe could help you:
Go to chrome://flags and change the "Enable Touch Events" setting from "Automatic" to "Enable". The current version of Chrome apparently does not detect the touch capabilities of Windows 10.
found here.
Still, if that is an experimental attribute you better use an js library for that action.
You can use jQuery to achieve this effect. Here is a guide on how to do that:
http://touchpunch.furf.com/
Put this code before the line with the draggable object:
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
And put this after the line with the draggable object:
<script>$('#draggablebox').draggable();</script>, assuming the div has the id draggablebox.
I don't know if it's an issue with a JS conflict, possibly a hidden jQuery/CSS thing, an invisible WebKit href inclusion, or just a bug in Chrome Version 43.0.2357.130 (64-bit).
The intent is to print the contents of a Flash drawing game--which was previously working on all browsers as well as Chrome--but this combination of Chrome and newer website code, clicking on print forces the Flash object to reload...which of course empties it so nothing will print.
Has anyone encountered this kind of behavior before? FWIW this site is using the Zurb Foundation system, along with jQuery and the http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js plugin.
(Because it's using Foundation, we have three instances of the SWF specified by size, though all other views are empty except the active one. I tested to see if this was a possible problem by removing all but 1 object on the page, but it made no difference to this behavior.)
To anyone who might by now be beating their head against a wall trying to understand this: I've discovered the specific issue that causes Chrome to crash Flash objects when it launches its print preview dialog:
Because enabling/disabling the .show-for-large-up and .show-for-medium-only tags (among others?) in Foundation.css were modifying the behavior, I created our own Modernizr-enabled screen size detection function to hide/show our divs without Foundation's tags. When I did that, printing on Chrome worked as it should.
Then, thinking I didn't need to invoke Modernizr/JS functionality when Foundation's own CSS file already accomplished this using #media queries, I deleted that function and simply added in display: block for our new custom hide/show tags. This caused Chrome to once again crash Flash objects.
So the issue is that Chrome's print preview dialog crashes Flash objects when CSS is using #media queries to determine the visibility of [at least] large- and medium-view content divs.
This points to a Chromium issue as printing Flash objects works fine on Safari, Firefox and Explorer. Specifically, the Chrome print preview dialog is not playing nice with Foundation's #media queries--and possibly the CSS of other third party providers.
im new to polymer just want to know why it looks different from chrome and fox?
chrome looks good but in fox it looks different like the color of the scaffold toolbar, logo and content, im using firefox 33.1
url: http://jigs-gfx.net/polymer/practice/
Firefox doesn't seem to be honoring your use of the deep shadow elements in your site.css file.
header-koh::shadow .logo{
Is valid in chrome, but not in Firefox. Firefox doesn't fully support web components and all their conventions out of the box, but you can enable the dom.webcomponents.enabled flag to turn them on and get a similar experience across browsers. A guide to how to enable the feature is given here:
Enable Custom Elements in Firefox
Firefox and IE both have full web component support in progress and hopefully will support them out of the box soon.
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
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?