随着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. c# datarow[] 转换成 datatable， List<T> 转datatable

      c# datarow[] 转换成 datatable, List<T> 转datatable DdataRow[]转成Datatable private DataTable ToDat ...

  2. MySQL 数据库--索引原理与慢查询优化

    索引的原理 本质都是:通过不断地缩小想要获取数据的范围来筛选出最终想要的结果,同时把随机的事件变成顺序的事件,也就是说,有了这种索引机制,我们可以总是用同一种查找方式来锁定数据. 索引的数据结构 b+ ...

  3. cmd命令提示符大全（干货）

    cmd是command的缩写.即命令提示符(CMD),是在OS / 2 , Windows CE与Windows NT平台为基础的操作系统(包括Windows 2000和XP中, Vista中,和Se ...

  4. C# 表达式树 创建、生成、使用、lambda转成表达式树~表达式树的知识详解

    笔者最近学了表达式树这一部分内容,为了加深理解,写文章巩固知识,如有错误,请评论指出~ 表达式树的概念 表达式树的创建有 Lambda法 和 组装法. 学习表达式树需要 委托.Lambda.Func& ...

  5. [BZOJ 1124][POI 2008] 枪战 Maf

    1124: [POI2008]枪战Maf Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 659  Solved: 259[Submit][Status ...

  6. Vim 编辑器及其基本操作

    实验楼某些课程有用 Vim 编辑器来写代码,因此有了这篇博客,据说是上古神器,当然主要目的是基本操作. Vim 编辑器 Vim(Vi IMprove) 是 Linux 系统上的最著名的文本/代码编辑器 ...

  7. fzu_oop_east 第一次作业

    第一题 题目: 代码: #include<iostream> #include<cstdio> using namespace std; class Date { public ...

  8. 5、Python，enumerate用法

    1.enumerate()是python的内置函数 2.对于一个可迭代(iterable)/可遍历的对象(如列表,字符串),enumerate将其组成一个索引序列,利用它可以同时获得索引和值 3.多用 ...

  9. linux服务器nginx的卸载和安装

    刚接触的linux服务器上,nginx配置乱的有点令人发指,就把老的卸载了重新装一下. 卸载 linux有一系列的软件管理器,比如常见的linux下的yum.Ubuntu下的apt-get等等.通过这 ...

  10. centos 7.0 查看selinux状态|关闭|开启

    Linux在安装好之后通常SELinux都是出于默认开启的状态,开启的情况下会导致一些服务的安装不成功. 在不需要的情况下完全可以关闭掉,下面是在centos 7.0里面如何查看,关闭selinux. ...