<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视频的更多相关文章
-
HTML5视频Video 音频Audio
视频协议 视频格式 Flash HTML5 HTTP flv HTTP f4v HTTP mp4 HTTP m3u8 HTTP webm HTTP ogg RTMP flv RTMP f4v RTMP ...
-
[转] Android 4.4中播放HTML5视频<;video>;的Bug
近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width= ...
-
html5视频全频播放
html5视频全频播放 旋转90度 对video进行缩放 修正position 效果还凑合 代码 $(media).rotate({ // angle: 90, duration: 100, anim ...
-
HTML5视频标签video
现阶段,我们要在网页中嵌入视频的最可靠最常用的办法是使用Flash,通过使用<object>和<embed>标签,就可以通过浏览器播放swf,flv等格式视频文件,但是前提是浏 ...
-
HTML5 视频规范简介
HTML5 视频规范简介 创建于 2013-02-03, 周日 00:56 作者 白建鹏 HTML 一词是“超文本标记语言”(Hyper-Text Markup Language)的缩写,是用于描 ...
-
使用jQuery播放/暂停 HTML5视频
文章来自:http://blog.okbase.net/jquery2000/archive/4485.html 我尝试用jQuery控制HTML5视频,两个视频分别在两个tab中,我希望点中tab后 ...
-
html5 视频
HTML规定了一种通过video元素来包含视频的标准方法 一段HTML5视频不可缺少的元素有video.controls等.. 直到现在,仍然不存在一项在网页上显示视频的标准. 大多数视频是通过fla ...
-
怎样获取HTML5视频的持续时间
HTML5视频的Bigger体验是非常令人振奋的,非常easy的道理,不用载入和依赖烦人的Flash或其它第三方插件来播放视频,也是大功一件.我们能够通过自己定义控件对视频进行显示和操控,当中一个常见 ...
-
使用 video.js 开发 HTML5 视频页面
时间 2015-05-13 17:11:58 The GIS Guy 原文 http://thegisguy.tk/html5-video-using-video-js/ 主题 Video.js H ...
-
使用HTML5视频事件示例
<!DOCTYPE html > <html > <head> <title>Video events example</title> &l ...
随机推荐
-
今天大雪 看雪花飘落HTML5特效
今天大雪,弄一个下雪的特效.html5飘落的雪花堆积动画特效 查看效果:http://hovertree.com/texiao/js/snow.htm 以下是完整源代码,保存到HTML文件也可以看效果 ...
-
Microsoft 2013 新技术学习笔记 四
在继续学习Model的实践经验之前,先思考一下Controller和View的实践原则在本次系统重构中的应用,我手上是一个后台管理系统(不是门户系统.不是具体业务系统),通俗点讲就是给企业的运维人员用 ...
-
WebResource-asp.net自定义控件引用外部资源方法
rom:http://www.lmwlove.com/ac/ID879 在asp.net中开发自定义控件时,如果我们要用到图片,外部css,js等文件,那么最好的方式就是将这些文件作为自定义控件嵌入的 ...
-
g++
用g++编译程序时,-l 与-L各是什么意思?还有-I -l 表示:编译程序到系统默认路进搜索,如果找不到,到当前目录,如果当前目录找不到,则到LD_LIBRARY_PATH等环境变量置顶的路进去查找 ...
-
深入.Net字符串类型
.Net的字符串其实还是有很多东西可以写的.但是最近在学习SQL Server,只好先做下最近学习到的一些巧用,妙用之类的东西. 巧用String.Join拼接字串数组,字符串集合为字符串.如果在之前 ...
-
Careercup - Google面试题 - 4557716425015296
2014-05-03 21:57 题目链接 原题: Many sticks with length, every time combine two, the cost is the sum of tw ...
-
C#基础及记忆概念
在C#中,你给一个方法传输值类型参数时,实际上是使用的这个参数的一个副本,就是将原来的变量复制一份,然后传给一个方法,让其进行操作.所以在方法内部对参数的修改等不会对原来的参数造成影响(这个其实就是值 ...
-
oracle-同义词，又学到东西了
select col1 from tab1@db_link1; create or replace synonym test123 as se,ect col1 from tab1@db_link ...
-
史上最全然oophper php文件上传之文件类型相应表，ie，火狐各一份。
ie 火狐 id 后缀名 php识别出的文件类型 0 gif image/gif 1 jpg image/jpeg 2 png image/png 3 bmp image/bmp 4 psd appl ...
-
Oracle误删除表数据后的恢复具体解释
Oracle误删除表数据后的恢复具体解释 測试环境: SYSTEM:IBM AIX 5L Oracle Version:10gR2 1. undo_re ...