随着HTML5的广泛应用，在一些网站中，经常看到有些预览的短视频预览，鼠标经过就会播放，移除就会停止播放，再次移进去就会继续播放。

自己也研究着做一个比较简单的类似的练习。

视频可以自己到包图网下载，包图网的媒体首页视频预览就是鼠标移进去就播放，离开就停止，再移进去就播放。

不过，他们在视频上，还增加了一直视频的图片，思路是，鼠标经过，图片隐藏，视频播放，鼠标离开，图片显示，视频停止。

其理论都是相同的。

附上练习代码

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>视频播放</title>

     </head>

     <body>

         <!--video视频标签，给上宽高-->

         <video id="video" onmouseover="videoPlayback()" onmouseout="videoStopped()" width="340px" height="190px">

             <!--视频类型为视频和视频路径-->

             <source type="audio/mp4" src="video/10s.mp4"></source>

         </video>

     </body>

     <script>

         //鼠标移进去

         function videoPlayback(){

             //获取视频标签

             var video = document.getElementById('video');

             //给视频标签添加缓存播放---video标签属性。

             video.setAttribute("autoplay","autoplay")

             //给视频标签添加循环播放---video标签属性。

             video.setAttribute("loop","loop")

             //播放视频

             video.play();

         }

         //鼠标离开

         function videoStopped(){

             //获取视频标签

             var oDiv = document.getElementById('video');

             //停止播放

             video.pause();

         }

     </script>

 </html>

视频格式与浏览器的支持（截图）：

视频格式（截图）：

可选属性（截图）：

附上runoob.com的文档连接一：http://www.runoob.com/html/html5-video.html

附上runoob.com的文档连接二：http://www.runoob.com/tags/tag-video.html

未经允许，禁止转载，抄袭，如需借鉴参考等，请附上该文章连接。

HTML5视频播放练习：鼠标经过视频播放，鼠标移除停止播放，再次经过继续播放。的更多相关文章

  1. HTML5+CSS3+JQuery打造自定义视频播放器

    来源:http://www.html5china.com/HTML5features/video/201109206_1994.html 简介HTML5的<video>标签已经被目前大多数 ...

  2. [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

    有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...

  3. c#全局鼠标事件以及鼠标事件模拟

    最近在编写Max插件时,其主容器FlowLayoutPanel由于隐藏了滚动条,要实现按住鼠标中键上下拖动的功能,因此尝试了全局鼠标事件.以及鼠标勾子,可惜由于Max不争气?都未能实现,于是代码报废, ...

  4. 模拟在table中移动鼠标，高亮显示鼠标所在行

    在项目中有这样一个需求,在table中移动鼠标时,鼠标所在行高亮显示,其他行正常显示,为此做了一个模拟. 具体代码如下: <!DOCTYPE html> <html xmlns=&q ...

  5. 鼠标滑轮一滚动Excel就停止工作

    鼠标滑轮一滚动Excel就停止工作 问题签名: 问题事件名称:APPCRASH 应用程序名:EXCEL.EXE 应用程序版本:15.0.4420.1017 应用程序时间戳:50673286 故障模块名 ...

  6. WPF，强制捕获鼠标事件，鼠标移出控件外依然可以执行强制捕获的鼠标事件

    在WPF中,只有鼠标位置在某个控件上的时候才会触发该控件的鼠标事件.例如,有两个控件都注册了MouseDown和MouseUp事件,在控件1上按下鼠标,不要放开,移动到控件2上再放开.在这个过程中,控 ...

  7. NGUI中 鼠标划出屏幕后，停止对 UIDragScrollView 的 press

    using UnityEngine; /// <summary> /// NGUI中 鼠标划出屏幕后,停止对 UIDragScrollView 的 press /// </summa ...

  8. 用VBS控制鼠标（获取鼠标坐标、鼠标移动、鼠标单击、鼠标双击、鼠标右击）

    Demon's Blog 忘记了,喜欢一个人的感觉 Demon's Blog  »  程序设计  »  用VBS控制鼠标(获取鼠标坐标.鼠标移动.鼠标单击.鼠标双击.鼠标右击) « bbPress积分 ...

  9. Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 本地调试接口返回信息不对 以及 jar冲突问题

    今天下午在本地调试的时候碰到个很奇怪的问题:服务调用接口,返回的明明是有数据的,然后通过gson转换对象后,对象里面并没有自己想要的数据.看了代码什么的都没有问题.思考到底是哪里出了问题,想了半天想到 ...

  2. 在notepad++中快速插入当前时间方法

    插件是notepad++的一大优势,而要实现此功能,也必须借助TextFX插件. 1.点击"插件"-->"Plugin Manager"-->&qu ...

  3. 避免jar依赖冲突的一种办法

    java中的依赖冲突问题一直比较头疼,特别是做公用包给其他系统用的时候,现在都不敢引入太多的依赖,基本上每次都要帮别人解决依赖冲突的问题,非常麻烦. 特别是碰到一些老系统还不是用maven管理的,人家 ...

  4. libcrypto.so.10内容丢失导致sshd无法运行

    今天启动虚拟机,ssh服务起不来,提示如下: Starting sshd: /usr/sbin/sshd: error while loading shared libraries: libcrypt ...

  5. .net core系列之《新一代的配置系统Configuration在支持多数据源，热更新，层级化方面代码快速实践》

    在我们之前.Net Framework的项目中,配置文件是WebConfig或AppcConfig文件,而当我们想要添加我们自定义的节点时,还需要在这个文件中的section中定义我们自定义的节点,这 ...

  6. fiddler抓包出现Tunnel to

    在抓包的时候,有时候会遇到很多的tunnel to,图标是一把锁的形状,如下图: connect是为了建立http tunnel,connect是http众多方法中的其中一种,它跟post.get.p ...

  7. 自动化测试基础篇--Selenium unittest简介

    一.什么是unittest unittest是Python单元测试框架,类似于JUnit框架. unittest中有4个重要的概念:test fixture, test case, test suit ...

  8. C# winform中 窗体缩放自适应的方法（不同电脑/不同分辨率）

    C# winform中 窗体缩放自适应的方法(不同电脑/不同分辨率)   窗体缩放是一个困扰我多时的问题,为了解决这个问题,我从网上找了很多相关的资料,很多人说用Anchor和Dock属性,但是我试了 ...

  9. Zip压缩/解压缩（文件夹）

    #PS2.0压缩为.zip文件: $zip = "D:\audit_log\test.zip"New-Item $zip -ItemType file$shellApplicati ...

  10. Java并发基础（上）——Thread

    并发编程可以使我们将程序划分为多个分离的,独立运行的任务.通过多线程机制,这些独立任务都将由执行线程来驱动.在使用线程时,CPU将轮流给每个任务分配占用时间,每个任务都觉得自己在占用CPU,但实际上C ...