带控件的HTML5视频播放器+悬停播放
带控件的HTML5视频播放器+悬停播放
提问于 2017-07-25 01:15:08
我想在我的网站上使用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/
WHat我希望实现以下目标：
- 视频应该填满整个容器(100%宽度+自动高度)，
- 默认情况下应该停止；仅在悬停时播放
- 我想使用简单的控制:播放(单击全屏观看视频后)和重放(从头开始播放容器)。
我怎样才能做到这一点呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-25 02:02:43
我已经研究了一段时间了。这就是结果。
我使用了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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45286411
复制相关文章
相似问题
腾讯云开发者
