I am using the video tag for my page, and I am trying to exclude the fullscreen from the controls.
I see that the "controls" in general is only a true/false statement, but i am looking for a way to disable the fullscreen option from the video.
I could do controls false and use autoplay the video - Then i have no controls - and the video will just play.. - but i think this is too drastic a "solution".
So what kind of solution can be done to achieve what i am looking for ?
For browsers that incorporate a shadow DOM (e.g. newest version of Chrome), you can still use the default controls, but hide the fullscreen button.
Just be sure to include the following in your CSS:
video::-webkit-media-controls-fullscreen-button
{
display: none !important;
}
As shadow DOM manipulation like this becomes more commonplace, more browsers will hopefully support it. Until then, stick to making custom controls or putting the video within an iframe as long as your src points to an html file with a video tag in it, and you specify allowfullscreen="false"for the iframe.
controls is a binary state, you either have what the browser provides or you have nothing.
If you don't want the browser to provide a full screen control but still want a UI, then you'll need to turn controls off and implement your own UI with JavaScript.
Related
I created an audio tag without a download button with
<audio controls controlslist="nodownload">
This was successful.
Now, how do I remove the volume slider (plus mute button) that comes up when I play the sound?
I tried
<audio controls controlslist="novolume">
without any luck.
Try this:
audio::-webkit-media-controls-mute-button {
display: none !important;
}
audio::-webkit-media-controls-volume-slider {
display: none !important;
}
The new controlslist attribute in the HTML5 standard can only accept three settings:
"nodownload", "nofullscreen" and "noremoteplayback".
There are none to control specific controls beside from that. The only (current) workaround for this is to build your own custom interface for the audio object and provide only the controls you want the user to access via the UI.
The attribute is currently only supported in Chrome and Opera, as well as Android. This of course being another incentive to build a custom UI for the audio (or use a library as suggested by Johannes).
For the HTML5 audio tag there is only controls or nothing, and each browser will display it a little differently. But there is not way to have only some of the controls displayed.
To achieve that, you'd have to use a javascript/jQuery player like jPlayer ( http://jplayer.org/) that allows complete individual cofiguration of the UI (but still uses HTML5 in the background).
I would like to keep youtube controls always visible, even when the user don't hover the mouse over the iframe.
With the latest version of youtube-api, I can't use the option autohide=0 anymore since it's depreciated for HTML5. Is there any other method that may arrive at the same result ?
Thanks.
I am trying to display video controls at the top of a video that I am putting on my company's website, but I haven't found anything on google (or stackoverflow directly) in order to get this to work right. Basically, anything I try keeps the controls at the bottom of the video (which I assume is the default).
<video class="yadda" width="100%" controls="top">....</video>
does not work.
Any help would be greatly appreciated!
The controls attribute takes no values- it should be used like this instead:
<video class="yadda" width="100%" controls>....</video>
The controls will appear on the bottom of the video, with standard icons. Unfortunately, the video controls are also not customizable. If you want them at the top, you will have to create your own custom interface.
Information from http://www.w3.org/TR/2008/WD-html5-20080122/#controls
According to this Chrome bug, the media controls are accessible from Javascript. Unfortunately, access seems to be browser specific.
https://bugs.webkit.org/show_bug.cgi?id=86769
Hopefully, these controls will be made accessible via standard methods. I don't want to write my own or use 3rd party media controls when they're already in every HTML5 compliant browser and are being visually manipulated.
I want to create a html5 page with video and an image overlay - meaning some image that is showing over the video. This overlay will in time also be text in some cases. Is there any good way to achieve this?
What I've been trying this far is to use a <video> tag to hold the video, and draw the image into a canvas, which I place on top of the video. To show it I need to move the video back setting z-index to -1, but then the video controls won't work. Maybe there's a solution to make the controls work again, but I'm not sure if I'm on the right path here.. I am assuming there is a recommended solution to this. Maybe using a canvas which I fill both video and overlay into. Or something completely different?
Note: I edited the question as it originally pointed in the wrong direction regarding what was important here. I'd love to have a solution which makes this work seamlessly in fullscreen and everything, but the focus is: What is the appropriate way to place items on top of video - in html5?
Achieving what you want and have it supported in out-of-the-box fullscreen is problematic. Fullscreen support in html5 video is only optional and in any way not accesible thorugh the API (See discussion here).
Even if you used the built in fullscreen there is no way you could inject content above it unless you are willing to change the video file itself on the server in runtime.
what you can do however (And what I did in a similar case) is to implement your own video controls, run the video tag without the built in controls, and have fun with overlaying as many layers as you want on top of your now out of focus video.
As for fullscreen, you can implement some sort of custom background fullscreen similar to what's been done here
edit: The problem you're having by placing a canvas over the video is blocking the built in html video controls. My suggestion is to implement your own video controls (play, pause, volume, seeker, etc.) using html and javascript calling the video API. You can probably even make it prettier then the ugly built in controls.
Your controls can be contained in a layer above the overlaid canvas, and thus the video will be shown, above it the overlay and above it your control set.
You can read a little about implementing your own controls here or here
And anyway this can easily be much better than this.
I'm trying to write a simple audio player for a website, and am using the EMBED... tag to embed the audio and setting HIDDEN="true" and using various javascript commands to control the audio playback. It works fine for realplayer and mplayer but the quicktime plugin doesn't respond to javascript if the hidden bit is set - is there any workaround for this?
First, i suggest you to use the object html tag which is standardized, embed is not.
Then you could simply hide your embeded audio using CSS instead of this hidden param.
Even better, you should hide it using CSS through JavaScript, because if you do it this way, people who don't have JavaScript enabled but support CSS are able use the plugin player directly.
I found that setting height=0 width=0 worked the same as hidden=true and solved the problem
Actually, the Quicktime plugin requires that at least a 12px squared area be shown, otherwise it will not load, and the JavaScript API will not be exposed. The area detection is done at short intervals, and if the visible area is ever reduced, the playback is stopped immediately. The plugin is extremely good at determining if it can actually be seen, you can't event cover it with other elements.