Web前端开发笔记——第二章 HTML语言 第十节 画布标签、音视频标签
目录
- 一、画布标签
- 二、音视频标签
- （一）音频标签
- （二）视频标签
- （三）资源标签
- 结语
一、画布标签
<canvas> </canvas> 画布标签用于图形、字符等的绘制，它不能直接地绘制图形，要通过脚本即JavaScript来完成，这里不对具体脚本阐述，只介绍该标签的用法。通过指定id=""属性 ，用于在脚本中引用，而通过定义 width=""和 height=""属性来规定该画布的大小.，即宽度和高，如下：
<canvas id="" width="" height=""></canvas>
可以通过添加style=""属性来对画布加上边框，因为默认时画布是无边框的。
例如，在HBulider X中下列代码，设置画布的边框大小宽度为300，高度为250，边框大小为5px，且颜色为蓝色：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><canvas id="12" width="300" height="250" style="border: 5px solid #0000FF"></canvas></body></html>运行结果如下：
二、音视频标签
一般浏览器通过带有flash插件，使其播放音视频，但也能通过HTML5中的标签来播放音视频。
（一）音频标签
通过<audio></audio>标签，在网页上加入音频元素，使能播放音频文件，添加src=""属性，即该音频文件的URL，controls="controls"属性表示显示音频控件，即播放暂停按钮、调节声音等等；loop="loop"属性表示当播放完该音频后，自动重新开始播放；autoplay="autoplay"属性表示当打开该网页页面时，音频文件加载好后自动开始播放该音频；muted="muted"属性表示该音频文件自动设置为静音输出。
<audio src="" controls="controls" loop="loop" autoplay="autoplay" muted="muted">
</audio>
另外要注意audio标签目前仅支持的3种文件格式：mp3、wav、ogg。
例如，在HBulider X中下列代码，音频文件位于站点文件夹music内，在文件夹中html文件调用该音频，设置音频控件、自动播放以及循环播放属性：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><audio src="../music/陈奕迅 - 爱情转移.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio></body></html>运行结果如下，可以正常播放音频文件：
（二）视频标签
和音频标签一样，也可以通过<video></video>标签，在网页上加入媒体元素，使能播放媒体。它的属性与音频标签属性一样，只不过多了宽度和高度属性设置，即通过width=""属性和height=""属性设置，但如果不设置大小属性，原视频播放画面大小会随页面的改变而改变。
<video src="" width="" height="" controls="controls" loop="loop" autoplay="autoplay" muted="muted">
</video>
这里也是一样，要注意video标签目前仅支持的3种文件格式：mp4、webm、ogg。
例如，在HBulider X中下列代码，音频文件位于站点文件夹video内，在文件夹中html文件调用该视频，设置视频控件、自动播放以及循环播放属性：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><video src="../video/陈奕迅-倾城.mp4" controls="controls" autoplay="autoplay" loop="loop"></video></body></html>运行结果如下，可以正常播放视频文件：
（三）资源标签
当要定义多种媒体资源时，这时要用到<source> </source> 标签，它用在audio和video标签内。通过src=""属性和type=""属性，定义音视频文件的URL和类型，如下：
<audio controls="controls"><source src="../music/陈奕迅-爱情转移.mp3" type="audio/mp3">
</audio>
比如为了当用户使用不同的浏览器播放音视频时有些浏览器不支持该格式时，可以利用另一种格式，即第二个媒体资源。
例如，在HBulider X中下列代码，即在音频标签内定义了两个资源标签，它有两种格式，当浏览器都支持时任意播放，而有的浏览器不支持其中一种时选用另一种可支持的格式播放：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><audio controls="controls" autoplay="autoplay" loop="loop"><source src="../music/陈奕迅-爱情转移.ogg" type="audio/ogg"><source src="../music/陈奕迅-爱情转移.mp3" type="audio/mp3"></audio></body></html>结语
以上就是全部内容，篇幅较长，感谢您的阅读和支持，若有表述或代码中有不当之处，望指出！您的指出和建议能给作者带来很大的动力！！！
Web前端开发笔记——第二章 HTML语言 第十节 画布标签、音视频标签相关推荐
- Web前端开发笔记——第二章 HTML语言 第四节 超链接标签
目录 前言 一.超链接标签 (一)链接其它子网页 (二)链接其它站点 (三)虚拟超链接 二.从当前页面链接到指定位置 三.链接的访问情况 四.在新窗口中打开链接 例题 结语 前言 本节介绍超链接标签即 ...
- Web前端开发笔记——第二章 HTML语言 第六节 区域标签、列表标签
目录 一.区域标签 (一)div标签的定义 (二)div标签的属性 二.列表标签 (一)列表标签的定义 (二)列表标签的类型 1.有序列表 (1)有序列表的定义 (2)有序列表的属性 2.无序列表 ( ...
- Web前端开发笔记——第二章 HTML语言 第十一节 语义标签
目录 一.语义标签的定义 二.头部标签.底部标签 三.导航栏标签 四.内容栏标签.区段标签 五.其它内容标签 六.< figure > 和 < figcaption >标 结语 ...
- Web前端开发笔记——第二章 HTML语言 第七节 表格标签
目录 一.表格标签的定义 二.表格标签的属性 (一)边框属性 (二)单元格属性 三.表格标签的表头 表头属性 四.表格标签的标题 五.表格标签的嵌套 结语 一.表格标签的定义 在html中,表格标签表 ...
- Web前端开发笔记——第二章 HTML语言 第五节 图像标签
目录 前言 一.图像标签的属性 (一)src属性和alt属性 (二)width属性和height属性 (三)borde属性 二.绝对路径和相对路径 三.图像映射 例题 结语 前言 本节介绍图像标签即i ...
- Web前端开发笔记——第二章 HTML语言 第二节 基本标签
目录 前言 一.标题标签 二.段落标签和段内换行 三.预留格式标签 四.行内组合标签 五.水平线标签 六.注释标签 七.空格字符 例题(创建一个网页) 结语 前言 本节主要讲解HTML的一些基本标签. ...
- Web前端开发笔记——第二章 HTML语言 第三节 文本格式化标签
目录 前言 一.文本加粗.斜体标签 二.文本字体缩小.放大标签 三.文本下标.上标标签 四.文本下划线.删除线标签 五.双引号字符 结语 前言 这里主要介绍对html语言中对文本的处理. 一.文本加粗 ...
- Web前端开发笔记——第二章 HTML语言 第一节 标签、元素、属性
目录 一.什么是HTML? 二.标签 (一)标签.元素的定义 (二)标签的嵌套 (三)标签的属性 (四)父元素.子元素.兄弟元素 三.HTML DOM树 结语 一.什么是HTML? HTML语言,即超 ...
- Web前端开发笔记——第二章 HTML语言 第九节 框架标签、脚本标签
目录 一.框架标签 (一)显示目标页面 (二)规定大小的框架 (三)规定边框的框架 二.脚本标签 结语 一.框架标签 (一)显示目标页面 <iframe></iframe>标签 ...
最新文章
- Android架构篇-2 国际化多语言
- 语言模型“不务正业”做起目标检测，性能还比DETR、Faster R-CNN更好 | Hinton团队研究...
- 1.什么是数据化运营——《数据挖掘与数据化运营实战》
- Java Review - 并发编程_锁的分类
- boost::log模块测试样板，用于检查每个公共标头是否都是独立的并且没有任何缺失的 #includes
- action mutation 调用_Vuex源码学习（六）action和mutation如何被调用的（前置准备篇）...
- Python小数据池
- 群聊金山云与英特尔的“AI as a Service”，你都get到了什么？
- Fiddler抓包详解
- pvremore删除物理卷
- java程序员中英文简历_Java程序员英文简历范文
- 安徽省计算机二级水平考试试卷,2010安徽省全国计算机等级考试二级笔试试卷VB试题及答案...
- gVim配色和字体选择
- rockchip wificountry code
- Excel VLOOKUP() 函数实现自动填充内容
- linux 卸载aria2,Linux一键安装Aria2 + AriaNg + Filebrowser
- 2对应字母权限Linux,linux中文件权限的字母含义
- 2014广东计算机一级试题及答案,广东计算机一级试题2014版
- stm32h743单片机嵌入式学习笔记4-文件系统FATFS
- 常见模块设计--权限管理（一）