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?
Related
A while ago I stumbled across an example of an HTML5 video player with support video in video. In an example use case, the following was demonstrated: a powerpoint presentation video, with an explainer video to accompany it. Unfortunately I can't remember which video player it was.
To illustrate; something like this
The beauty of the player is that it's able to serve multiple sources of video in one view and toggle between different view points (like split screen and switched view).
Like I have illustrated here:
Split screen video
Switched video view
Could anyone help me find out which HTML5 video player it may have been, or maybe how this could be achieved in something like VideoJS?
It looks from your requirements that these are completely separate videos.
If this is the case then one simple approach is to just have two video players.
You can then use your web page layout to place them wherever you need them to start up, and add some simple Javascript scripts, linked to buttons on the page for example, to change the layout to however you want it for that particular button (e.g. one button might be for split screen).
I am using React and Rails to build a small website with a few different page routes. On the landing page I have included an HTML 5 video, which is muted and autoplays. On this page it works great. However, when I change pages the HTML 5 video continues to play, and is no longer muted (ie. I can hear it playing, but cannot see it). I cannot see the component which contains the video in the DOM.
I think I might need to destroy this component when changing pages, but not exactly sure about the right approach here. Thoughts? Thanks in advance!
Hard to tell without providing any code, but I am guessing you aren't using lifecycle methods within your components.
Consider using componentWillUnmount to destroy/stop the playing video.
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 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 have a website that has a huge background image. I need to put a flash player at the top of the website, and I just realized that each page they click on is a new page, and thus restarts the Flash player. So I would like to put that flash player in an iframe so it will continue to play throughout the user surfing.
But my issue is will the iframe cover the background image and not be underneath? Or will the background image of the page (not iframe) go nicely underneath the iframe and no one will be the wiser of my methods? Any help would be greatly appreciated.
Firstly what you want to do is put your individual pages contents into an iframe (not the flash video) as this is what you want to update. You want the flash to be on the actual parent page so it always remains the same. (or put both in seperate iframes and only update the content iframe).
In regards to your question about the iframes background you can make it transparent so that the background is still visible through it.
To do this set the ALLOWTRANSPARENCY property to true on your iframe e.g.
<iframe width="100%" height="500px" name="content" src="home.html" frameborder=0 allowtransparency="true"></iframe>
And then in the pages which are going to be contained in the iframe set the body's background to be transparent:
<body style="background-color:transparent">
Iframes are bad, and take with them all the shitty stuff about frames (google "why frames are bad" if you want some reading).
What you should be looking at is some AJAX-techniques. JavaScript frameworks like Dojo and jQuery have lots of functionality you could check out. This will enable users to do things like vote, add to favourites or comment while the movie is playing - pretty much like Youtube.
It all depends a little on what you've got running underneath your HTML-pages though. Could you provide some more information about that?