CODEWITHSUNDEEP
csshtmlhtml5-video
Paweł Skaba
Paweł Skaba

Reputation: 681

HTML5 video player with controls + play on hover

I would like to use Bootstrap + HTML5 video player on my website. Here is what I've got:

<div align="center" class="embed-responsive embed-responsive-16by9">
    <div class="instruction">
    <p>
    click play to launch fullscreen. click replay to watch in the container from the beginning.
    </p>
    <button href="#" id="play">
    Play
    </button>
    <button href="#" id="replay">
    Replay
    </button>
    </div>
    <video autoplay loop class="embed-responsive-item">
        <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
    </video>
</div>

.instruction {
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  text-align:center;
  position:absolute;
  z-index:99;
  color:#fff;
  top:50%;
}

http://jsfiddle.net/pw7yzLfg/1/

WHat I would like to achieve:

How can I achieve that?

Upvotes: 0

Views: 2283

Answers (1)

varun
varun

Reputation: 2117

I worked on it for some time now. This is the result.

I have used JS event handlers, video element attributes and methods along with percentage size specification for CSS elements.

Note that launching full-screen on pressing a custom button is currently not supported.

var video=document.getElementById('robot_video')
			
function play(event){
	video.play();
}

function replay(event){
	video.currentTime=0;
}
html,body{
	padding: 0;
	margin: 0;
}

html,body,#video_container{
	width:100%;
	height: 100%;
}

video{
	width: 100%;
	height: 100%;
}

.instruction{
	width:100%;
	margin:0;
	padding:0;
	text-align: center;
	position:absolute;
	z-index:99;
	color:#fff;
	bottom: 10%;
}
<html>
	<head>
	  <title>Video</title>	
	</head>
	<body>
		<div align="center" id="video_container" class="embed-responsive embed-responsive-16by9">
			<div class="instruction">
				<p>
					click play to launch fullscreen. click replay to watch in the container from the beginning.
				</p>
				<button href="#" id="play" onclick="play(event);">
					Play
				</button>
				<button href="#" id="replay" onclick="replay(event);">
					Replay
				</button>
			</div>
			<video controls id="robot_video" class="embed-responsive-item" onmouseover="play(event);">
				<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
			</video>
		</div>
	</body>
</html>

Upvotes: 1

Related Questions