尚硅谷前端基础 (26)

好，刚刚我们说了I frame内联框架，它是用于向我们一个网页中引入其他网页的，那我们在现实的使用过程当中呢，我们除了网页引入网页，诶除了引入图片，我们往往还有什么呀？哎，还有你像我这个里边有几个这么几个MP3，还有这个MP4文件，MP3我们知道是音频文件，MP4呢是这个视频文件，所以我们经常还有一个需求，就是在我的网页里，我可能要引入一些音乐，引入一些声音，那这个我们要怎么做，那首先呢，我在这里边啊，我新建一个文件夹，我叫了一个S吧，SOCE啊放我这些资源，然后呢，我直接把这些啊，我给它拖进去。放到这个S，诶，音频视频就都有了啊，都有了，那接下来我们来说一下怎么在我们的网页中去引入音频还有视频啊，我们就一块说了，直接来一个13，我们来说一个这个音视频啊音视频。

那这里我们先用这个音频举例子啊，先用这个音频举例子，那现在呢，我们来给它运行一下。那我们来看一下啊，在我的这个S里有一个A6点MP3，那现在我们音频的主要格式，其实呃，兼容性比较好的呢，主要就是MP3，那现在我想把这个MP3引入到我的网页里，要怎么办呢？诶在我们的HTM2当中有一个标签是专门用来干这个事儿的，它叫做一个A6啊A6标签A用来干嘛的呢？AUBIA6的意思就是音频啊，就是音频，所以A6标签它就是用来，它就是用来向我们这个页面中诶引入一个外部的音频文件啊，引入一个外部的音频文件的，所以你看啊，它也是一个替换元素，包括当会我们要说的视频那个video，它都属于替换元素，也就是说它会被最终被那个文件所替换，然后你看啊，其实就就很无聊了，因为你看它都差不多，是不是也是一个src属性啊，那这个src是干嘛的？这个src它就是用来诶指定你要引入那个文件的一个路径，同样这个文件可以是一个外部的文件，也就是说你这个文件可能在别的网上你引入来的可以没问题，也可以是你一个你本地的文件，比如说现在我就想引入这个A6点MP3，那这时候你就要看一下路径就完了，我现在13音频就在我的这个。

INTTRO6下，而这个source也在INTTRO6下，所以我可以直接点斜盖，点斜杠来一个source，下边是一个A6点M3，那这个时候这个声音就会被引入到我的网页里，我这给它刷新一下，那这边其实你会发现我的这个声音这块，它现在在我的页面中是不是并没有显示出来呀？诶并没有显示，呃，同学说老师你不是已经引入了吗？为什么没有显示？诶，因为注意了这个A标签，包括待会儿我们要讲的video标签，你要注意我们这个音视频文件，音视频文件引入时啊，引入时默认情况下，默认情况下它是不允许用户什么呢？用户自己控制诶播放停止的，也就是说默认情况下，它只是把这声音也好，或者视频也好引入到我的网页里，而你用户自己是没有办法操作的。所以你引入完。

了以后，这时候什么都没有啊，为什么他不让你操作嘛，就让你什么都看不见，所以就什么都没有，那现在我要让用户操作要怎么办呢？那这个时候其实我需要给它加一个属性啊，加一个属性，这个属性的名字叫做一个CS，我们先加上啊，CS就是控制的意思，我加上以后你就发现我这儿就出现了一个播放器的一个界面啊，诶这个东西为什么出现。

就是因为我加了一个CS以后，允许用户控制了，然后我控制了组件才出现啊，就这么一个意思，所以CS表示控制，我们来说一下，我们来说一下这个属性，属性我们这叫做一个controls，是否允许我们这个用户控制什么呀？哎，控制这个播放啊，是否允许用户控制播放，那注意了，它这个属性有一个特点，之前我们去讲属性的时候，我们说了，有一些特殊的属性是不需要给值的，CTS就是这么一个特殊属性，它不用给值，你想让它播放，OK，你就把它写上就行了，你想让用户控制，你就写上cameras，不想你就给它去掉就行了。所以这个属性它不是通过值来判断的，而是通过什么呢？有没有，有你就可以控制，没有你就不能控制，所以注意这是我们第一次接触到这种特殊属性，那这个时候其实我们的这个音乐。

文件就已经成功的引入到了我们当前的网页里，那这个时候其实我直接一点播放键。这个音乐就会自动的播放了啊，其实是不是非常简单啊，哎，跟那个图片基本上是类似的，唯独一个不一样的地方就是你需要加这么一个CS啊，加上一个controls，加一个控制这么一个选项，那这里我们还要注意有一个问题，什么问题呢？诶那这里边其实我们这个标签，我们要说的数量，其实主要现在就两个，一个叫做cons，还有一个东西叫什么呢？还有一个叫做auto to play auto to play什么意思？诶，叫做自动播放，诶auto play叫做我们的这个音频文件是否自动播放，所以你看啊，当我加上这个属性以后，我这音乐就干嘛呢，它就自己就放起来了，那如果不我我不写它就它就不放了，你看现在是不放了，哎，把这属性加上，它就会自动播放，所以auto play主要是用来设置这个自动播放的啊，两个属性，CS，还有auto play controls是不是让用户控制播。

啊，这个auto play是不是让用户就是这个音频自动播放，但是注意这东西是啊，现在在我的Chrome里是好使的，如果我换一个浏览器，比如说我换一个火狐。我把这个地址直接粘到火狐里，你看效果你看。火狐有没有自动播放，哎，我们来点一下，我们查看一下元素，点一下这个标签，我看看我这个凹凸play有没有加上auto凸play是不是加上了，诶加上了，但是它有没有播放，很明显没有播放啊，很明显没有播放，我试一下我手动播放它是不是可以放啊，啊可以播放，我暂停，我这时候再刷新，哎，它是不是依然没有自动播放，哎，所以我们要注意我们这个凹凸play有一个特点，其实chome它也是这样啊，Chrome也是这样，你看我在刷新它也不放了啊，它也不放了，所以这奥普play有时候如果你第一次用的话，你会觉得比较奇怪，诶诶你看又又又放上了是吧？诶我们这儿先把它给去掉吧，因为我这块现在它会自动刷新啊，就去掉，如果什么呢？如果设置了我们这个auto play。

哎，啧，什么呢，则我们这个音乐。在我们这个打开页面时会自动播放啊，音乐会自动播放，那这里面注意了啊，注意了，但是但是目前来讲，大部分浏览器啊，大部分浏览器都不会什么呢，自动对音乐进行播放，诶那这属性不就不就废了吗？哎，对你可以这么理解，那为什么？因为啊我们想一下之前我们上那些网站，其实你可能会体验挺明显的，有的网站干嘛呢。

他可能带一个背景音乐，他希望你在上这个网站的时候呢，有一个比较好的一个用户体验，看起来比较舒服，但是其实你会发现有的时候呃，你可能那个音箱啊调的声音比较大，或者你的耳机啊调的声音比较大，你刚一打开这网站，这音乐噌家伙起来了，它容易吓你一跳，对吧，你这刚一进来哈，这网站还带BGM的啊，咔咔就响，容易吓人一跳，所以有的时候这种背景音乐往往不会给人一个特别好的体验啊，往往不会给人一个特别好的体验，所以基本上现在所有的浏览器，它为了提升我们这个用户体验，基本上这个凹凸类它不会说一上来就自动播放，所以一般情况下，一般情况下你这打开它不会自动播放，比如我关掉啊，我关掉重新打开一个新的。

你看到了吗？它并不会自动播放，也就是说一般浏览器是在我第一次打开这个网页的时候，不会对这个音乐自动播放，为什么？为了有一个比较好的用户体验，但是当我对这个文件我自己播放过以后啊，播放过以后，然后你再刷新的话，它就会有这个自动播放这个功能啊，有这个自动，但是其实你好像从浏览器的刷新都不行啊，浏览器刷新都不行，所以这个时候基本上可以认为这个凹凸类这个功东西啊，基本上就不太好使了啊，不太好使了，所以有的时候我们再去播放一些音乐的时候，如果你想用音乐让音乐可以自动播放，我们还得需要用到一些技术手段，那什么技术手段现在没法说，因为这种东西肯定要结合我们的GS去去使用了啊，去使用了，但是注意这部分我们说的浏览器说的是什么，说的是大部分浏览器，但是还有一小部分浏览器他不管这比如说我们亲爱的IE。

IE稍微有点慢啊，我们等一下那再打开IE的过出来了啊，还说看点别的是吧，我们来回车敲过来。看到了吧，诶IE不管不顾一上来就给你播放，所以有的时候你用IE就容易吓一跳啊，他没有去考虑这个用户体验的问题，所有浏览器都是这样啊，所有的IE基本上他不都不都不会考虑这个问题啊好，这是我们播放的两个属性，Ctrls auto play，然后呢，我们来看一下文档。打开文档。我们的。然后在这呢，我们直接搜一下AU Di，我们的音频标签直接点开啊，它这有例子是吧，我们先不管它。往下看属性有什么auto play啊，有什么这个哎，有什么这个controls，对吧，有什么controls，然后呢，哎，这还有一个东西叫叫loop loop什么意思，循环，也就是说这个loop的意思是我这个音乐是不是循环播放啊，是不是我这个循环播放，所以这个时候如果我这加上一个loop，现在我们不写loop啊，我们来看效果，我这一刷新。

我得往后拖啊，往后拖我们先放着啊，那先放着我们要看什么呢？我要看当我这个时间到了以后，这个音乐它会不会停止，就是说它会停止呢，还是说会从头放一遍啊，从头放下。嗯，哎，很明显音乐是不是停了呀，哎，他没有再从头放，所以如果你想让它从头播放的话，你就可以直接写一个路写上就行了啊，写上就行了，然后我这刷新一下。还是往后调一下，那这个时候我的音乐就会循环播放。看到了吧，哎，停了以后又播放啊，所以这个是我们这个loop的一个作用啊，我把那auto play也写上。

然后把它注掉啊，这个是我们说又一个属性，叫做一个录，哎，就是我们这个音乐，诶是否循环播放啊，是否循环播放三个属性，CLS auTo Bla，还有这个look啊，一共这三个属性，这三个属性都是没有值，你要生效就写，不生效就不写就完事了啊，特点还是挺一样的，然后文档在这儿呢，我不是来看属性的啊，但是还是说一下，你看文档，看这标签什么属性，前面有一个attributes，你直接往下瞅就行了，我们就讲了三个叫做一个auto auto play，还有一个叫做cons，还有一个我们叫做一个loop是吧，我们就说这几个，其他的我们就不src也说了，对吧，SR也说了，其他的我们就不多说了，然后这些不用管它，这是GS东西啊，不管它，然后往下看，它会有一个这个兼容性的一个列表，兼容性的列表我们来看一下。

A6，哎，这是我们这个A6的一个标签，你看CH3支持，IE的edge支持，火狐的3.5支持，然后IE的九支持，也就是说这个东西我们的这个A6标签，IE8以下的浏览器它支不支持，诶，它是不支持的，诶那么同学说老师我怎么试这个IE8以下的浏览器啊，来，我直接来一个AU Di s RC，我还是引入一下，点一个S，下边一个A6点MP3。我们直接看在这，我一刷新没有写controls。CS啊，然后在这这是IE edge，我这是edge是吧，IE11它是可以支持的，我怎么试IE8呢，在IE里你点F12出现这么一个控制台，我们开发者工具在这儿，你看是一个浏览器的状态，现在是模拟的age啊，我这就就是默认就是age啊，我这一点开。

我是不是可以选择爱10I19，还有。IE8呀，所以我一选择IE9，现在它就是以IE9的模式在运行这个音乐啊，I9的形式，现在我如果点击IE8。有没没有因为爱一巴压根就不支持这个东西，不仅不支持这是么？给你还给还给你报错了，哎你看哎请啊upgrade your browse请升级你的浏览器，这个浏览器干嘛呀，不支持啊这个哦刷新。这跟那没关系啊，这个是我们那个插件的问题啊，我们不管它，但是总之这个标签现在在我们IE8里没显示出来，那证明什么？证明IE8并不支持这个东西，但是其实这样体验就不好了，你看age里边出这么一大家伙，对吧？在我们的IE10里边出这么一小细条，在IE9里边呢，就出这么一条A9跟20是一样的，A那稍微大一点，但是一到IE8里干嘛呢？什么都没有了。

什么都没有了，所以这个时候我们其实希望什么效果呢？我们希望的一个效果是你如果IE8不支持，你别什么都没有，你给我一个提示，你告诉我不支持，然后我下边我可以自己换一个浏览器，对吧？你告诉我这个问题你别藏着不说，所以这个时候我们要怎么解决这问题呢？哎，在解决这个问题之前，我们先说一个其他问题啊，我们先提一嘴省的，待会儿我忘了A置里边我们打开浏览器，它的播放器是这样的，哎呀，这个播放器是这种WIN10的风格还是什么风格，反正就是好丑是吧，特别的丑，在我们的Chrome里呢，是这种风格，很明显这种风格我们能不能用，这两种我们都不能用，为什么？因为你用完了以后，在不同的浏览器里显示效果不一样，这就很难受了，所以我们一直在强调这个问题，你长这样没事，长这样也没事儿，怕的是什么？怕的是你长的不一样啊，怕的是你长得不一样，所以这两种东西我们都不能用啊，所以真正我们要做的时候。

我们这个玩意儿，我们要通过什么呀，通过我们的CSS来改变它的样式，让他们找的是统一的一个模样，而且找完CS在不行，我还得通过GS把它那些功能给它加上，所以这是一个比较比较大的一个工作量，现在我们先不管它，但是你要你了解一下我们的播放器的一个一个这个格式化，一个美观，一个这个装饰，它是一个需要我们整完GS才能涉及到的内容啊，整完GS。好，那接下来再说这个IE8的问题，现在IE8不支持就什么都没有了，很体验很不好，那怎么办呢？来我们来说一下，在这我们先给他注掉。现在我们的A6，我们的src，我们这个音频文件是通过src指令的，那除了通过src指令的，我们还有一种方式，我直接来一个a u Di s RC，我这不写了，呃，我把这CTRL啊CTRL写上，然后在这里边我们来注意，诶除了通过什么呢？过我们这个src来指定我们这个外部文件的路径以外，我们还可以什么呢？诶我们还可以通过我们这个source so source来指定我们这个文件的一个路径，所以在这儿我就可以直接给他指定一个，指定一个什么呢？指定一个source source里边我就直接写一个这个SLC，还是刚才那个路径，我们叫做一个，诶点鞋盖，点鞋盖下的S下的A6，点MP3这一保存，你看这效果是不一样的呀。

哎，效果是一样的，所以注意我的这两种写法，这种写法和这种写法他们两个的效果是一模一样的，但是同学可能说老师你这么写不是神经病吗？效果一样，但是明显第二种很麻烦对吧？很麻烦哎，那他对IE8是不是就很友好，是不是IE8就支持了，哎，那注意这种写法，IE8同样不支持，诶IE9你看没有问题对吧？能出来就没问题，IE8同样也是不支持，诶那同学说老师你这疯了是吧，不支持你写它干嘛？诶注意不支持是不支持，但是这种型号我可以处理一下，我怎么处理呢？我可以在这儿写一个内容，我写什么呢？诶，我写一个，诶对不起，您的浏览器不支持，诶播放音频啊，您的浏览器不支持播放音频，请什么呢？请升级浏览器，那这个东西你注意在我们的Chrome里，或者说是在我们支持A标签的这个浏览器。

地理它是能识别这个标签了，所以他看到这个标签以后，它会自动去里边去找source，找source它就直接去播放那个音乐了，而对于不支持的浏览器，它认不认识A标签，不认识，不认识A也不认识sources，它会自动把这个两个标签给你忽略，但是标签能忽略文字，能不能忽略文字就不忽略了。所以我这么写的一个效果就是支持的浏览器会显示播放器，而对于不支持的浏览器，像IE8它就显示什么显示文字，懂这意思吧，那这样等于说如果你的浏览器不支持这个东西，它就会给你显示一个提示文字，而支持的那就支持就完事了，不支持的给你显示一个提示文字，相比较来说就比较的友好了，啊，比较友好了，那这是一个特点，还有一个什么特点呢？你注意我现在的这个音频是通过。

指定的，那也就是说我在这里边，我实际上可以指定多个SOS标签，我可以写多个so标签，我这儿来一个，我再写一个src，我这是不是还有一个音频文件叫A6.ogd啊，诶a.OGD，我们直接来一个点一个source，下边一个A6.ogt，那我这可以同时指定多个文件，那我指定多个文件有什么用？这个东西其实现在的意义并不是特别大，但是之前的话其实还挺重要的，为什么重要呢？因为还是兼容性的问题，因为在我们的其实现在也有这种情况，就是不同的浏览器，它所支持的音频文件的格式不一样，比如说MP3这个文件，可能chome支持，可能你换到比如说我们这个谷歌的这个，这个苹果的这个叫呃，Survivor这个浏览器可能这个MP3就不支持，它可能就支持o dt，但是现在新版的都没这问题的，老版呢很早。

以前呢，可能会存在一个问题，但是现在基本上MP三都支持了，但是之前会存在这种情况，那就不可避免的有一些浏览器它可能不支持MP3这格式，那这个时候我们就可以通过sources，我同时指定多个文件，那有什么好处？注意这两个文件不会同时使用，他会干嘛呢？他会优先使用第一个，如果第一个能用，OK，直接用就完事了，如果第一个不能用怎么办？他会用第二个啊，那第二个能用就用，第二个也不能用，那是不是就出现这个字儿了啊，就出现这个字，所以这个时候就有效的解决了我们浏览器间的一个兼容的问题，就这么写，基本上所有浏览器都支持了，现在主要就这两个格式，一个是MP3，还有一个是OGD mp3基本上大部分浏览器，90%浏览器都解决了这OGD，就处理那些什么样P门的浏览器，所以你这写完了以后，你在我们这没有任何区别，跟刚才写的是一模一样的，但是在有一些不支持IP。

时候这个就可以了啊，这个就可以了，它是一个更严谨的一个代码吧，诶更严谨的一个代码，好这个我们看完了啊，这是一个A6标签啊，A6标签，然后呢，除了A6标签，那你像同学说了，老师你这个东西对IE8不太友好啊，一到IE8里显示这么一个字，你对IE8也未必有点太残忍了，是吧，咱们能不能让IE8也支持这个东西呢？哎，可以，我们有一个标签在IE8 ie8里边用的，我们叫做一个m bed embdmb的这个标签，这个标签比较老了啊叭较老了，这个标签的作用就是干嘛呢？就是在我们老版本的浏览器里边引入一些音频文件呀，视频文件，音视频都行啊，音视频都行，所以这个时候SLC。

我一样的啊一样的，我写一个点斜杠S下边的一个这个A6。ADIO点一个MP3，然后在这我们直接一保存，我刷新一下而已吧。诶你看诶这这这这等于已经响上了，我给它关掉啊，我给它关掉，这已经播放起来了，诶而且你还看这个NBA的这标签是不是自动就播放了，哎自动就播放了啊回到我们IE这我这一刷新，诶我点击允许，诶你看IE8是不是也行了，哎，但是比较缺德的是他用的是Windows自带的那个Windows media去播放的，但是好歹它也可以什么了，也可以放这个标签有好处，它基本上所有浏览器都支持，而且比较缺德，他这玩意儿会什么呀，会自动播放，我看看啊，这自动播放我能不能给它禁掉。

直接找一下NBANBA的，我们来看它有什么属性啊，有什么属性。哎，那看这意思是没有办法进，那这玩意儿就是这么设计的，哎，一上来就自动播放，所以这个东西你这么看的话，其实稍微有点设计不太合理，对吧，有的时候不想自动放，我就想用户点的时候放，那就那就没办法了，对吧？没办法，但是可能有其他办法是吧，在这我就不找了，那我就不找了，但是现在呢，我会发现IE8里边也支持了，但是这时候你第二回再看，你发现有问题了，这播放器的时候，现在变得这么小了，你想停都停不了了，那这也是这个标签一个问题，这个标签呢，你必须给他指定这个什么呀，外还有这个he，比如说外我来一个200HE，我来一个这个50，这时候它才能正常的去显示啊，才能正常显示，所以呢，这个标签啊，非常的不好用啊，非常不好用，你看这这这这已经封了啊三。

买个100。100我给停掉啊，我给停掉，所以这个标签其实用起来不是特别的好用，而且它还有一个缺德的点，如果你要确保它稳定的话，你这个type属性必须得指定，Type是干嘛的，指定我们这个文件的类型的，也就是说你这个播放的文件的类型是什么，这东西怎么写，其实也简单，MP4，哎，写的是AUDIO，然后斜杠一个MP3，这叫这个值，我们叫做一个M值啊M值哎呀呀，太烦人了啊。

这个值我们叫做一个M值，前边这个A表示的是文件的一个具体的一个大的类型，你是A，诶音频你是video视频还是这个image图片对吧？文件的大类型后边是那个鞋带，后边是具体类型，因为音频文件很多格式，什么WV，什么MP3有很多格式，在这指定的是一个具体格式啊，写上就没问题了，但是总之这玩意用起来也很麻烦啊，也很麻烦，但是如果你说我就非得尖上一般那只能采取这种方式啊，只能采取这种方式，但是又产生一个问题，那你你兼容上一八是兼上一八，但是这些浏览器里这是不是老丑了，体验也不是特别好是吧，所以这个标签并不是特别推荐使用，那怎么办呢？那如果想兼容的话，其实我们更希望的是在G这些浏览器里还使用A，而在我们IE8那个浏览器里，我们可以用这个玩意儿，那怎么办呢？哎，你把它呀。

CTRLX放到这个A里。哎，也就是说把它和这个south呀，你给它放一起，放一起的效果呢，还是注意要给它放到这个最后啊，放到最后，那放到最后还是这么一个效果，South这儿支持了，前面有支持的了，这东西是不是就走不到了，哎，走不到了，所以你像chome里边直接就把这玩意儿给忽略了啊，忽略了包括你的IE9他也都会忽略这个东西，对吧？但是IE8什么是S这些东西都不支持啊，所以他这个时候就会找这个，诶ma I，你ma就是可以直接去播放了，但是这时候就出现一个问题，这字是不是还跟这显示挺缺德的呀？哎，那这个时候其实我们想一下，我这个A标签还有没有什么兼容性的问题了，哎，就没有兼容性的问题了，基本上所有浏览题就都支持了，不是基本上就是所浏览题都支持了，所以这时候这句话你就不用再显示了，所以MB和这句话你任选其写着就行啊，写着就行，总之就是为了兼容一些老版本的浏览器，但是现在我们来说，一般情况下这些浏览器我们都不需要兼容了，但是避免。

你以后工作的时候遇到这种情况，我们还是说一下啊，还是说一下好，这个是我们的A6标签，A6标签说完了，接下来我们直接说了，还有一个什么呢？还有一个是我们的VIDEO6 V6，我就直接写了啊还是啊，这种写法我们说了，我通过A6标签的src可以引入，但是一般情况下我们都用S，这种方法是比较比较好的方法，我们较常用的方法，而我们引入视频我们用的是video。我们使用这个video标签，哎，来向我们这个网页中，诶引入一个视频文件啊，引入一个视频文件，这效果是一样的啊，也是我们看一下文档，其实一看文档你一看就明白啊，找一个VI video直接打开。

那你看属性什么auto play controls，有没有loop呀，Loop是不是一样的呀，是一样的啊，所以用起来是一模一样的，也是我这先给它写一个C，然后呢，CS啊，我们通过这个source来引入资源，Source so source里边我们直接来个src，我有两个视频文件，一个是MP4，我直接来一个flower，哎，叫做一个点斜盖source下边这样吧，我引入这么一个web m web m是谷歌推出的一个视频格式，跟那个VIP一样，只不过它是视频格式，也是大小比较小，清晰度比较高这么一个东西啊，所以直接来一个flower，点一个web m，然后我们这一保存，你看我这视频在这儿，我一点击是不是就可以可以去播放啊，可以播放视频了，前面其他的什么路呀，什么都一样啊，它的使用方式。

使用方式和我们这个A。哎，基本上是基本上是一样的啊，基本上是一样的，所以这里边我不多说了啊，不多说了，然后我再说一个问题，就是什么呢？在我们的这个IE里，你像这个webm这个格式在IE9里边，我们看11吧，IE11。看见了吗？写了一个无效源，为什么？就是因为这个格式在IE11里它不支持，所以像这块我们就可以体现出这个问题了，所以我们这里边就需要写两个造字，一个是web m，一个是MP4，那这样的效果就是你像y webm写前面了，那OK，它支持web m，它就会播放这个web m的，而我们的这个Chrome浏览，这个IE浏览器不支持webm，它就会播放谁呢？诶播放我们这个MP4这个格式的啊，但是一般其实MP4会用的比较多，因为它的兼容性比较好，一般也不整俩格式对吧，整俩格式但是啊。

还是那个问题，IE8呢，它。不支持啊，没有没有解决起来怎么办啊，解决起来怎么办，一样的。Em bdmb的SLC把这文件你给它。CTRLC粘过来类型的这个就是一个VI do video斜杠，MP4是一个音频文件格式是MP4。那这个时候IE8就也就可以播放。允许。是不是也可以播放了，哎，就这么一个东西啊，所以兼容起来都是一样的，正常浏览器你就用A加source或者是video加S，而不正常的浏览器你就用一个IB，所以基本上这就是一个兼容所有浏览器的一个标准的一个格式啊，标准格式好，关于音频和视频主要点就这么多了，然后我们再补充一些啊，补充一些现在呢，我们引入的音频还有视频文件都是什么呢？

都是我们本地的文件，哎，你看是不是这些文件我都放到我的source下，而source是不是就在我INTRO6下，我们说了intro在我们的项目下，所以等于我现在引入的都是本地文件，而且很明显我这用的都是相对路径啊，相对路径，但是在我们现实的开发中，我们会不会这么做呢？这么做的情况一般比较一般比较少，为什么比较少呢？哎，你要注意了，我们在网上整一个服务器也好，整一个这个网网网线的这种固定IP也好，这些东西都要都要花钱的，诶所以比如你想自己注册一个网站，那这时候你就要需要去可能比较简单的方式，比较方便的方式，你要去百度，百度云啊，什么阿里云对吧，主要是阿里云比较多一点，什么腾讯云，什么京东云，诶像这些云的一个供应商去买服务器，买服务器主要包含什么呢？主要包含两个东西是吧，诶主要。

包括一个是服务器，还有一个是这个带宽网络，也就是说你你你得因为别人要访问你的网络，就等于你在给别人传东西，所以你必须得买网络，别人才能正常去访问你的服务器，就是买宽带嘛，啊买宽带，那这个时候宽带也好，我们的机器也好，它都是要。收钱的可不是免费给你用的，所以你买的时候，包括你的带宽，包括你的这个磁盘空间都是有限的，当然你说我特别有钱，那除外，一般来讲它大小都是有限的，可能小一点，可能二三十个G，对吧，也就这样，但是我们都知道。视频音频这些文件，它是不是会占用比较大的一个内存空间呀，诶比较大的内存空间，而且如果你想让用户看你的视频，播放你的音频不卡的话，你还得必须有一个较好的一个带宽，你的网速得够快，那这些就意味着你要扩容你的磁盘，你要增宽，增大你的宽带，增大你网网络的一个速率，那这都是什么呀。

都是钱，而且这个钱成本还挺高呢，诶你反正你要想满足你用户需求，那你就花钱去吧，反正这钱基本上基本上就你小网站肯定支付支持不起，你特别有钱除外是吧，特别有钱除外，所以一般情况下，我们像音频呀，视频这些东西，我们一般不会直接放到我们的服务器中，而是干嘛呢？诶我们会专门买一些这种第三方的产品，就是说他就是专门负责干嘛呢，负责托管视频，托管音频这些文件的，比如说可能国内比较著名的青牛云，对吧，我可以在那开一个账户，买一个服务，我就可以把我的视频呢传到他的服务器上，然后把那个服务器的链接我直接引过来，我就等于是什么，我本地服务器是没有压力的，压力都在我那边买的服务器的压力，但是那也得花钱，但是相比来说你扩容服务器那个成本就要小很多了啊，就要小很多了，所以一般情况下我们不会往我们本地去放文件，像这种形式很少。

少啊，很少很少，因为带宽磁盘都有限，但是有同学可能说，老师难道就没有什么？不用花钱的方式吗？也有也有，因为现在我们是不是有很多这种视频网站呀，哎，什么优酷啊，什么腾讯呀，有很多视频网站，还有一种方式，我们可以把我们的视频传到这些视频网站，然后呢，把这些视频网站的那个页面引进来也可以，那这是怎么做的，这非常简单，举个例子啊，举个例子，我直接打开网页，我找一个这个腾讯视频。腾讯视频我直接点开啊，随便找一个基本上都一个套路啊，点一个电视剧吧，点开以后他在这儿开始播放这个电视剧，你要注意每一个这个播放的位置，它都会有一个分享，你看到了吗？诶分享分享这有一个复制页面地址，这还有一个复制通用代码，如果你想把这个视频插入到你的网页里，直接点那个啊，一复制，然后关掉了就可以啊，把这段代码直接粘到你的页面中，CTRLV。

然后你在这儿。在你的网页当中就可以对这个视频进行播放，看到这个效果了吗？诶你说老师太小了，太小了，你可以直接来什么呢外，比如说我来一个500哎，Hi，我们来一个这个300哎。那这时候是不是就就大了呀，哎，你想给他调多少，你就可以直接给他调多少这么一效果，那这个时候其实你是在访问腾讯的服务器，对你的本地服务器是没有任何的，没有任何压力的啊，没有任何压力的可以自己尝试一下，对吧？用这种方式他怎么引的啊，他怎么引的，你看其实很简单，用的是谁呀？诶用的就是我们那个f frame啊，用的就是我们那个f frame，把腾讯的页面引用到我们的网页啊，不用占用我们的，诶带宽和这个磁盘空间，直接占用服务腾讯的，而且还不花钱，这是一个比较简单的方式，但是也有缺点。

比较low，诶什么low呢，你一放着还显示着腾讯的东西是吧，相对相对来说有点有点难看啊，有点难看，但是这个就是一个你没有办法的办法是吧，那一般情况下，如果是自己想放自己的有自己风格的，那我们就要购买一些这种云服啊云服好，这个是我们这个A6，还有一个VIDEO62个标签，主要是引入音视频，还有音频的两个标签，呃，用法呢不难，但是我们要考一些兼容性的问题，而且实际上用法不难，但是真正用好了还有点难度，但是现在还不产生这个问题，等以后我们学GS，学完CSS，这个问题就会比较明显，因为我们要通过JS，通过CSS对这些页面进行一个美化，好我们先说这么多，听一下。