always show video controls

Hello:

How do I always show the video controls on a HTML 5 Video Player? The only time they show is when the mouse hovers over the screen.

	<div id="video-container">
		<!-- Video -->
		<video id="video" width="640" height="365" poster="images/logo.png">
		  <source src="demo.mp4"  type="video/mp4">
		</video>
		<!-- Video Controls -->
		<div id="video-controls">
			<button type="button" id="play-pause" class="play">Play</button>
			<input type="range" id="seek-bar" value="0">
			<button type="button" id="mute">Mute</button>
			<input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
			<button type="button" id="full-screen">Full-Screen</button>
		</div>
	</div>

Open in new window

LVL 1
RecipeDanAsked:
Who is Participating?
 
GeoffSuttonConnect With a Mentor Commented:
Set a mouseover event on the video element, then using that set the  control element css visible to 'visible'
0
 
COBOLdinosaurCommented:
We will need a link to the page to do a diagnostic.

Cd&
0
 
RecipeDanAuthor Commented:
It is not pubic yet. I am creating it on my laptop.
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
GeoffSuttonCommented:
<video controls="true" will give you the default controls all the time, if that is what you need.  

According to the documentation, you can use control id "<<video-id>>-video-controls.  So rather than using the id "video-controls" on your controls div, try using "video-video-controls"

See http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/ for full information on building custom video player.
0
 
RecipeDanAuthor Commented:
@GeoffSutton. Thank you but I am not familiar with JQuery. What I am trying to do is similiar to YouTube Videos where the video controls are always shown.
0
 
GeoffSuttonCommented:
Try just adding the controls parameter to the video tag.  That will give you controls, although not the ones that you want.  Also, reading the page that I sent you, you can see how they used the naming scheme to link the controls to the video element.  I also strongly recommend becoming familiar with jQuery as it dramatically simplifies element manipulation and makes your job as a developer so much simpler :)
0
 
GeoffSuttonCommented:
Here is a great blog showing you how to wire up custom controls.  You have to use javascript, and it contains no jQuery for you.
http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos

HTH,
G
0
 
COBOLdinosaurCommented:
dramatically simplifies element manipulation and makes your job as a developer so much simpler

Actually what jquery does is teach you how to avoid learningcoding and understanding how things work; basically crippling your development unless you are already skilled in classical javascript, and knowledgeable of how client technologies work together.

Cd&
0
 
RecipeDanAuthor Commented:
@GeoffSutton. The link with the example is exactly what I am talking about. When you run the example, the custom control bar appears and disappears when the mouse is hovered over the video. What I want to do is make that custom control bar always visible.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.