鼠标移入视频播放，鼠标移出播放停止，恢复到原来状态

<!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

鼠标移入视频播放，鼠标移出播放停止，恢复到原来状态相关推荐

vue中给元素添加鼠标移入，鼠标移出的效果的事件
在vue 中鼠标移入方法为 v-on:mouseover,鼠标移出方法为 v-on:mouseout 使用方法如以下代码中的写法 <div class="subei1" id ...
web之鼠标悬浮，鼠标移入和鼠标移出、hover、onmouseover、onmouseout、getElementById、mouseenter、mouseleave
目录 1.关键代码 1.1.原生 1.2.vue 2.效果演示 3.完整代码 1.关键代码 1.1.原生鼠标经过(:hover) .rotate_enlarge {border-left: 30px ...
【Vue】滚动条（设置滚动条、滚动条样式、鼠标移入滚动条显示移出滚动条隐藏....）
目录设置滚动条滚动条样式 1.隐藏滚动条 2.常用滚动条的样式的示例滚动条的应用 1.标签页的内容滚动,标签头部固定 2.鼠标移入显示滚动条,鼠标移出隐藏滚动条 3.实现导航栏鼠标上滑显示下滑隐 ...
Vue 表格循环滚动，鼠标移入暂停，移出继续滚动
简单例子: <template> 中的代码: <div id="chart"ref="chart"class="table-body ...
php鼠标已入移除,angularjs鼠标移入移出实现显示隐藏
操作主要是ng-mouseenter和ng-mouseleave配合使用,同时注意$parent实现动态拼接变量截图如下: CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部 ...
html5鼠标经过图片切换,JS实现鼠标移入移出控制图片的切换效果
在看专业英语的时候,学习JS的Timer Event.正好有一个例子,实现的是,图片自动切换,当鼠标点击图片的时候,停止切换.于是想要动手实践一下,并且添加上自己的想法.于是就有了下面的图片和代码. ...
vue的鼠标移入和移出
vue的鼠标移入和移出需求(鼠标到预约二维码显示,预约添加背景色) 实现  <ul class="person_list"> / ...
JavaScript事件委托之鼠标移入移出事件
鼠标移入移出事件 <div class="parent">父元素<div class="child">子元素</div>&l ...
swiper轮播图鼠标移入暂停有延时的问题
鼠标移入三个swiper同时停止,鼠标离开三个swiper同时开始没有解释,直接使用吧 //鼠标移入事件stop(){this.stopSwiper(0);this.stopSwiper(1);th ...

鼠标移入视频播放，鼠标移出播放停止，恢复到原来状态

鼠标移入视频播放，鼠标移出播放停止，恢复到原来状态相关推荐

最新文章

热门文章