鼠标移入视频播放,鼠标移出播放停止,恢复到原来状态
生活随笔
收集整理的這篇文章主要介紹了
鼠标移入视频播放,鼠标移出播放停止,恢复到原来状态
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>鼠標移入視頻播放,鼠標移出播放停止,恢復到原來狀態</title><link rel="shortcut icon" href="http://files.cnblogs.com/files/heyiming/logo.ico" /><style>*{margin: 0;padding: 0;}.video{width: 200px;height: auto;margin: 0 auto;}#video{width: 200px;height: auto;}</style>
</head>
<body><div class="video"><div class="img" onmouseover="come()"><img src="demo.png" alt=""/></div><a href="此處填寫你想要跳轉的地址"><video id="video" style="display: none" src="videos/demo.mp4" autoplay="autoplay" onmouseout="go()" ></video></a></div>
</body>
</html>
<script src="http://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script>
<script>myVid=document.getElementById("video");myVid.muted=true;function come() {$("#video").show();$(".img").hide();$("#video").load();//執行一次加載一次,從頭開始播放
}function go() {$(".img").show();$("#video").hide();}
</script>
?
轉載于:https://www.cnblogs.com/heyiming/p/6418514.html
總結
以上是生活随笔為你收集整理的鼠标移入视频播放,鼠标移出播放停止,恢复到原来状态的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 为什么要用webUI?
- 下一篇: Leetcode--3Sum