H5新的语义化标签

1. 新的语义化标签

1.1 新元素

目的是使搜索引擎识别这些人为标签。

• <address> 标签定义元素地址
• <mark>主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
• <time> 标签定义日期或时间，或者两者。

1.2 表单增强应用

1.2.1 input元素的type属性扩展

• search
• tel

使用pattern（正则）和maxlength限定输入格式

<input type='tel' value='' placeholder='请输入手机号码' pattern='1[3-8][0-9]{9}' title='请输入11位手机号'>

• url
• email
• date
• color
• 

• number
• range

在input后添加一个自定义标签<output name='result' id="num"></output>用来显示滑动数值

// 滑动时显示选择的值

var range = document.getElementById("num");

range.addEventListener("change", function() {

result.value = range.value;

})();

1.2.2 input通过属性进行表单验证

• required

标记当前input元素为必填项<input type="text" required>

• pattern

正则验证表单输入

1.2.3 其他有用属性

• autofocus
• form
• placeholder
• progress

表示进度条 <progress value="30" max="100"></progress>

• meter

max默认为1，min默认为0

<meter value="3" min="0" max="10">3/10</meter>

<meter value="0.6">60%</meter>

• contenteditable

让普通属性可编辑

<p contenteditable="true">这里的内容是可编辑的</p>

1.3 使用音频和视频

音频

<audio controls="controls"> <source src="src/music.ogg" /> <source src="src/music.mp3" /> 您的浏览器不支持audio标记 </audio>

• controls
• autoplay
• loop

默认false

• preload

none;metadata;auto(默认)

• volum

0-1之间

视频

<video controls="controls"> <!-- 不同浏览器支持格式不一样 --> <source src="fun.ogg" type="video/ogg" /> <source src="fun.mp4" type="video/mp4" /> <source src="fun.ogv" type="video/ogg" /> <!-- 当浏览器不兼容video标签，就会将他以div方式解析 --> SHIT 你的浏览器不支持！ </video>

不管是audio还是video都不要直接设置标签的src格式问题：每个浏览器的音视频格式支持不同。 希望兼容各种格式

如果HTML中遇到不能识别的标签，就会将该标签当做DIV(块级元素)

例如：

<video controls width="500"> //设了宽度不能设高度

<!-- html解析过程中会找其中第一个能认识的格式播放，一旦找到认识的视频格式，就不会再往后找了 -->

<source src="chrome.mp4">

<source src="chrome.ogv">

<source src="chrome.webm">

<span>shit 弱爆了 有木有</span> //兼容提示

</video>

video控件

|属性 |描述

|---------------------|---------------------------------------

|audioTracks |返回表示可用音轨的 AudioTrackList 对象

|autoplay |设置或返回是否在加载完成后随即播放音频/视频

|buffered |返回表示音频/视频已缓冲部分的 TimeRanges 对象

|controller |返回表示音频/视频当前媒体控制器的 MediaController 对象

|controls |设置或返回音频/视频是否显示控件（比如播放/暂停等）

|crossOrigin |设置或返回音频/视频的 CORS 设置

|currentSrc |返回当前音频/视频的 URL

|currentTime |设置或返回音频/视频中的当前播放位置（以秒计）

|defaultMuted |设置或返回音频/视频默认是否静音

|defaultPlaybackRate |设置或返回音频/视频的默认播放速度

|duration |返回当前音频/视频的长度（以秒计）

|ended |返回音频/视频的播放是否已结束

|error |返回表示音频/视频错误状态的 MediaError 对象

|loop |设置或返回音频/视频是否应在结束时重新播放

|mediaGroup |设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）

|muted |设置或返回音频/视频是否静音

|networkState |返回音频/视频的当前网络状态

|paused |设置或返回音频/视频是否暂停

|playbackRate |设置或返回音频/视频播放的速度

|played |返回表示音频/视频已播放部分的 TimeRanges 对象

|preload |设置或返回音频/视频是否应该在页面加载后进行加载

|readyState |返回音频/视频当前的就绪状态

|seekable |返回表示音频/视频可寻址部分的 TimeRanges 对象

|seeking |返回用户是否正在音频/视频中进行查找

|src |设置或返回音频/视频元素的当前来源

|startDate |返回表示当前时间偏移的 Date 对象

|textTracks |返回表示可用文本轨道的 TextTrackList 对象

|videoTracks |返回表示可用视频轨道的 VideoTrackList 对象

|volume |设置或返回音频/视频的音量

事件

|事件 |描述

|-----------------|------------------------------------------

|abort |当音频/视频的加载已放弃时

|canplay |当浏览器可以播放音频/视频时

|canplaythrough |当浏览器可在不因缓冲而停顿的情况下进行播放时

|durationchange |当音频/视频的时长已更改时

|emptied |当目前的播放列表为空时

|ended |当目前的播放列表已结束时

|error |当在音频/视频加载期间发生错误时

|loadeddata |当浏览器已加载音频/视频的当前帧时

|loadedmetadata |当浏览器已加载音频/视频的元数据时

|loadstart |当浏览器开始查找音频/视频时

|pause |当音频/视频已暂停时

|play |当音频/视频已开始或不再暂停时

|playing |当音频/视频在已因缓冲而暂停或停止后已就绪时

|progress |当浏览器正在下载音频/视频时

|ratechange |当音频/视频的播放速度已更改时

|seeked |当用户已移动/跳跃到音频/视频中的新位置时

|seeking |当用户开始移动/跳跃到音频/视频中的新位置时

|stalled |当浏览器尝试获取媒体数据，但数据不可用时

|suspend |当浏览器刻意不获取媒体数据时

|timeupdate |当目前的播放位置已更改时

|volumechange |当音量已更改时

|waiting |当视频由于需要缓冲下一帧而停止

< video id= "video" src= "fun.mp4" controls ></ video >

< div >

< progress id= "progress" min= "0" max= "100" value= "0" style= " width : 500 px" ></ progress >

< span >00:00</ span >/< span >02:44</ span >

</ div >

< div >

< button id= "btn_play" > 播放 </ button >

< button id= "btn_pause" disabled > 暂停 </ button >

< button id= "btn_muted" > 静音 </ button >

< input id= "volume" type= "range" min= "0" max= "1" step= "0.1" >

< button id= "btn_fullscreen" > 全屏 </ button >

< button id= "btn_speed_up" > 加速 </ button >

< button id= "btn_speed_down" > 减速 </ button >

< button id= "btn_forward" > 前进 5S</ button >

< button id= "btn_back" > 后退 5S</ button >

</ div >

步骤：

1 隐藏 controls

2 加上控制元素

3 点击事件分别实现不同效果

< script >

var video = document . getElementById ( 'video' );

var btn_play = document . getElementById ( 'btn_play' );

// 注册点击事件

// addEventListener 将事件属性的 on 去掉 作为第一个参数传入

btn_play . addEventListener ( 'click' , function () {

video .play();

btn_play . disabled = true ;

btn_pause . disabled = false ;

});

var btn_pause = document . getElementById ( 'btn_pause' );

btn_pause . addEventListener ( 'click' , function () {

video . pause ();

btn_play . disabled = false ;

btn_pause . disabled = true ;

});

var btn_muted = document . getElementById ( 'btn_muted' );

btn_muted . addEventListener ( 'click' , function () {

// 交互变化 true 或 false

video . muted = ! video . muted ;

// if (video.muted) {

// 代表当前已经静音

// btn_muted.innerHTML = " 取消静音 ";

// } else {

// btn_muted.innerHTML = " 静音 ";

// }

btn_muted . innerHTML = video . muted ? " 取消静音 " : " 静音 " ;

});

var volume = document . getElementById ( 'volume' );

volume . addEventListener ( 'change' , function (e) {

// 拿一下当前 volume 的值

video . volume = volume . value ;

});

var btn_speed_up = document . getElementById ( 'btn_speed_up' );

btn_speed_up . addEventListener ( 'click' , function (e) {

// 加速

video . playbackRate += 0.1 ;

});

var btn_speed_down = document . getElementById ( 'btn_speed_down' );

btn_speed_down . addEventListener ( 'click' , function (e) {

// 减速

video . playbackRate -= 0.1 ;

});

var btn_forward = document . getElementById ( 'btn_forward' );

btn_forward . addEventListener ( 'click' , function (e) {

video . currentTime += 5 ;

});

var btn_back = document . getElementById ( 'btn_back' );

btn_back . addEventListener ( 'click' , function (e) {

video . currentTime -= 5 ;

});

进度条的值显示

// 注册视频播放状态变化事件

video . addEventListener ( 'timeupdate' , function () {

// console.log(1111);

progress. value = ( video . currentTime / video . duration ) * 100 ;

});

全屏

需要做兼容性处理

function fullScreen (ele) {

if (ele.requestFullScreen) {

ele.requestFullScreen();

} else if (ele.webkitRequestFullScreen) {

ele.webkitRequestFullScreen()

} else if (ele.mozRequestFullScreen) {

ele.mozRequestFullScreen()

} else if (ele.oRequestFullScreen) {

ele.oRequestFullScreen()

} else if (ele.msRequestFullScreen) {

ele.msRequestFullScreen()

}

}

var btn_fullscreen = document . getElementById ( 'btn_fullscreen' );

btn_fullscreen . addEventListener ( 'click' , function () {

// video.webkitRequestFullScreen();

fullScreen ( video );

// fullScreen(document.body);

});

</ script >