視頻播放懸停的圖像

我想播放視頻時，有人在圖像上懸停，如果他們點擊它的流行應該顯示播放該視頻到目前爲止我已經實現了彈出和顯示視頻onclick，但我想實現這個懸停事情視頻播放懸停的圖像

HTML

<div class="row"> 
    <div class="col-md-3"> 
     <img src="resources/image.jpg" data-src="https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick="showVideo(this)"/> 
    </div> 
    <div class="col-md-3"> 
     <img src="resources/image.jpg" data-src="https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick="showVideo(this)"/> 
    </div> 
    <div class="col-md-3"> 
    < img src="resources/image.jpg" data-src="https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick="showVideo(this)"/> 
    </div> 
</div>

function showVideo(obj){ 
    $("#youtube").attr("src", $(obj).data("src")); 
    $("#videoModal").on("hide.bs.modal", function() { 
     $("#youtube").removeAttr("src"); 
    }).modal('show'); 
}

一些更多的HTML

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel"> 
    <div class="modal-dialog modal-lg" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="videoModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <iframe id="youtube" width="100%" height="500px"> 
</iframe> 
     </div> 
    </div> 
    </div> 
</div>

來源

2016-07-28 Raul

我只是想發表評論，那是我想你實際上要的是從視頻剪輯的幻燈片放映開始懸停，然後點擊視頻播放。如果這是正確的玩家，如jwplayer和其他人已經處理了 –

沒有它像我的網頁上的12個視頻，但他們都有圖像，所以如果有人採取行動，並移動到該特定圖像視頻應該開始，而不是圖像，如果他們懸停到其他圖像上一個應該暫停，如果他們點擊它，然後彈出視頻播放 – Raul

您可以使用jQuery的懸停功能和自己的函數來播放視頻：

$('#element').hover(function() { 
    showVideo(); 
});

來源

2016-07-28 20:30:54

試過這個它不起作用：'（ – Raul

只有警報工作的.hover（閱讀：懸停不工作，或它是不工作的showvideo）也許你使用錯誤的元素？ –

警報作品，如果我抓住元素#youtube，但我無法弄清楚哪些元素要抓住，請你幫我搞清楚這一點??我試圖抓住img標籤我分配了一個id給img標籤，但是然後警報不起作用 – Raul

視頻播放懸停的圖像

回答

相關問題