标签：pre lan jquery lin mouseover logo oct set com
<!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>
标签：pre lan jquery lin mouseover logo oct set com
原文地址：http://www.cnblogs.com/heyiming/p/6418514.html
