html5学习笔记一
HTML5学习笔记
<video>标记:定义视频，Ogg、MPEG4、WebM三种格式
<video src=”movie.ogg” controls=”controls”>
您的浏览器不支持video标签。（提供不支持video元素的浏览器显示）
</video>
这个标签有的属性：
controls:向用户显示该控件，比如播放、暂停、音量按钮
height,width定义高宽
autoplay:如果出现该属性，则视频在就绪后马上播放
loop:如果出现该属性，完成播放后再次开始播放
preload:如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用”autotype”，则忽略该属性。
src:要播放的视频的url
子标签：
source定义源文件，<video>可以有多个source元素，浏览器使用第一个可识别的格式：
<video width=”320” height=”240” controls=”controls”>
<source src=”movie.ogg” type=”video/ogg”>
<source src=”moive.mp4” type=”video/mp4”>
Your brower does not support the video tag.
<video>
Viedo+DOM:
html5<video>元素同样拥有方法、属性和事件。其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。
|
方法 |
属性 |
事件 |
|
play() |
currentSrc |
play |
|
pause() |
currentTime |
pause |
|
load() |
videoWidth |
progress |
|
canPlayType |
videoHeight |
error |
|
duration |
timeupdate |
|
|
ended |
ended |
|
|
error |
abort |
|
|
paused |
empty |
|
|
muted |
emptied |
|
|
seeking |
waiting |
|
|
volume |
loadedmetadata |
|
|
height |
||
|
width |
例子：
<html>
<body>
<div style=”text-align:center;”>
<button onclick=”playPause()”>播放/暂停</button>
<button onclick=”makeBig()”>大</button>
<button onclick=”makeNormal()”>中</button>
<button onclick=”makeSmall()”>小</button>
<br/>
<video id=”video1” width=”420” style=”margin-top:15px;”>
<source src=”/example/html5/mov_bbb.mp4” type=”video/mp4”/>
<source src=”/example/html5/mov_bbb.mp4” type=”video/ogg”/>
Your browser does not support HTML5 video.
</video>
</div>
<script type=”text/javascript”>
Vvar myVideo=document.getElementById(“video1”);
function playPause(){
if(myVideo.pause){myVideo.play();}
else myVideo.pause();
}
function makeBig(){
myVideo.width=560;
}
function makeNormal(){
myVideo.width=420;
}
function makeSmall(){
myVideo.width=320;
}
</script>
</body>
</html>
<audio>标记：定义音频
<audio src=”someaudio.wav” controls=”controls”>
您的浏览器不支持audio标签
</audio>
|
属性 |
值 |
描述 |
|
autoplay |
如果出现该属性，则音频在就绪后马上播放。 |
|
|
controls |
如果出现该属性，则向用户显示控件，比如播放按钮。 |
|
|
loop |
如果出现该属性，则每当音频结束时重新开始播放。 |
|
|
preload |
如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
|
|
url |
要播放的音频的 URL。 |
<canvas>标记：定义图形，比如图标和其他图像
<canvas id=”myCanvas”></canvas>
<script type=”text/javascript”>
var canvas=document.getElementByID(“myCanvas”);
var ctx=canvas.getContext(‘2d’);
ctx.fillStyle=’#FF0000’;
ctx.fillRect(0,0,80,100);
</script>
Html5的canvas元素使用javascript在网页上绘制图形。画布是一个矩形区域，你可以控制其每一个像素。
html5学习笔记一的更多相关文章
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
- HTML5学习笔记（一）：HTML简介
Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...
- CSS3秘笈第三版涵盖HTML5学习笔记6~8章
第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...
- CSS3秘笈第三版涵盖HTML5学习笔记1~5章
第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...
- HTML5 学习笔记（一）——HTML5概要与新增标签
目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...
- Html5学习笔记(1)
1.figure\figcaption||detail\summary||mark学习笔记 效果图 代码为: <!DOCTYPE html> <html> <head&g ...
- HTML5 学习笔记--------》HTML5概要与新增标签！
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
- [html5] 学习笔记-表单新增的元素与属性（续）
本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...
随机推荐
- Jquery知识点梳理
Jquery $代表选择器 JS 选取元素 操作内容 操作属性 操作样式 <div id="aa" style="width:100px; height:100px ...
- js 固话正则
var str = '82386012'; var partten = /(^(0\d{2})-(\d{8})$)|(^(0\d{3})-(\d{7})$)|(^(0\d{2})-(\d{8})-(\ ...
- linux学习日记之鸟哥
2016年10月11日星期二 df命令解释:用于显示磁盘分区上可以使用的磁盘空间.默认显示单位为KB,可以用该命令来获取硬盘被占用了多少空间,目前还剩多少空间等信息.用法:df 选项 参数例:df – ...
- 限制HTML的input只能输入数字、英文、汉字...
限制HTML的input只能输入数字.英文.汉字... 关键词:正则表达式, JavaScript, HTML, input 常用HTML正则表达式1.只能输入数字和英文的:<input onk ...
- 解决升级PHP7后 微信公众号收不到消息
服务器配置Linux+Nginx+PHP5.5+mysql index方法配置微信的关注回复.菜单事件.多客服.自动回复等 public function actionIndex() { if (is ...
- linux环境中使用转义字符使命令行字符颜色高亮
而通过转义序列设置终端显示属性的格式为: \033[Param {;Param;...}m 其中转义序列以 \033[ 为开头,m 为设置属性结束,中间部分的 Param 为属性值,{} 表示可以设置 ...
- C++ 系列：内存管理
1.内存分配方式 内存分配方式有三种: (1)从静态存储区域分配. 内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在.例如全局变量,static变量. (2)在栈上创建. 在执行函 ...
- 数学系列：XXX
Copyright © 1900-2016, NORYES, All Rights Reserved. http://www.cnblogs.com/noryes/ 欢迎转载,请保留此版权声明. -- ...
- Power服务器中KVM克隆新虚拟机
查看当前所有虚拟机:virsh list --all 克隆新虚拟机:virt-clone -o guest01 -n guest02 -f /var/lib/libvirt/images/guest ...
- 结合谷歌地图多边形(polygon)与Sql Server 2008的空间数据类型计算某个点是否在多边形内的注意事项
首先在利用 GEOGRAPHY::STPolyFromText(@GeoStr, 4326) 这样的函数把字符串转换为Geography类型时,字符串里经纬度的顺序是 “经度[空格]纬度”,即“lon ...