html5新属性

HTML5新特性 Unit01

音频与视频

音频与视频标签

音频标签

音频标签可以支持在网页中播放音乐，支持的音频格式有：mp3, wav, ogg。

简写方式：

<audio src="音频文件路径" controls></audio>
<audio src="../asset/a.mp3" 
       controls     // 控制是否显示控制面板
       autoplay     // 控制是否在标签加载完毕后自动播放
       muted        // 控制是否静音
       loop         // 控制是否单曲循环
       preload      // 控制音频的预加载模式
       ></audio>

preload可选值：

none: 不进行任何音频的预加载

auto: 尽可能的加载音频资源

metadata: 只加载元数据（音频时长、格式、视频宽度、高度等…）

标准方式：

<audio controls ....>
    <source src="letitgo.mp3" type="audio/mpeg"/>
    <source src="letitgo.wav" type="audio/wav"/>
    <source src="letitgo.ogg" type="audio/ogg"/>
    什么破浏览器，建议你换个吧...
</audio>

视频标签

用于在网页中播放视频：

<video src="视频路径" controls></video>

<video controls>
	<source src="letitgo.mp4"/>
    <source src="letitgo.webm"/>
    <source src="letitgo.ogg"/>
</video>

<audio>、<video>标签的DOM操作

代码示例：

<audio id="au" src="" controls></audio>

let audio = document.getElementById('au');
// audio就是封装了音乐信息与操作的HTMLAudioElement对象
audio.src="../assets/x.mp3";    // 访问属性
audio.play();                   // 调用方法
audio.addEventListener('事件名', function(){ ... })  // 绑定事件

与媒体相关的DOM对象包含：

1. HTMLMediaElement 是后两者的父接口。
2. HTMLAudioElement 对应页面的<audio>标签
3. HTMLVideoElement 对应页面的<video>标签

要学好媒体相关DOM操作，就是要学好上述接口中涉及的各种属性、方法、事件。

媒体DOM相关属性

属性	描述
autoplay	设置或返回是否在就绪（加载完成）后随即播放音频。
controls	设置或返回音频是否应该显示控件（比如播放/暂停等）。
currentTime	设置或返回音频中的当前播放位置（以秒计）。
duration	返回音频的长度（以秒计）。
ended	返回音频的播放是否已结束。
loop	设置或返回音频是否应在结束时再次播放。
muted	设置或返回是否关闭声音。
paused	设置或返回音频是否暂停。
playbackRate	设置或返回音频播放的速度。
preload	设置或返回音频的 preload 属性的值。
src	设置或返回音频的 src 属性的值。
volume	设置或返回音频的音量。

audio.volume
audio.volume = 0.5

媒体DOM相关方法

方法	描述
play()	开始播放音频。
pause()	暂停当前播放的音频。

audio.play()
audio.pause()

媒体DOM相关事件

属性	值	描述
ondurationchange	script	当媒介长度改变时运行的脚本。
onended	script	当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。
onerror	script	当在文件加载期间发生错误时运行的脚本。
onloadedmetadata	script	当元数据（比如分辨率和时长）被加载时运行的脚本。
onpause	script	当媒介被用户或程序暂停时运行的脚本。
onplaying	script	当媒介已开始播放时运行的脚本。
onratechange	script	每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）。
ontimeupdate	script	当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。
onvolumechange	script	每当音量改变时（包括将音量设置为静音）时运行的脚本。

audio.addEventListener('pause', function(){
    处理事件
})

全屏API

HTML5提供了可以让任何HTML元素及其子元素占满全屏的API：

dom对象.requestFullscreen();  // 让dom对象占满全屏

document.exitFullscreen();   // 退出全屏

Canvas

HTML5提供了可以在页面中绘图的标签元素：canvas。

基本使用规则

在页面中添加canvas元素：

<canvas id="cvs" 
        width=""      设置画布宽有多少个像素
        height=""     设置画布高有多少个像素
></canvas>

绘制canvas

// 获取canvas对象
let cvs = document.getElementById('cvs');
// 获取用于绘制canvas的上下文对象（context）
let ctx = cvs.getContext('2d');     // 用于渲染二维图像的上下文对象
let ctx = cvs.getContext('webgl');  // 用于渲染三维图像的上下文对象

填充图形基础API：

// 设置画笔的填充样式
ctx.fillStyle = 'red'
// 填充一个矩形  矩形左上角定点为(x, y)  宽为width  高为height
ctx.fillRect(x, y, width, height)

描边图形基础API：

// 设置画笔的描边样式
ctx.strokeStyle = "blue"   
// 对一个矩形描边  矩形左上角定点为(x, y)  宽为width  高为height
ctx.strokeRect(x, y, width, height)

绘制文字基础API：

ctx.font = '25px 微软雅黑'
ctx.strokeText('文本内容', x, y); // 在(x, y)位置 描边文字
ctx.fillText('文本内容', x, y);   // 在(x, y)位置 填充文字