随着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. MySQL允许root远程访问

    1. mysql -u root -p;     // 登录mysql, 并输入密码 2. use mysql;             // 打开 mysql 数据库 3. update user ...

  2. Java多线程学习笔记（一）

    一 概述 一个进程只有一个至少会运行一个线程,Java中同样存在这样,在调用main方法的时候,线程又JVM所创建. package link.summer7c.test; public class ...

  3. 关于VSTS自动Build报错问题之Microsoft.Net.Compilers

    报错内容如下: --06T11::.6035712Z ##[error]Dotnet command failed with non-zero exit code on the following p ...

  4. Python实例---简单购物车Demo

    简单购物车Demo # version: python3.2.5 # author: 'FTL1012' # time: 2017/12/7 09:16 product_list = ( ['Java ...

  5. laravel controller重写

    <?php namespace Boss\Http\Controllers; use Illuminate\Foundation\Bus\DispatchesJobs; use Illumina ...

  6. 初始python（三）

    1. 循环 if, while, forbreak : 结束整个循环continue :跳出当前这次循环,但不结束整个循环else :结束整个循环后才执行,不能与break合用,但可以与continu ...

  7. [EffectiveC++]item02：尽量以const,enum,inline代替#define

  8. [T-ARA][그녀를 보면][看着那个女人的话]

    歌词来源:http://music.163.com/#/song?id=29343995 作曲 : 코난 [作曲 : Ko-nan] 作词 : 코난/로코 [作词 : Ko-nan-/lo-Ko] b ...

  9. 第一次课堂作业之Circle

    1.问题描述: Create a program that asks for the radius of a circle and prints the area of that circle, us ...

  10. Linux和Unix的区别

    Linux      Unix 免费        收费 开源        不开源 硬件无要求   有要求 IBM Sun Hp 主流的Linux的发型版本: RedHat Fedora  Mand ...