帶控件的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視頻播放器+懸停播放

回答

相關問題