Web响应式布局项目实战 9.HTML5中多媒体标签 学习猿地原创

好，那我们继续来上课，那么这节课呢，我们再来看一下我们的多媒体标签啊，多媒体标签呢，主要就这么几类，一类呢是图像类的，那图像标签之前我们已经学过了，对吧，但是它还有配合两个map跟AA这两个标签啊，另外呢，就是我们的音频类和这个进度条的啊，总共这三类，好了，那我们先来看。在这里边一样，我们新建一个这个文件叫做零。零几零七是吧，零六有了，因为那个零五的，我写的两个零五对吧，那这个应该是零七，零七呢，我们要看的是多媒体标签，多媒体标签。多媒体怎么说来的？呃，就叫。Image吧，啊image啊好了。OK，这里边我们要演示的是多媒体标签，多媒体标签好，那我们来看啊，这里边我们先要引入一张图片，那比如说这里边咱们先去拿一张图片，拿到我们今天这个目录下啊，那在online lesson02这里边我们去找一张图片，比如说我们就把这个不受时斤不改头像这个图片啊拿过来。

好，放过来放过来，我们给它改个名啊，这名太长了，叫做a.DBG就可以了，好，那这个时候我要引入图片是不是就是当前目录下边，当前目录下边a.DG对吧？那么引入完以后啊，咱们来看。好了，图片有了对吧？那么现在问题是什么呢？我想给图片一个链接，当他点一个点这个链接的时候，是不是去到另外一个地方，那这个时候我们平时都怎么做，我们是都使用A标签对吧？然后呢，给它包含过来，比如说诶包含过来啊包含过来以后在这里边我们给它设置一个，比如说去哪呢？去这个HTTPS冒号仙LN。3w.lnk.com对吧？然后tr target给它设置一个block，然后在新窗口打开，那好，那现在我们来看啊，刷新一下，我点击图片是不是可以直接跳转了，对吧？但是问题不在这儿，我的要求是什么呢？注意我只要求在图片中的某个区域。

来a.GBG啊。看好了，我再来刷新一下，我只要求比如说。这个我想要求点这个瘦，就在瘦的这个区域才能跳转，就其他地方你随便点没有用，只有在这个瘦的区域才能实现跳转，明白吧，那这个时候我就需要用到什么呢？用到我们的图像映射啊，说白了图像映射什么意思？就是指这个图像有可点击区域的图像啊，这个图像映射就是指带有可点击区域的图像，这个图像啊，那OK，那么要使用图像映射，我们要使用的这个标签叫做map标签，它就是来用于定义这个图像的映射啊，那么定义完映射以后，接下来呢，它是不是要这个里边有形状对吧，要有这个区域吧。是不是要配合这个区域啊，哎，所以这个时候我们需要用到另外一个标签啊，另外一个标签就是来定义这个区域的，那这里边我们通过这个叫做AEA这个标签来定义这个区域，那咱们来看A，我输入完1E给的快捷键以后，他给我一个属性，一个code属性，一个属性一个alert，对吧？这个map标签呢，他给了一个name name什么就是他的名字。

没错吧，那么他们两个肯定要给它关联起来才可以的啊，他们两个要关联起来才可以的。这个标签我来给大家在这里面直接注释一下啊监控呃，注释叫做。定义客户端。图片映色。映射啊，那么咱们说了，所谓的映射是什么意思，叫做什么呀？叫做这个，呃，是指。带有点击区域的。图像啊，带有田击区域的图像，好了，那现在咱们来看啊，这里边我先给它个名字，比如说这个名字咱们起个什么呢？起个这个ABC吧，我也不知道叫什么名，那这里面怎么跟它关联呢？在它这里边我们需要用到一个属性叫做use map选择你要选择谁，我要选择井号ABC，诶给它进行关联，这里面一定要加井号啊，这里面是定义内部属性还是定义ID属性，那不要紧，一会我们测试一下啊。

好了，那再往下来呢，我们这个呃，S表示什么呢？表示它是什么形状啊，它这里面所支持有这么几个形状，一个是矩形，一个是圆，一个是多边形，然后还有一个default default就是默认的整张图啊，那么底矩形呢，叫做什么呢？叫做recct啊，矩形的REC，好了，我把这几个值也一样啊，给大家注释一下。所支持的叫做ICT。矩形啊C，这叫圆。圆，还有这个po，这叫多边形啊，多边形多边形，然后诶多边形啊，然后还有一个什么呢？还有一个这个呃，DT这是默认的，默认的整张整张。好了，那现在咱们来看，我给的是矩形，那矩形是什么样的，大家知道吧，矩形是不是就是在这里边这么样的一画，这就是一个矩形对吧？那么我们在给点的时候注意矩形肯定要给点，给点给什么点，给它的左上角的点和右下角的点就可以了，也就是几个值，四个值吧，X跟Y2个坐标是不是决定一个点对吧？那OK，我们去找这张图片的点去怎么找呢？咱们来看啊，我用这个打开方式，用画图方式来打开。

咱们说了，我要定位的是这个受对不对，那OK，比如说我们给这个受啊，就定位到多大，就定位这么大。诶好了，那那左上角点，你看我把鼠标放在这儿啊，鼠标放在这最下边这个位置，是不是有个坐标啊，你看鼠标放在这儿，它坐标多少147。小点吧，151126对吗？那OK，第一个点我们找到了交流到151126151逗号126 OK，那么结束的点呢，结束的点在这对吧，那这里边一样，237242，那再来237逗号242好了，那现在完事，然后你点击跳哪呢？我再来一个，比如说HTTPS冒号斜线3W点叫做ED。

work.cn，好了，我要跳到这里边啊，那OK，那现在我们来看可不可以啊，来在这里边刷新一下，刷新完之后你看放这这点都行，随便点看到了吗？没有作用啊，我就刚才只是拉了一下，把图片拉出来了啊。来再来看我如果鼠标放到这里，你看一过来，你看在这个区域内是不是都是小手。看到了吗？那点击小手，你看是不是跳到这里面来了，哎，这就是什么，这就是咱们的这个。映，那么需要去配合这么几个属性，需配合么？几个属性那么的话需给需给圆心再给么？给。垂直半径跟水平半径就可以了啊，这就是咱们的圆啊好了，这就是咱们定义咱们的这个客户端的图像映射啊，那OK，这里边每给大家记得补记笔记啊，我也给补全了啊有这么几个属性，那这个属性是识别什么，它定义不是识别什么，是用来定义这个区域的形状啊这个。

SPA定义区域的形状。区域的形状对吧，然后cods扣子呢，它是定义坐标值啊，定义坐标值包括我能不能做，我说我点击在新窗口打开，是不是也可以直接给他，他给他，然后杠block是不是新窗口打开啊，那现在你看啊，我再来刷新一下，点击这个，So，你看不是到新窗口来打开了，哎，都可以进行设，就A标签，那时候就A标签你怎么设置的，那它它这里面都可以，怎么可以进行设置啊好了，那OK，这就是咱们这个。图像映射，那么图像映射了解完之后，接下来我们再来看什么呢？再来看我们的。多媒体标签。第一个我们要了了解的叫做音频标签啊，也就是加载音频的啊，AU di9标签用来加载音频，SR属性，Src属性，就加点音频单壁纸，那OK，我们去拿一个音频过来啊，在我这里边有一个C盘image a下边，这里边就有音频A的MP mp3我一刀都拿了，还有A的MP4。

对吧，这个这就是网页版，就是不同版本的嘛，啊CTRLC好了，我们把它放到我们今天的这个里面来粘贴过来，粘贴过来以后咱们有A点MP3对吗？那OK，我这里面就是当前目录A点MP3好了，那么写完以后，现在我们来这里边刷新，我们来看一下周尼。有效果吗？这里面好像有点东西，看到了吗？看到这块有个点点点一下。哦，这个点不是，这个点是哪来的，我们把这两张图片给它注释掉啊来这两张图片给它注释掉，注释掉以后，现在我们再来看刷新。

什么都没有吧，哎，我的音频呢，我已经加载了，对吧？诶加载完了它不会出现，原因是什么呢？你必须要给它播放控件啊，也就是他的视频播放器对吧？那怎么给呢？加上controller这属性，它是一个单属性啊，单属性直接写上就行了，写完以后现在我再来看刷新，你看是不是就有这个控件了，哎，那么有了这个控件，接下来我就可以干嘛播放歌曲，我一点击。你看这不就播放歌曲了，时间都去哪了，对吧，我还能快进，然后声音的大小的调整啊，那OK，我先给他暂停。重新刷新回来啊，那么有的时候呢，我们再去进入到一个页面的时候，还会遇到什么呢？它是自动播放的，对不对？哎，那么怎么办？我们也可以给它进行设置，叫什么叫做auto player自动播放，那么现在咱们来看刷新。刷新。是我卡了吗？刷新。还是我打错了A？

没有打错啊，没有打错。自动播放，放到这个属性前应该没有关系。但是他怎么被我播放呢，来刷新。没播放是吧，那OK，我们换个浏览器看一下啊。你看也不好使对吧，但我点一下这是没问题的，看到了吗？哎，自动播放是不行啊，看这里头还能提供什么下载对吧？那OK，把它先关掉了啊。先关掉自动播放不好使对吧，不好使，我们就先不用了啊，然后还可以干嘛呢？连续播放loop啊连续播放，那连续播放咱们来看啊，来刷新。走，你。你看啊，42表四十三四十四，然后四十五四十六走，你你看是不是它自己又回又重新播放了，哎，这是它的这些常用的属性啊，那么自动播放之前是好使的auto player可能是根据我浏览器的版本有关系啊，因为咱说了H5是由这个浏览器厂商开发的，对吧，所以每个每一家支持的效果是不一样的啊。

好，那这是咱们的这个媒体标签，那么媒体标签这里边还有个问题啊，什么问题呢？就是我们尽量不要，这不是用src加载媒个资源对不对，我们尽量不要用它去加载媒体的资源，因为用它加载只能加载一个，那比如说比如说我这里面有个AA，这不就加载失败了嘛，对吧，比如说它不支持MP3格式的情况下啊，当然它现在是支持，咱只是打个比方，比方他不是不支持MP3，那现在你看好了，我这里边再来刷新的时候。你看播放是不是不好使了，对不对？哎，播放不好使了，那怎么办？那这样的话肯定就不行，对不对，那怎么办呢？我们尽量不要用它来加载资源啊，尽量不要用它的资源，用什么呢？我们有一个专门的资源标签叫做source so，用它来帮我们去加载资源，加载谁呢？当前目录比如说有一个叫做a.AA点MP3，当然我用他家的资源现在是不是也不好使一样，我可以再给他设置一个type type type属性，那么MP3的属性叫做。

呃，叫什么状，好像叫VI，不对，这个叫AU Di IO AU Di IO下边的MP3吧，好像是这个是它的这个mime类型啊好了，现在咱们先来看啊，我来刷新没变化对吧？因为这个还播放不了，为什么？因为它这个不好使，对不对，因为这个文件是失效的，那么好，那失效了我可以干嘛？So，我是不是可以写多个呀？给错了啊，RSOCE啊，那OK，我再来一个SORC啊，比如这就叫做A的MP3，好了，那么一样type类型，当然我不指定type类型行不行也可以的，那你看好了，这回再来刷新，然后再点击播放，你看能不能播放了，这回是不是也能了，哎，也就是说当我用S来加载，加载可以同时带多个资源，对吧？那么哪个资源支持能播放，它就会自动去选择哪个资源，明白了吧？诶，这就是咱们使用SS的好处啊，所以尽量在媒体媒体标签里边，我们都用source来进行什么媒体资源的加载，然后可以去选择它的这个类型，对吧？比如AU AU Di IO下面的MP3啊，你看我给他设置一个零也是好使的，来刷新。

看懂了吧？也是好使的啊，好了，这就是咱们这个受定义媒介资源啊，那么再往下音频标签了解到了以后，我们再来看什么呢？再来看我们的这个视频标签，能加音频视不是能加视频的，对不对，包括这里边比如说我还可以再加，So，我这里边好像还有一个资源S，等于我看一下啊。嗯。A这里面。O。好，那就是它了。我这里边拿没拿过来这个ogg我看一眼啊，找到我们这里边有没有一个叫ogg的，有来。

Ctrl a ctrl c把它复制过来，复制到这里面来，这是一个ogg格式的啊，那咱们再来看刷新一下走你。哎，不对。因为我第一个好使，所以他没选择第二个，我把第一个注释掉啊，注册掉好了，现在咱们再来看刷新。来，走你。看到了吧。哎，也是怎么样，也是可以的啊啊，这就是咱们这个音频的加载啊，那么一样，音频加载完之后，我们再来看视频加载。视频加载我们用的是VI Du VI Du VI Du这个标签，Video标签，那么一样，Video标签也可以直接通过src属性来去加载什么加载它的这个媒介资源，但是我们说了，是不是我们可以在这里面使用这个SOCSO标签来进行加载啊，哎，所以尽量用source来加载啊，当前目录咱们是不是有一个叫做A点MP4呢？对吧？那OK，那现在我们再来看啊，找到这里我们来刷新。刷新刷新以后，你看我这个MP mp4格式是不是也没有显示对吧，是因为这块我给空的原因吗？咱们给它先给它删掉一下啊，这回再来看你再来刷新。

诶，是看到了吗？哎，当我给src取消掉以后，是不是才走到这里的src啊，走到这里的src才能加载这个视频，看到了吗？但这个视频是不是比较大，而且这视频也没有播放的功能，我点击你看。点击它不播放是吧，我给他放先放小一点吧，来能给他设置什么呀，宽度，比如说宽度我要干干嘛呢？设置600，设置600以后，它就是等比例缩放的，别宽高一起设置，宽高一起设置，那不是强制压缩了嘛，对吧？那现在你看我鼠标放这来这是什么东西。画中画还带画中画的功能，你看这是浏览器自带的啊，这是浏览器自带的对不对，那OK，那怎么能让它播放呢，一样，这里面需要去加载什么播放控件，Controller，好，那现在我们再来刷新。你看是不是有播放控件啊，我一点击你看。是不是可以播放了。看到了吗？哎，那OK，给它暂停啊好了，那这块可以播放了以后，那再往下来看啊，还有什么呢？我比如说我这里边能不能让它自动播放呢？咱们看auto play在这里边好不好使啊一样，这里边我来重新加载。

有作用吗？没有看到了吗？它是在那干嘛，它会自动给你加载这些啊，它不会给你变成自动播放，这个属性给你取消了啊，因为它有一个属性叫做preload preload什么意思呢？就是提前加载自动播放叫pre。漏洞。等于凹凸啊，它会提前加载刷新。啊，就是这么加载，但是没什么用啊，没什么用啊，因为我现在在本地产品不是在网络，也不是请求网络的数据，所以我试验这个东西也没有用啊，包括在这里边也支持一个pre load的属性啊，这里边我不给值就行了，知道吧，不给值不用说一定要给这个凹凸，我不给值也可以啊，那不给值咱们来看刷新。一进来以后，它是真加载了，它加载一半对吧？哎，这就咱因为它现在都是本地测不出来什么啊，包括那有人说说给这个auto to play，然后给它设置为这个true t rue行不行，那你看好了设置什么。

它能好使啊。是不是都不行了，哎，所以这个属性已经没有用了啊，这个属性没有用了，OK给它删掉啊好，这是咱们这个。视频里，那么另外还有一个问题，就是很多我们去做这个视频的时候，都会看到前都会有一个非常非常亮的介绍，对吧，比如说来个啊叫做这个，呃，现在是比如说比如说这个这个这个。这个儿媳儿儿媳妇儿进门后怎么怎么怎么怎么怎么样，对吧，后怎么怎么样，那很多人啊，都是经不住这样标题的诱惑，对不对，那这个时候你看好了，我们来刷新，这是标题对吧？那一般我都会在标题里面是不是配上这一张图片呢？诶，那好，我怎么给他配这么一张图片呢？我可以通过poster来给他配置一张图片，图片什么呢？当前目录我就一张图片啊，我就这张图片了a.GPG好，那现在你来看，我来刷新。

你看在我没播放之前，是默认有张图片的，哎，我一点击播放图片没有了，你在暂停图片也没有，只有什么，只有在刚开始的时候，它才会有这张图片啊，也就是说这个post定义什么呢？定义的就是视频在点击播放前显示的什么呀，显示的图像啊，这就是咱们的video标签。好了，那video标签我们了解以后，再来看一个标签叫什么呢？叫做em be啊，M的标签，它是干嘛的，用来加载控件啊，用来加载，说白了就加载多媒的一切东西它都可以加载啊，加载多媒，那你看好了，我在这边它也一样，这里边有这个SC，它是一个标签，看到了吗？它这里边是不是也有src属性啊，那src这里边我直接给他一个当前目录，当前目录叫做a.MP mp4，你看它能不能播放啊，不行，太大，我给它缩小啊，来wid widthwth，给他一个宽度，比如说也一样给他给他500这个啊。

好了，再来刷新。你看这块是不是也有了，哎，它也一样啊，然后我点击你看是不是播放的，看到了吗？哎，但是这个500啊，它里面的图是比较小的，看到了吗？哎，这个500它里面的图是比较小的啊。好了，然后呢，一样啊，这里边我还可以干嘛，也可以给它定义类型啊，那么包括它能加载MP4，能不能加载MP3呢？我们来看一下啊，这里边我再来刷新一下。诶有个MP3对吧，来点击。看是不是MP3它也能播放对吧，MP3也可以，甚至我们比如说我们的flash，我看我这里有没有flash啊。呃。这这个不是啊，这也是一个视频文件，那好我先播放一个视频吧，但但大家已经看到了，我们是可以播放视频的，对吧，再来一个视频，你看好了，这里边再来刷新。你看这是不是又是一个视频呢，打开。

看到了吧。看到了吧，哎，这又一个视频的啊，视频也是可以的啊，我看一下我这里边有没有这个flash文件，如果有flash呢，我们再找一个flash的来这的，这是不是就是flash文件对吧？那OK，那比如说就这个，我看看还有没有别的了啊呃呃呃，没有了，就它了，这是一个flash文件啊，那我们来用它来播放一个flash，看可不可以来找到我们的这个LESSON02，把它放进来，放进来以后我把这个名复制一下啊，我也不知道这个flash是什么东西。还是这个还是好不好使的，我还不知道呢，来。把它去掉，直接粘它过来，OK，那现在我们再来刷新一下。不好使。不好。我这不是一个正常的文件啊。这里你看宽度是不是变零了，哎，是没因为它不好使啊，因为它不好使，这个文件不好使啊，不是不是标签的事啊，是我自己文件不好使啊。

这个文件那就是我做的假的我也不知道，我也就很久了啊，很长时间了没用过了，嗯，那就算了吧，这才300多K，那我还没有了吗？这API mp3mp4那没有flash了啊，就是我想说的是他去这个演示flash的也是好使的，那这个不好使，我就把这个给删掉了啊来把这个给删掉了，但MP3MP4是不都没问题，用它都可以加载吧，哎，然后可以把它返回一下啊，保存这个加载这个了。好了，这就是咱们这个M啊，加载这个多媒体的标签啊，OK，这些就是我们现在H5中新增的这些多媒体标签啊，好，那新增这些完事以后我们还有两个对吧，一个是进度条的，那我们来看一下，在这里边一样，我给他来一个。HR。好。来个横线。好，那么接下来我们来看一下我们的进度条标签啊，进度条标签那这里边我就直接给了叫做pros progress啊，那么一样，这里面我也可以写叫进度条。

进度条。诶，进度条标签好了，那现在你看好了，在这里边一样，我们来刷新一下。这里边想看。往下来这是不是有进度条啊，哎，当然这进度条我是可以给它设置什么设置它的值的，现在比如说我说最小值是道是这个零对吧，然后最大值呢是多少，是100，那同样它有当前值多少当前值比如我给了个20，那现在你看我来刷新。你看是不是到20这了对吧，如果当天值我要给他100呢，那你看再来。走，你是不是到到100了，看到了吧，哎，那等到你想等到后期我们学到这个GS了，我是不是就可以去控制它，让它动态的去运作了，比如说这里边从一开始对吧，然后这里边。你看好了，我给大家演示一下啊，十块的标签ST，然后我来找对吧，找谁呢？找这个标签吧。

找这个标签啊，那我给它定义一个什么，定义一个ID吧，来ID等于等于pro。然后我这Y一个pro等于do，呃，等于do document do document get element by ID OK，找到这个I叫什么名字，叫做pro RO的，哎，找到他，诶，打错了啊，Pro RO。怎么卡呢，Pro好了。那么找到它以后，接下来干嘛呢？我要去检测这里面的值对不对，所以这里边我给他一个定时器啊，就是多长时间让他一检测，比如说我让他100毫秒一检测，那我这块定时器给它加上来，然后告诉他100毫秒一检测，然后检测之后你要干嘛呢？我这里边要做这么一件事儿，哎，做这么一件事儿什么事啊，就是如果这个T啊，这里边就是这个标签里边的谁呢？这里边的这个Y6要是小于100的话，那这个时候我就要干嘛呢？就要加就行了，对吧，就是。

打错了，这块叫做pro啊，Pro RO里的Y6就等于什么呀，等于这个pro RO里边的Y6加一呗，是不是这个意思啊。哎，那OK，那如果它大如果等于100了呢，那怎么办？我这里边就可以给它进行什么提示一个，呃，比如说来个alert弹框，呃叫做什么叫做这个下载完成吧，啊或者安装完成都行，对吧，安装完成好然后。结束结束完之后干嘛呢？我obj里边的v rue再继续在那等于零等于零，是不是它就可以再重复的去执行了，哎，那好，现在我们来看一下啊，我再来刷新，刷新以后你看它再往上走，看到了吗。是不是一直在走啊，好，我们等，等他走到满以后，他会给我弹一个弹框。告诉他们安装完成我确定一确定完以后确定确定确定确定确定诶。诶。

确定完以后你看啊，我确定完以后。他没有给我改对吧。啊，没有给我改成零，我把它拿上来啊，不是没改成零，是我写错了，我又写成什么obg了啊，写习惯了呢，PP给它改成零啊，好了，现在再来看啊，重新刷新。好了，他再走。等他走到100这个时候弹完框，弹完框以后再那干嘛，再让他回过头来再继续走对不对，你看走你诶完事安装完成确定，你看你确定回来是不是又重新走了，哎，那OK，这就是咱们的这个进度条标签啊，好了，我让他把我得把这个程序暂停啊，我这里面多加一个A，它就找不着了，找不着了程序就暂停了。他也会给我报错，但但是HT就是前台的报错，对我来说没有影响啊，因为我们看不到，在这个控制台可以还可以看到，OK，这就是进度标签，那么另外还有一个标签叫什么呢？叫做定义范围内的度量标签啊，那我直接还在这个标签后面写啊这个。

来诶。哪去了？零七。往下。在在这里边我继续me，呃，叫它叫me metr啊，它是干嘛的定义范围内的一个度量。呃，度量它呢，有这种三种情况，就是这个最小值，呃不能说最小值就是叫做警告值对吧，然后这个呃，就比如应该就对应该叫警告值，然后呢，良好值和最好值，或者是优化的最小值，优化的最大值和中间这个值，就是比如说我们给密码。这个意思啊，比如说给密码，你给一个纯数字的，他会告诉你不安全，对不对。哎，那是一个度量，然后呢，你给一个数字的加一英文，它会告诉你密码中度，就是这个密码，呃，安全中度对吧，那么它也会变一个颜色吧，哎，这就是一个度量，那么如果说在这里面你再继续给一个这个，给两个字母，再给两个符号，那他会告诉你们密码是什么安全的，对不对，哎，这又是一个度量，它就是干这个用的啊，那咱们来看啊，我在这里边直接给他。

加了一个标签，然后我就回车，回车以后咱看标签就在这呢，哎，那这里边我没给HR吗？我们给它换个行啊，来HR标签好了，换行以后这块再来一个me metr。刷新。看在这呢啊，那这里面我并没有设置值对不对，所以现在我开始给他设置值，也一样的设置啊，在这里边我有什么呀，有这个min最小值为零对吧，MAS最大值为100，那现在你看好了没有任何的效果。啊，没有任何效果，为什么？因为当前值我没给吧，对不对，那OK v Lu y6，我比如说当前指导呢为20，那现在我们再来看走你。来，你看是不是也是这样的，它是一直都绿色的，看到了吗？就算我给他一个十，它也会一样。

刷新。看到了吗？诶刚才说了这个东西它是定一个范围内的一个度量的，对吧，那在这个范围内肯定我们可以给他设置一下，那怎么设置呢？我可以通过几个属性来设置，首先第一个叫什么呢？Lo，它是优化的最小值，也就是警告了最小值，比如说你到30，就是你如果你的这个强度没有超过30的情况下，比如我给你30这个这个区间，那就是警告了一个值，那你看现在来。周。颜色是变黄了，看到了吗？哎，那好，那如果我超过30呢，比如说这块我来个呃40吧。刷新。你看是不是就变绿了对不对，哎，那同样我有警告的最小值，我还有警告的最大值对吧，那叫hi最大值，最大值是多少呢？最大值，比如最大值就是100吧啊。这里面最大值咱们给他一个100啊好了，那现在完事以后咱们再来看。刷新。

没什么变化对吧？哎，包括比如说我给了100，哎，这个这个这个这个这个这个这个当前值这呢啊，我给了个100，只给100才行啊来。周。看是不是也是绿色的对吧？哎，没什么区别吧，你看一个最小值，一个最大值，然后一个当前值，你当前值距离小的时候就没小于，小的的时候变成红变成黄色，对吧？大于这个值就等于这个值的时候呢，还是绿色就小，只要大于它就是绿色对不对？那这里边还需要一个，还需要什么，还需要有一个良好值，就相当于是一个判断是良好值叫什么？Op ti op t，呃，MU。这是个良好值，那良好值肯定是什么越高越好对吧，那比如说良好值我就给他100啊，或者其实良良好值给他80也行，那就给100吧，因为我这个呃，优化的最大值都给100了，对吧，那都给了100了啊，那现在我们来看。刷新。好了，这是绿色没问题对吧？OK，这个绿色没问题了，我这个优化值不应该给他100，我这个这个优化的最大值我给他80吧，啊，别给100了，来。

刷新一下啊。OK，现在我当前值是这些对吧，好了，那现在我改我当前值Y6，我给它改为80。现在你来看走你。诶就变黄了，哎，你看80等于，只要等于它的时候，是不是就等于最大值变黄了，那好，那再来我说最大值给它变多少，变成这个30变小。周丽。不行，我得还少一个啊，得29。29，好。走，你。你看是不是就红了，哎，那也就是说我们是不是就定义这几种情况，我就判断密码密码，如果比如说密码，如果这个全都是数字了，我就给你这个值设置到当前值，就给你设置29对吧，但如果你密码是有那是有数字有那什么的呢，我就给你设置个50，那这个时候你看。我是不是就变黄对吧，如果你是很安全的呢，我就给你设置个100，那这个时候你看。就变绿了，哎，这就是咱们这个mate标签啊，用于定义这个范围内的度量啊，一般用什么用这个呃，密码密码用的长度啊，然后它有这么几个颜色，一个是红色代表警告，黄色代表正常，绿色代表什么安全啊，然后同样需要配合这么几个属性啊，这是它当前值对吧？这是默认最小值，最大值当前值，然后这是优化的最小值和优化的最大值，还有这个什么良好值啊，这个良好值是什么？越高越好对吧？那么咱给100给80行不行，是不是也没问题，对不对，那这里边我现在给100了，你看好了来刷新。

是不全都是黄色了，对不对，那OK啊，那你这块一样啊，我说了这个东西我们既然给它设置它了啊，那咱就是给它设置什么最高的就可以了啊，只要大于80的，那我这就变变成正常的颜色，变成绿色，绿色是不是代表通过了，哎，那OK，这就是咱们这个新增的多媒体这几个标，这几个多媒体标签啊好了，那一样，我们来看一下这个笔记image map a这是一组对吧？定义图像映射的好，这个audio跟video是定义这个音频和视频的，其中可以用S来加载，这个embd是干嘛定义镶嵌的内容对吧？哎，这里边不仅可以定义音频和视频啊，还能定义flash都可以啊，然后就是进度条标签和这个mate标签啊，这就是咱们新增的多媒体标签，好了，那这节课我们到这里。