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

autoplay

如果出现该属性，则音频在就绪后马上播放。

controls

controls

如果出现该属性，则向用户显示控件，比如播放按钮。

loop

loop

如果出现该属性，则每当音频结束时重新开始播放。

preload

preload

如果出现该属性，则音频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

src

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学习笔记一的更多相关文章

  1. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  3. HTML5学习笔记（一）：HTML简介

    Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...

  4. CSS3秘笈第三版涵盖HTML5学习笔记6~8章

    第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...

  5. CSS3秘笈第三版涵盖HTML5学习笔记1~5章

    第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...

  6. HTML5 学习笔记（一）——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  7. Html5学习笔记(1)

    1.figure\figcaption||detail\summary||mark学习笔记 效果图 代码为: <!DOCTYPE html> <html> <head&g ...

  8. HTML5 学习笔记--------》HTML5概要与新增标签！

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

  9. [html5] 学习笔记-表单新增的元素与属性（续）

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

随机推荐

  1. CentOS安装gitLab服务器

    首先利用gitlab-install-el6.sh安装,比较简单: (出处:http://www.linuxidc.com/Linux/2013-06/85754.htm) 1:如果有条件,提供一台全 ...

  2. Docker上ubuntu新建用户的网络访问不通问题

    背景 作为一个生命不息,折腾不止的码农.各种操作系统被我不知道搞崩了多少次,无数个夜晚连夜抢修数据,重装系统,那个累啊!! Option 1:备份.数据可以备份,配置可以备份,安装包可以备份.但是安装 ...

  3. Dark Mobile Bank之移动银行应用仿冒攻击威胁分析报告

    一.背景 据“第十五次全国信息网络安全状况暨计算机和移动终端病毒疫情调查”调查结果显示,2015年移动终端的病毒感染比例为50.46%,相对于2014年增长了18.96%,移动终端病毒感染率涨幅较大, ...

  4. 怎么使用Delphi获取当前的时间，精确到毫秒

    先介绍一个可能比较常用的方法,获取当前时间 var datetime: string; begin datetime:= FormatDateTime('yyyy-mm-dd hh:mm:ss', N ...

  5. JQuery数组详解（含实例）

    <!doctype html>jQuery数组处理详解(含实例演示)@Mr.Think 演示所用数组 var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; 1 ...

  6. 记录一下折腾webp 的过程

    最近有客户想要处理webp 的动图,情况当然是我们并不能处理webp 格式的图片.这事就交给了我来折腾,一开始想着用瑞士军刀ffmpeg.结果是折腾了差不多一天,前前后后编译了几十次ffmpeg 源码 ...

  7. JavaScript call

    <script> function dog() { this.sound = "wangwang~"; this.shout = function () { alert ...

  8. 修改MS SQL忽略大小写 分类： SQL Server 数据库 2015-06-19 09:18 34人阅读 评论(0) 收藏

    第一步:数据库->属性->选项->限制访问:SINGLE_USER 第二步:ALTER DATABASE [数据库名称] collate Chinese_PRC_CI_AI 第三步: ...

  9. 【leetcode】House Robber

    题目简述 You are a professional robber planning to rob houses along a street. Each house has a certain a ...

  10. DataGridView回车焦点横向移动

    protected override bool ProcessCmdKey(ref Message msg, Keys keyData)        {            if (keyData ...