帶有控件的HTML5視頻播放器+懸停播放

Question

我想在我的網站上使用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％寬度+自動高度），
默認情況下，它應該停止； 僅在懸停時播放
我想使用簡單的控件：播放（單擊全屏觀看視頻后）和重播（從容器的開頭開始播放）。

我該如何實現？

Answer 1

我花了一段時間了。 這就是結果。

我使用了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>

帶有控件的HTML5視頻播放器+懸停播放

問題描述

1 個解決方案

解決方案1
1 已采納 2017-07-24 18:02:42

帶有控件的HTML5視頻播放器+懸停播放

問題描述

1 個解決方案

解決方案1 1 已采納 2017-07-24 18:02:42

解決方案1
1 已采納 2017-07-24 18:02:42