江苏龙网

  1. 主页 > 生活百科 > >

HTML中嵌入视频和音频代码

html

在网页中添加视频、声音、动画等，可以增强用户体验 。在html5之前，为网页添加多媒体的唯一办法，就是使用第三方的插件（如，Adobe Flash等） 。
HTML5中，提供了对多媒体的原生支持，只需通过 video 元素，就可以向网页嵌入视频、电影或音频资源，通过 audio 元素向网页嵌入音频资源，省时省力 。

HTML中嵌入视频和音频代码

文章插图
HTML中嵌入视频和音频代码
一、视频在HTML5时代，在网页中嵌入视频非常简单，只需要一个 video 元素，并设置它的 src 属性，使其链接一个视频地址就可以完全搞定了，这个太esay了
<video src=https://www.isolves.com/it/cxkf/yy/html5/2022-04-19/"media/vedio.mp4">
把这个网站在IE8中打开一看，网站上除了一片空白外，什么也没有，这是为什么呢？
原来 video 是HTML5最新引入的元素，并不是所有浏览器都支持它，IE8及以下版本都无法识别 video 标签 。如果浏览器不识别 video标签，则会忽略它，当做什么都没有 。这就是网站上一片空白的原因 。
这个问题好解决，只需在 video 标签之间放置文本信息，不支持 video 标签的老浏览器，会显示 video 标签之间的文本信息，以提示用户浏览器不支持 video，就这么简单！
<video src=https://www.isolves.com/it/cxkf/yy/html5/2022-04-19/"media/vedio.mp4">
你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！
</video>
在IE8上打开一看，确实显示了提示文本，这下好多了，至少用户知道自己的浏览器不能播放视频，该换浏览器了 。
下载了Opera浏览器的最新版本25.0，打开一看，怎么还是一片空白外！Opera浏览器明明是支持video标签的，那又是为什么呢？
这个就得从视频的编码格式说起了 。video 元素支持三种视频格式：Ogg、MP4、WebM 。
Ogg是带有Theora视频编码和Vorbis音频编码的文件，后缀名为 .ogg；MP4是带有H.264视频编码和AAC音频编码的MP4文件，后缀名为 .mp4；WebM是VP8视频编码和Vorbis音频编码的文件，后缀名为 .webm 。
这个Opera浏览器呢，它可以支持ogg，但不支持mp4 。由于Opera支持video标签，故video标签之间的文本信息没有显示出来，但它不支持ogg，所以就不进行播放，最终导致页面出现一片空白 。这下可怎么办呢？
其实办法有的是，我们可以从网上下载一副图像，放到视频播放窗口，如果视频无法播放，就显示这张图片，是不是更好呢？从网上下载一张美女图片，干脆叫beauty.jpg吧 。那这个图像怎么添加到视频窗口呢？
video标签有个poster 属性，就是专门在视频窗口放置图片的 。poster是一个video的占位符，无论什么情况下，只要视频还没有播放（视频下载过程中、视频不存在、不支持该视频类型、用户点击播放按钮前），就会显示该图像，可以看做是视频播放之前插入的宣传画或海报 。
<video src=https://www.isolves.com/it/cxkf/yy/html5/2022-04-19/"media/vedio.mp4" poster = "img/beauty.jpg">
你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！
</video>
在Opera浏览器上刷新一下，真的有一个美女冲着自己微笑呢 。虽然视频没有播放出来，这回心情却是好多了 。
那我可不能一天到晚只看美女呀，视频还是还是要想办法播放出来的 。既然Opera浏览器不支持mp4，我们就换成需要ogg吧，这样就肯定没问题了 。
我想了想，这个办法不好，万一某个浏览器只支持支持ogg，不支持mp4呢 。这年头，什么都缺，就是不缺点子，随便在网上一搜，办法就有了 。
在 video 元素中添加 source 元素，就可以解决这个问题 。在source 元素中，通过 src 属性指定视频的地址，通过 type 属性指定视频的类型，以帮助浏览器决定是否能播放该视频 。并且，在 video 元素中可以添加任意多个source 元素，让不同的 source 元素链接到不同的视频文件 。
这样的话，当浏览器发现 video 元素时，首先会查看它本身是否定义了 src 属性 。如果没有，就会检查 source 元素 。浏览器会逐个查看这些视频源，直到找到一个可以播放的视频 。一旦找到，就会播放它并忽略其他的视频源 。我们干脆添加两个source，一个是mp4，一个是ogg，这下视频是一定能播放出来了 。
<video poster = "img/beauty.jpg">
<source src=https://www.isolves.com/it/cxkf/yy/html5/2022-04-19/"media/vedio.mp4" type="video/mp4">
<source src=https://www.isolves.com/it/cxkf/yy/html5/2022-04-19/"media/vedio.ogg" type="video/ogg">


推荐阅读


上一篇：过安全狗 记一次艰难的SQL注入

下一篇：金骏眉大红袍,金骏眉品鉴先容