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 ...
随机推荐
- CRC循环冗余校验码总结(转)
转自 http://blog.csdn.net/u012993936/article/details/45337069 一.CRC简介 先在此说明下什么是CRC:循环冗余码校验 英文名称为Cyclic ...
- XML 特殊字符
XML转义字符 以下为XML标志符的数字和字符串转义符 " (" 或 ") ' (' 或 ') & (& 或 & ...
- 浅谈redis和memcached的区别
缓存技术方面说到redis大家必然会联想到memcached,了解它们的人应该都知道以下几点吧 redis与 memcached相比,redis支持key-value数据类型,同事支持list.set ...
- webpack
webpack 通过一个主文件 .js ,webpack把这个文件所有的依赖文件,都处理打包成js文件 webpack 可以干嘛?1.执行打包 (把require()模块化整合成一个js文件给html ...
- JS根据经纬度获取地址信息
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- C#运算符号
double x=5.1e3;// 5.1乘以10 的3次方. x就是 5100 //注 : 5.1e+3=5.1e3=5.1e03=5.1e+03 double y=5.1e-3;// 5.1乘以 ...
- allow zero datetime=true导致datetime转换失败:MySql.Data.Types.MySqlDateTime”的对象无法转换为类型“System.Nullable`1[System.DateTime]
allow zero datetime=true导致datetime转换失败:MySql.Data.Types.MySqlDateTime”的对象无法转换为类型“System.Nullable`1[S ...
- Objective-C开发编码规范【转载】
概要 Objective-C是一门面向对象的动态编程语言,主要用于编写iOS和Mac应用程序.关于Objective-C的编码规范,苹果和谷歌都已经有很好的总结: Apple Coding Guide ...
- BZOJ的两道osu概率DP easy与osu
坑 http://blog.csdn.net/CreationAugust/article/details/49516415 http://blog.csdn.net/braketbn/article ...
- View的弹性滑动
View的弹性滑动 实现弹性滑动的思想:将一次大的滑动分成若干次小的滑动并在一个时间段内完成,具体的实现方式有很多,如通过Scroller.Handler#postDelayed以及Thread#sl ...