HTML5视频播放器与控件+悬停播放

我想在我的网站上使用Bootstrap + HTML5视频播放器。这是我得到的：

<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/

我想实现：

视频应填满整个容器(100%宽度+自动高度(，
默认情况下，它应该停止;仅在悬停时播放
我想使用简单的控件：播放(单击全屏观看视频后(和重播(在容器中从头开始播放(。

我怎样才能做到这一点？

我已经为此工作了一段时间。这就是结果。

我已经使用了JS事件处理程序，视频元素属性和方法以及CSS元素的百分比大小规范。

请注意，目前不支持在按下自定义按钮时启动全屏。

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>

相关内容

最新更新

热门标签：