如何在鼠標輸入/輸出中播放/暫停視頻？

-4

我想請你想象一下你面前的書桌上有一本書。該書已關閉。現在，你伸出你的手，抓住書的封面，稍微打開書，然後關閉，就像在你抓住封面之前一樣。如何在鼠標輸入/輸出中播放/暫停視頻？

這就是我想爲我的網站製作的動畫。我想拍攝一個簡短的視頻 - 就像所描述的那樣 - 在After Effects中進行編輯（刪除視頻中的背景，以便只有圖書可見），並以某種格式保存。

然後，我想在我的網站上添加視頻/動畫作爲介紹，您可以點擊進入網站，我想如果鼠標懸停播放動畫（本書正在打開）在鼠標外面（書正在關閉）。或者如果不可能實現這種效果（反向動畫？），我可以跳過「鼠標移出」部分。

我的問題是你將如何執行它？我可以想象的最簡單的方法是將動畫保存爲* webm，製作具有視頻背景的div，並在懸停時播放視頻。實際上，「該書」的動畫不會被用作網站的背景，但它應該扮演一個位於網站中間的圖像的角色，您可以點擊打開其餘的內容。我只是覺得靜態圖像對於我想製作的網站是不夠的，所以我真的想要一個動畫而不是一個圖像。

動畫將會非常短暫：只需幾秒鐘就可以在鼠標上打開該書（並在可能的情況下關閉鼠標）。

你會如何執行這個想法？這是一個普遍的問題，但我想聽聽你的想法，然後我會自己google怎麼執行特定的想法。我只是不知道如何繞過這個想法來達到最佳效果。

（我寧願拍書比作一個flash動畫等，因爲我對角色的完美的書的視頻 - 這是真的顯著顯示此特定的書）如果你要玩

來源

2015-10-19 user3390083

對於CSS看看[這裏]（http://stackoverflow.com/questions/控制動畫的播放狀態32825156 /轉換暫停的動畫播放狀態到磨合上點擊的-A-LINK/32825335＃32825335）。對於這個問題，嘗試自由職業者。這個過於寬泛。 – Harry

*這是一個普遍的問題，但我想聽聽你的想法，然後我會google如何自己執行特定的想法。* - Stack Overflow作爲問答網站，並不意味着這些類型的問題，只是投票的想法。請參閱[我應避免詢問哪些類型的問題？]（http://stackoverflow.com/help/dont-ask） – BSMP

當鼠標懸停在視頻上時的視頻，您應該聽取mouseenter事件。當鼠標離開視頻元素時，請聽取mouseout事件。

JavaScript中的一個解決方案是使用addEventListener創建事件偵聽器。

var video = document.getElementsByTagName("video")[0]; 

video.addEventListener("mouseenter", function() { 
    video.play(); 
}).addEventListener("mouseout", function() { 
    video.pause(); 
});

這裏是一個jQuery的解決方案

$("video").on("mouseenter", function() { 
    $(this).play(); 
}).on("mouseout", function() { 
    $(this).pause(); 
});

來源：http://www.w3schools.com/tags/ref_av_dom.asp

來源

2015-10-19 15:20:08

如何在鼠標輸入/輸出中播放/暫停視頻？

回答

相關問題