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.
Related
I'm looking for a way to make it so that even if a site tries to "hide" the video controls for a video, I want to override this and have the controls.
There's little more frustrating than wanting to get to the point of a video and having to sit through 15+min of BS/Advertising to get the 60seconds of content you care about.
I see many posts asking how to hide these controls, so playing devils advocate, how do I override this and make it always visible? Addin for browser? HTML code insertion? How about on mobile?
I have a webapp written in HTML5.
The Home page contains a <video> tag.
The video is correctly played when I load the page for the first time, and if I use controls (pause, play, fullscreen) too.
In order to maintain the webapp always in the fullscreen view, I used only one html page, and when a button (or an anchor) is clicked, I hide the container div (representing the content of the logical "home page"), and show the selected one, when the "home" button is played I show again the original container div.
Originally, the video continued playing when I clicked a button to pass to another virtual page, so I pause it by jquery.
The problem is: only on iPad, when I come back to the first container (that means the home page), the video is no more available, I can't see the poster and the video itself, and the div is black screen.
Some notes I hope could restrict the problem:
The video is statically loaded in a <video> tag and source
attribute.
I've tried to start with an empty src and load it by
jQuery (as explained in many tutorials and in stackoverflow too), it's the same.
The same if I try to create a playlist in
which I select different videos and load the selected one in the
<video> tag using Javascript.
I also tried to reload the page with jQuery, but doesn't work.
The constant beahviours are the following:
Every technique I tried to implement is working well on PC with
Firefox and on the Mac with Safari.
The problem on the iPad appears only when I try to come back to the initial page.
I'm not convinced the problem depends on the technique of show/hide I used, but on the iPad behaviour. I've read some other ways to maintain the webapp in fullscreen view, but apply only to <a> tags (such as this:), I need div stylized as buttons (and managed in jQuery) too.
Thanks if someone can help
I think if you use flowplayer is better it is good implementaton that it work on IPhone and Andriod, it is free.
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 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.
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.