随着html5的广泛应用，在一些网站中，经常看到有些预览的短视频预览，鼠标经过就会播放，移除就会停止播放，再次移进去就会继续播放。
自己也研究着做一个比较简单的类似的练习。
视频可以自己到包图网下载，包图网的媒体首页视频预览就是鼠标移进去就播放，离开就停止，再移进去就播放。
不过，他们在视频上，还增加了一直视频的图片，思路是，鼠标经过，图片隐藏，视频播放，鼠标离开，图片显示，视频停止。
其理论都是相同的。
附上练习代码
1 <!doctype html> 2 <html> 3 <head> 4 <meta chart="utf-8"> 5 <title>视频播放</title> 6 </head> 7 <body> 8 9 <!--video视频标签，给上宽高-->10 <video id="video" onmouover="video乔布斯传读后感playback()" onmouout="videostopped()" width="340px" height="190px">11 <!--视频类型为视频和视频路径-->12 <source type="audio/mp4" src="vi用比例解决问题deo/10s.mp4"></source>13 </video>14 15 </body>16 1学院女生7 <script>18 //鼠标移进去19 function videoplayback(){20 //获取视频标签21 var video = document.getelementbyid('video'); 22 //给视频标签添加缓存播放---video标签属性。23 video.tattribute("autoplay","autoplay")24 //给视频标签添加循环播放---video标签属性。25 video.tattribute("loop","loop")26 //播放视频27 video.play();28 }29 30 //鼠标宋晓波结婚照离开31 function videostopped(){32 //获取视频标签33 var odiv = document.getel小学数学教案ementbyid('video'); 34 //停止播放35 video.pau();36 }37 </script>38 </html>视频格式与浏览器的支持（截图）：
视频格式（截图）：
可选属性（截图）：
附上runoob.com的文档连接一：
附上runoob.com的文档连接二：
未经允许，禁止转载，抄袭，如需借鉴参考等，请附上该文章连接。
本文发布于:2023-04-03 02:26:57，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/3b9699b85a8a194b0b65e40c35f04a00.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：HTML5视频播放练习：鼠标经过视频播放，鼠标移除停止播放，再次经过继续播放。.doc
本文 PDF 下载地址：HTML5视频播放练习：鼠标经过视频播放，鼠标移除停止播放，再次经过继续播放。.pdf
| 留言与评论（共有 0 条评论） |
