HTML5的新特性--基础知识（3）

最新推荐文章于 2023-06-18 13:46:12 发布

敲代码的猫

最新推荐文章于 2023-06-18 13:46:12 发布

阅读量638

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/lazycode_cat/article/details/60570281

版权

H5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. setCustomValidity()

1.1 作用

自定义错误信息，一旦设置好了setCustomValidity()，当前表单是不允许被提交的，一旦提交，显示自定义错误信息

1.2 注意

setCustomValidity("")，一旦数据被修改正确后，需要通过setCustomValidity("")清空错误验证消息，使得表单允许被提交

2.checkValidity()

2.1作用

在不提交表单的情况下对表单或者表单元素进行验证。如果有问题的话，返回值为false；如果没有问题，返回值为true。

3. invalid事件

表单在提交过程中，检测到有无效域时，所激发的事件。该事件的本质是获取产生错误的那一组元素。

3.1如何使用

document.forms[0].addEventListener("invalid",form_invalid,true);

function form_invalid(e){

var elem=e.target;//得到产生错误的元素

//调整elem

}

4.ValidateState状态

表示指定的表单元素能够出现的所有的错误状态

4.1如何获取validateState

formElement.validity;

4.2错误状态值

1、判断是否通过所有的验证规则

formElement.validity.valid:通过所有的验证后，返回值为true，否则为false。与checkValidity()类似

2、判断是否为空

formElement.validity.valueMissing

注意：验证有required属性的控件，值是否为空。值为空，返回true。否则为false

3、判断数据是否违反类型

formElement.validity.typeMismatch

看输入的数据，与type属性是否相等，如果不符返回为true，否则返回false

4、判断数据是否违反pattern属性的约束

formElement.validity.patternMismatch

违反为true，否则为false

5、判断数据是否违反了定义的step，多数使用在<input type=number />类型上

formElement.validity.stepMismatch

违反为true，否则为false

6、输入的数据长度超出了maxlength所定义的长度

formElement.validity.tooLong

用于比较位数<input type="text" maxlength="15">

7、输入的值小于定义的min值

formElement.validity.rangeUnderflow

8、输入的值大于定义的max值

formElement.validity.rangeOverflow

用于比较大小<input type="number" max="100">

9、判断表单元素是否已经设置了自定义错误消息

a)formElement.validity.setCustomValidity("格式不正确")

formElement.validity.customError;返回值为true

b)formElement.validity.setCustomValidity("")

formElement.validity.customError;返回值为false

新课：

1、h5之前播放视频

如： <object>

</object>

2、h5中：使用video元素在文档中插入和播放视频，主要支持ogg和mp4格式

ogg:包含theora视频和vorbis音频解码器，并且得到火狐、谷歌、opera等的支持

mp4:采用H.264视频和AAC音频解码器，得到Safari、IE以及谷歌的支持，现在比较流行的视频格式

video元素：包含source元素，这些元素为浏览器提供了不同的视频源。浏览器会根据source标签，然后根据所支持的格式，选择播放的文件。

语法：

写法一：<video src="abc.mp4"></video> 这种方法用的比较多

写法二：

<video>

</video>

例：

controls属性:显示下方的播放和暂停

autoplay属性：设置视频加载完成后自动播放

loop属性：设置这个属性时，浏览器会反复播放该视频

poster属性：该属性指定一个URL，在视频等待播放时显示一幅图像

preload属性：该属性可以设置三个值：

none:不缓存视频，为了减少不必要的流量

metadata：推荐浏览器抓取一些资源的信息

auto:默认值，要求浏览器尽可能快的下载视频

h5中视频或音频事件：

progress：用于更新媒体的下载进度，会周期性的触发

canplaythrough:当整个媒体可以顺利播放时，就会触发这个事件

canplay:不考虑整体状态，只要下载了一定的可放帧会触发这个事件

ended:媒体到达末尾时触发

pause：媒体暂停时触发

play：媒体开始播放时触发

error：媒体播放出现错误时触发

下面是h5中新增的媒体处理方法：

play():播放媒体文件

pause():暂停播放

load();加载媒体文件，动态应用程序可使用该方法提前加载

canPlayType(type):查看浏览器是否支持这种文件格式的媒体文件

canPlayType(type)中：

视频格式：如video/mp4,video/ogg

音频格式：如audio/mp3

例：<video id="media" width="700" src="source/video.mp4"></video>

$("media").canPlayType("video/mp4");

返回值：

1、probably：最大可能性能够播放该视频

2、maybe：可能播放该视频

3、"":空，播放不了

h5新增的针对视频元素处理属性如下：

paused:媒体处于暂停或未播放状态，这个值为true

ended：如果媒体已经播放结束，这个值为true

duration：返回媒体总时长，以秒为单位

currentTime：获取或设置媒体播放位置

编程实现视频播放器：

step1：实现视图界面

step2：完成播放/暂停的功能

play()

pause()

按钮文字切换

step3：

3.1 完成滚动条的自然滚动

currentTime:播放的时长

duration：视频总时长

maxim:600

size:待求

currentTime/duration =size/maxim

size=currentTime/duration*maxim

3.2 手动更改滚动条，并且更新视频播放位置

e.pageX - div.offsetLeft

e.offsetX;

音频audio元素：在互联网中，音频不如视频流行。在h5中，通过audio元素来表示音频文件。

检查音频格式：$("audio").canPlayType("audio/mp3")

audio元素支持以下属性

src:指定播放文件的url，可通过<source>

controls:激活浏览器提供的默认页面

autoplay：加载音频后自动播放

loop：设置该属性后，会反复播放该音频

preload

H5中的媒体API既支持视频也支持音频。

案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

#player{

width:700px;

margin:20px auto;

padding:5px;

background:#999999;

border:1px solid #666666;

border-radius:5px;

}

#media{margin:0px;padding:0px;}

nav{margin:5px 0px;}

#buttons{float:left;}

button{

width:50px;

}

#bar{

float:left;

width:600px;

height:16px;

padding:2px;

border:1px solid #ccc;

background:#eee;

margin-left:25px;

}

#progress{

width:0px;

height:16px;

background:rgba(0,0,150,0.2);

}

</style>

var loop;

function $(id){

return document.getElementById(id);

}

/**初始化**/

function initial(){

//1、获取 id为btn的元素

var btn = $("btn");

var media = $("media"); //获取media

var bar = $("bar");

//2、绑定事件

btn.addEventListener("click",btn_click,false);

media.addEventListener("ended",media_ended,false);

bar.addEventListener("click",bar_click,false);

}

/**鼠标单击bar时的事件**/

function bar_click(e){

//console.log("距离:"+e.offsetX);

var progress = $("progress");

progress.style.width = e.offsetX + "px";//设置progress的宽度为鼠标点击的bar的位置宽度

var media = $("media");

//计算currentTime

var currentTime = e.offsetX / 600 * media.duration;

media.currentTime = currentTime;

}

/**视频播放结束后的事件*/

function media_ended(){

media.currentTime=0; //当视频结束后自动将当前事件设置为开始播放

$("btn").innerHTML = "Play";

clearInterval(loop);

$("progress").style.width = "0px";

}

/**更新滚动条的位置*/

function updateStatus(){

var media = $("media");

var progress = $("progress");

var size = media.currentTime / media.duration * 600;

$("progress").style.width = size + "px";

}

/**Play/Pause 按钮单击事件**/

function btn_click(){

//1、获取media

var media = $("media");

//2、根据不同状态切换视频播放/暂停

if(!media.ended && !media.paused){

//正在播放中，需要暂停视频，按钮的文字变成Play

media.pause();

this.innerHTML = "Play";

clearInterval(loop);

}else{

//正在暂停(停止)中，播放视频，按钮的文字变成Pause

media.play();

loop = setInterval("updateStatus()",100);

this.innerHTML = "Pause";

}

window.addEventListener("load",initial,false);

</script>

</head>

<body>

<nav>

</div>

</div>

</nav>

</section>

</body>

</html>

敲代码的猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录