带控件的HTML5视频播放器+悬停播放

我想在我的网站上使用bootstrap + html5视频播放器。这里是我已经有了：带控件的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％宽度+自动高度）， - 默认情况下应停止;只在悬停时玩游戏 - 我想使用简单的控制：玩（在点击全屏观看视频后）和重放（从容器开始播放）。

我该如何做到这一点？我已经挖掘了整个论坛，但没有成功..

来源

2017-07-24 Paweł Skaba

我在此工作了一段时间。这是结果。

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

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

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

 
function replay(event){ 
 
\t video.currentTime=0; 
 
}

html,body{ 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

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

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

 
.instruction{ 
 
\t width:100%; 
 
\t margin:0; 
 
\t padding:0; 
 
\t text-align: center; 
 
\t position:absolute; 
 
\t z-index:99; 
 
\t color:#fff; 
 
\t bottom: 10%; 
 
}

<html> 
 
\t <head> 
 
\t <title>Video</title> \t 
 
\t </head> 
 
\t <body> 
 
\t \t <div align="center" id="video_container" class="embed-responsive embed-responsive-16by9"> 
 
\t \t \t <div class="instruction"> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t click play to launch fullscreen. click replay to watch in the container from the beginning. 
 
\t \t \t \t </p> 
 
\t \t \t \t <button href="#" id="play" onclick="play(event);"> 
 
\t \t \t \t \t Play 
 
\t \t \t \t </button> 
 
\t \t \t \t <button href="#" id="replay" onclick="replay(event);"> 
 
\t \t \t \t \t Replay 
 
\t \t \t \t </button> 
 
\t \t \t </div> 
 
\t \t \t <video controls id="robot_video" class="embed-responsive-item" onmouseover="play(event);"> 
 
\t \t \t \t <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> 
 
\t \t \t </video> 
 
\t \t </div> 
 
\t </body> 
 
</html>

来源

2017-07-24 18:02:42 varun

带控件的HTML5视频播放器+悬停播放

回答

相关问题