I am trying to produce a video player with buttons to fast forward, rewind, pause and step one frame forward.
I am familiar with the theory of how to make them work using javascript - and have constructed some, admittedly slightly buggy, buttons that are separate from the player and can't be seen when I make it full screen. For clarity I have <button> elements with jquery scripts that sit under the video but aren't attached to it.
Is there a way to inject these buttons into the controls element of the html5 <video> tag so they persist and users can enjoy the use of these buttons while in full screen.
Or as an addendum - does anybody know how to sure up scripts for fastforwarding etc, they don't seem to play very nice with pausing the video - is there a known compatibility issue with javascript and the html5 video player's native pause function from controls, if not it just means my code is probably crap.
As far as I have read the HTML5 video player controls are not directly stylable.
The solutions I found require you to include custom controls and disable the default ones:
http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos
http://mrbool.com/how-to-style-the-html-5-video-element-with-javascript-and-css/27683
I would also argue that completely replacing the default controls would give you greater control and more stability than trying to inject new buttons after load. There is no benefit to using the standard controls, they are plain HTML, CSS and javascript and utilize the same methods you would use to build your own version.
As for fastforward, the video element has a playbackrate attribute that works really well. If you make sure your controls implement the method correctly you shuld be fine.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments