随着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#.NET初识

    1..NET平台特点 1)支持多种编程语言(C#.VB.F#.JavaScript.C++/CLI)-托管语言,此外还有Smaltalk.Ruby.Python.COBOL和Pascal的.NET编译 ...

  2. [翻译] ASCScreenBrightnessDetector

    ASCScreenBrightnessDetector ASCScreenBrightnessDetector lets you easily detect screen brightness cha ...

  3. Centos7 下编译 Openjdk8

    本文主要介绍如何在 Centos7 下编译 Openjdk8 源码,<深入理解java虚拟机>第二版网上好多 openjdk7 的帖子,编译 jdk8 和 7 还是有些差别的,比如大家经常 ...

  4. jq实现鼠标经过出现上拉菜单

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

  5. vue实现点击目标元素外页面的其他地方隐藏弹窗。

    方法: 步骤1:给页面最外出的元素div加点击事件:@click=“popShow = false”. 步骤2:给点击目标元素加点击事件:@click=“popShow = true”. 备注:pop ...

  6. [TJOI2018]智力竞赛

    题目 发现我们需要最大化最小值,基本是二分了 那么我们二分出来一个值我们将小于等于这个值的都删去,现在的问题变成了如何用\(n+1\)条路径覆盖这张图 这不最小路径覆盖吗 于是我就忘了最小路径覆盖怎么 ...

  7. 随手练——LintCode 433 - 小岛数量

    LintCode 433: https://www.lintcode.com/problem/number-of-islands/description LintCode 434: https://w ...

  8. C/C++——指针，引用做函数形参

    函数中的形参是普通形参的时,函数只是操纵的实参的副本,而无法去修改实参. 引用形参是对实参的直接操纵,指针形参是对 它所指向的值(*p) 的直接操纵,但是对于这个指针变量(p)来说,依然只是副本. 指 ...

  9. Js 中的 this

    Js 中 this 的理解   this 是啥 ? this是 JavaScript 语言的一个关键字,它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用; 随着函数使用场合的不同,this ...

  10. Scrum培训小体会

    公司组织Scrum培训. 虽然是针对ScrumMaster这个角色的培训,但更多是基于对Scrum这个敏捷开发实践方法的了解. 回来也有一些感想,记录下来.以后在工作实践中,继续探索.实践.体验.感悟 ...