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.
Related
I have videos on my website that are taking very long to load.
I don't think it is my webhost since it also happens on localhost.
Each time there is only 1 video shown to the user, depending which category they chose. (So it is not loading each video always).
The videos that take longer to load are the bigger ones (the biggest one is about 351MB video file)
This is my html code for the video:
<div class='video'><h2>$vidTitle</h2><video width='640' height='360' controls preload='metadata'><source src='$viddir' type='video/mp4'></video></div>
I've also read that it could be that the video indexing could be at the end, could this be the case?
What can I do about this, do I need to use another player thann the default html5 player (I tried this but it didn't really help) | do I need to use a cdn?
How can I solve this?
Thanks!
My understanding is that the preload='metadata' attribute in your video element is supposed to prevent the video from loading.
You could try preload='none' to test. I know that works.
As always, a good place to check is MDN web docs:
mdn web docs : The Video Embed element
Based on my reading of this article on Google's developers' site, and my memory of how my site used to work, it seems like lazy loading has become the new default. That's cool! However, I'm running a site that people use to browse a media library, and lazy loading adds a bit of visual jank, so I'd like to disable it in this case.
I understand that I can add loading="eager" as an attribute of the img tag, however, the way my site works is i display a grid of 60x video elements and use the poster attribute to display an image until the user hovers over and then a super-low-res video preview plays.
loading="eager" doesn't seem to work for the posters of video elements. What should I do?
Here's my codeblock:
<video loading="eager" class="hoverToPlay" muted loop
preload="none" src="../media/?clip=1297&q=q"
poster="../media/?clip=1297&q=t"></video>
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 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.