懸停時自動播放html視頻？

我在互聯網上搜索，發現了一些很好的例子，但由於某種原因，當我試圖用我的代碼實現它們，它不工作。我不知道我好像做錯了什麼。懸停時自動播放html視頻？

（對於荷蘭的班級名稱我很抱歉，希望它不是太混亂）。對不起，如果我對此非常愚蠢。

HTML：

<div class="drievijfde-wrapper portfolio-wrapper"> 
    <div class="single-item singlevidjs drievijfde-padding" style="background-image:url(img/work-placeholder.png); background-position: center center; background-size: cover;"> 
     <video loop preload="auto" id="portfolio-vid"> 
      <source src="video/test reel_1.mp4" type="video/mp4"> 
     </video> 
     <a href="#"> 
      <div class="metadata"> 
       Interior Lamps 
      </div> 
     </a> 
    </div> 
</div>

JS：

var figure = $(".singlevidjs").hover(hoverVideo, hideVideo); 

function hoverVideo(e) { 
    $('video', this).get(0).play(); 
} 

function hideVideo(e) { 
    $('video', this).get(0).pause(); 
}

來源

2017-04-03 tehchriis

首先是jQuery代碼，描述問題時，請更詳細一點：我的代碼不工作，將幫助任何人;）無論如何，這裏是一個工作jsbin： http://jsbin.com/cupusesoce/edit?html,js輸出所以問題一定是：jQuery沒有加載或與您的視頻的問題:) – MarcelD

它工作[這裏]（https：// jsfiddle .net/8r396y6u /）檢查你的'jquery'加入？ –

是的！我把Jquery搞亂了，現在我覺得很糟糕。謝謝你指出。還有是@DincaAdrian當我做到這一點時，我c然心動，但它只是用於測試。謝謝 – tehchriis

您可以使用下面這個

$('#portfolio-vid').mouseover(function(){ 
    $(this).get(0).play(); 
}).mouseout(function(){ 
    $(this).get(0).pause(); 
})

來源

2017-04-03 10:59:14

懸停時自動播放html視頻？

回答

相關問題