<video>标签用于定义视频。

案例1：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<video width="300" height="300" controls="controls">
    <source src="gsd.mp4" type="video/mp4">
    <source src="gsd.ogg" type="video/ogg">
    您的浏览器不支持video标签
</video>
</body>
</html>

效果图1（浏览器支持）

效果图2（浏览器不支持）

注释：
（1）controls 用于向用户显示播放、暂停和音量按钮，属性值为：controls；
（2）autoplay 用于控制视频就绪后马上播放，属性值为：autoplay；
（3）loop 用于控制视频播放完成后再次开始播放，属性值为：loop；
（4）preload 用于控制视频在页面加载时进行加载，准备播放，若已经使用“autoplay”，则忽略该属性，属性值为：preload；
（5）src 视频链接，video元素允许多个格式不同的source元素，浏览器将会使用第一个可识别的格式；
（6）可以在<video></video>之间放置文本内容，这样浏览器可以显示不支持此标签的相关信息；
（7）<video>拥有方法、属性及事件play()、pause()等，案例如下：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function clickA(){
            var a = document.getElementById("ex_1");
            if(a.paused){
                a.play();
            }else{
                a.pause();
            }
        }
    </script>
</head>
<body>
<video id="ex_1" width="300" height="300" controls="controls">
    <source src="gsd.mp4" type="video/mp4">
    <source src="gsd.ogg" type="video/ogg">
    您的浏览器不支持video标签
</video>
<br/>
<button onclick="clickA()">播放/暂停</button>
</body>
</html>

效果图：（浏览器支持情况下）



												


											
HTML5视频的更多相关文章
	

    
						
  1. HTML5视频Video 音频Audio
		
    视频协议 视频格式 Flash HTML5 HTTP flv HTTP f4v HTTP mp4 HTTP m3u8 HTTP webm HTTP ogg RTMP flv RTMP f4v RTMP ...
    
		
    2. 
						
  2. [转] Android 4.4中播放HTML5视频<video>的Bug
		
    近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width= ...
    
		
    3. 
						
  3. html5视频全频播放
		
    html5视频全频播放 旋转90度 对video进行缩放 修正position 效果还凑合 代码 $(media).rotate({ // angle: 90, duration: 100, anim ...
    
		
    4. 
						
  4. HTML5视频标签video
		
    现阶段,我们要在网页中嵌入视频的最可靠最常用的办法是使用Flash,通过使用<object>和<embed>标签,就可以通过浏览器播放swf,flv等格式视频文件,但是前提是浏 ...
    
		
    5. 
						
  5. HTML5 视频规范简介
		
    HTML5 视频规范简介  创建于 2013-02-03, 周日 00:56  作者 白建鹏 HTML 一词是“超文本标记语言”(Hyper-Text Markup Language)的缩写,是用于描 ...
    
		
    6. 
						
  6. 使用jQuery播放/暂停 HTML5视频
		
    文章来自:http://blog.okbase.net/jquery2000/archive/4485.html 我尝试用jQuery控制HTML5视频,两个视频分别在两个tab中,我希望点中tab后 ...
    
		
    7. 
						
  7. html5  视频
		
    HTML规定了一种通过video元素来包含视频的标准方法 一段HTML5视频不可缺少的元素有video.controls等.. 直到现在,仍然不存在一项在网页上显示视频的标准. 大多数视频是通过fla ...
    
		
    8. 
						
  8. 怎样获取HTML5视频的持续时间
		
    HTML5视频的Bigger体验是非常令人振奋的,非常easy的道理,不用载入和依赖烦人的Flash或其它第三方插件来播放视频,也是大功一件.我们能够通过自己定义控件对视频进行显示和操控,当中一个常见 ...
    
		
    9. 
						
  9. 使用 video.js 开发 HTML5 视频页面
		
    时间 2015-05-13 17:11:58 The GIS Guy 原文  http://thegisguy.tk/html5-video-using-video-js/ 主题 Video.js H ...
    
		
    10. 
						
  10. 使用HTML5视频事件示例
		
    <!DOCTYPE html > <html > <head> <title>Video events example</title> &l ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. （转载）MVC 4.0 PartialView()与View()真的一样吗？
			
    转载自:http://www.cnblogs.com/lori/ 当我们使用razor作为页面引擎时,它的视图文件扩展名为cshtml或者vbshtml,而之前作为分部视图的ascx文件,进行razo ...
    
			
    2. 
						
  2. Responder一点也不神秘————iOS用户响应者链完全剖析
			
    一.事件分类 对于IOS设备用户来说,他们操作设备的方式主要有三种:触摸屏幕.晃动设备.通过遥控设施控制设备.对应的事件类型有以下三种: 1.触屏事件(Touch Event) 2.运动事件(Moti ...
    
			
    3. 
						
  3. [linux服务器][bash]让切换目录更方便
			
    本文转载:[linux服务器][bash]让切换目录更方便: 一,为何要使用这几个命令?   可能大家会有疑问,为何要使用这几个命令,   难道用cd不就可以切换目录了吗?   没错,使用cd就可以切 ...
    
			
    4. 
						
  4. Qt使用MinGW编译，如何忽略警告
			
    Qt编译时经常出现以下警告: warning: unused parameter 'arg1' [-Wunused-parameter] warning: unused variable 'i' [- ...
    
			
    5. 
						
  5. Qt调用VC++生成的动态链接库
			
    Qt如何调用VC++生成的动态链接库?假设当前有VC++编译器生成的动态库文件testdll.h,testdll.lib和testdll.dll. testdll.h文件源码如下: #ifdef TE ...
    
			
    6. 
						
  6. Linux tr 命令使用
			
    man tr: TR(1) User Commands TR(1) NAME tr - translate or delete characters SYNOPSIS tr [OPTION]... S ...
    
			
    7. 
						
  7. Cracking the coding interview 第二章问题及解答
			
    文章的缘由可以参考此篇文章.目前完成了第二章,代码放在github上,地址在此.问题的描述都在对应的代码文件中.其他的章节仍在在进行中. 如果代码有问题,欢迎指正,谢谢. yetuweiba
    
			
    8. 
						
  8. 揭开枚举类的面纱（Unlocking the Enumeration/enum Mystery）
			
    枚举给用户定义固定数据组提供了方便.枚举类就是一系列常量整型值,这也就意味着枚举类型不能被修改. 这里我们将要讨论C语言中枚举类型的用法和限制. 枚举通过枚举关键值定义,类似结构体定义 语法(Synt ...
    
			
    9. 
						
  9. 用Nginx实现Session共享的均衡负载
			
    前言 大学三年多,也做个几个网站和APP后端,老是被人问到,如果用户多了服务器会不会挂,总是很尴尬的回答:“哈哈,我们的用户还少,到了服务器撑不住的时候,估计都上市了吧”.说是这么说,但是对于有强迫症 ...
    
			
    10. 
						
  10. [转载]date命令时间转换
			
    Linux时间戳和标准时间的互转 在LINUX系统中,有许多场合都使用时间戳的方式表示时间,即从1970年1月1日起至当前的天数或秒数.如/etc/shadow里的密码更改日期和失效日期,还有代理服务 ...
    
			
    11.