随着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. centos下安装ipython(minglnghang命令行)

    下载文件 wget https://bootstrap.pypa.io/get-pip.py --no-check-certificate 执行安装 python get-pip.py 这就安装好了 ...

  2. java 策略模式

    <Head First 设计模式>学习中  设计原则 找出应用中可能需要变化之处,把它们独立出来,不要和那些不需要变化的代码混在一起 针对接口编程,而不是针对实现编程 多用组合少用继承   ...

  3. EF6 code first 新建项目注意问题

    1.一开始就建立自动迁移模式 打开Package Manager Console,确保Package source是nuget.org 命令行输入: enable-migrations 然后第一次运行 ...

  4. Ionic开发项目

    hybrid app是移动开发代替原生开发完成app应用项目的一种方案,Ionic是hybrid app开发的一种选择.对ionic有兴趣可以去网上找相应的基础知识来学习了解,因为Ionic是基于An ...

  5. resin下发布项目报错java.lang.NoSuchMethodError: javax.persistence.Table.indexes()[Ljavax/persistence/Index

    我的resin版本为4.0.56; 项目在tomcat下启动正常,打包在resin下发布时报错:java.lang.NoSuchMethodError: javax.persistence.Table ...

  6. Hibernate学习---QBC_hibernate完整用法

    QBC(Query By Criteria) API提供了检索对象的另一种方式,它主要有Criteria接口.Criterion接口和Expresson类组成,它支持在运行时动态生成查询语句. Hib ...

  7. miniblast_hash算法c语言实现

    对于一组基因文件中的基因序列,选取一段基因片段,作为索引,利用hash表,查找固定的基因片段.有一定的并且容忍错误. 简单讲就是自己实现一个hashtable,将选出特定字符串建立索引,便于查询.输出 ...

  8. java继承-重写-super实例补充

    方法重写: 是指子类根据需要父类继承来的方法进行改写,是多态机制的前奏. 重写注意点: 1.重写方法必须和被重写方法具有相同的方法名,参数列表和返回值. 2.重写方法方法不能使用比被重写方法更严格的访 ...

  9. GTK+开发环境搭建

    GTK+开发环境搭建 "工欲善其事,必先利其器"首先介绍一下GTK+开发环境的搭建,网上很多所谓的GTK的开发环境的搭建基本都是抄来抄去,也不知道有没有人使用他们介绍的方法搭建并编 ...

  10. SoapUI这么好，舍得不用吗？

    之前尝试去学习哈SoapUI, 安装都报错,直接拖黑不用,对java开发的产品本身不感冒 后来工作上,和老外沟通,发现他们不会用xmlspy,只会SoapUI,心里都想,不学习看来不方便,然后都安装了 ...