HTML插入视频和音频(详解)-Toy模板网

这篇具有很好参考价值的文章主要介绍了HTML插入视频和音频(详解)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

🧀一，简介

HTML5未出来之前，在线的音频和视频都是借助Flash或者第三方工具实现的，现在HTML5也支持了这方面的功能。在一个支持HTML5的浏览器中，不需要安装任何插件就能播放音频和视频。原生的支持音频和视频，为HTML5注入了巨大的发展潜力。

html实现音频嵌入(传统方式)：这种方式虽然可以实现，但是要浏览器支持Flash而且并不能实现控制，所以要实现起来很麻烦。

<!--传统的视频插入方式-->
<object data="视频地址" ></object>

<embed src="视频地址" type="">

那么也就是说HTML5存在一个很大的问题就是兼容性。

🧀二，视频(video)

HTML5在不适用插件的情况，也可以原生的支持视频格式文件的播放，当然支持格是有限的。

在网页中如果看原网页的话，可以发现很多时候引入的视频文件有好几个格式，因为兼容问题，不同的浏览器支持不同的格式而已，目前只支持三个格式，MP4，WebM，Ogg。浏览器支持的格式：

浏览器	MP4	WebM	Ogg
IE	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES	YES	YES

所以为了兼容性更好，一般都使用 mp4 格式。

🍧1，普通的视频插入

具体格式：

<video src="视频地址" controls="controls"></video>

但是为了兼容有些浏览器不兼容，不支持video标签如下写：

<video width='320' height='240' controls="controls">
    <source src="视频地址" type="type/mp4">
    <source src="视频地址" type="type/ogg">
</video>

video的属性值：

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。但是谷歌浏览器需要添加muted来解决自动播放问题。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音。
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload	auto：预先加载视频。 none：不应加载视频	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。
…	…	…

如果只是单独的引入资源，虽然引入但是没有播放效果。

<video src="video/林俊杰%20-%20不潮不用花钱.mp4">
    林俊杰，不潮不用花钱MV
</video>

HTML插入视频和音频(详解),HTML,html,音视频,前端,超链接

<video src="video/林俊杰%20-%20不潮不用花钱.mp4" controls="controls">
    林俊杰，不潮不用花钱MV
</video>

HTML插入视频和音频(详解),HTML,html,音视频,前端,超链接

有些网页中的视频一打开就自动部分，可以添加controls，muted属性实现自动播放


<video src="video/林俊杰%20-%20不潮不用花钱.mp4" 
controls="controls" autoplay="autoplay" muted="muted">
    曲婉婷,我的歌声里MV
    
</video>

还有很多产品网页视频在不停的循环播放，那个就需要loop属性了。


<video src="video/林俊杰%20-%20不潮不用花钱.mp4" 
controls="controls" autoplay="autoplay" muted="muted" loop="loop">
  曲婉婷,我的歌声里MV
</video>

还有一个属性，那就是网速不够好，加载视频需要时间，如果单独看一个加载界面很难，所以就需要一个等待图片。


<video src="video/林俊杰%20-%20不潮不用花钱.mp4"
       controls="controls" autoplay="autoplay" muted="muted" loop="loop"
       poster="图片地址">
     曲婉婷,我的歌声里MV
     
</video>

以上有video的属性值表，诺有不明白的地方可以看属性描述

🍧2，在html5中嵌入视频网站视频

比起运用“video”元素播放本地视频，直接嵌入视频网站的视频是一种既帅气又酷炫的方式。之前一直找不到正确方法把视频网站的视频嵌入html5，后来偶然解锁了嵌入视频的标准姿势，简单到比你想象的还简单，甚至不用写代码。

下面是正文，这里以bilibili和YouTube(需要科学上网)为例

第一步：
访问bilibili，然后随便找一个视频，将鼠标悬停在“分享”上

HTML插入视频和音频(详解),HTML,html,音视频,前端,超链接

第二步：
在“嵌入代码”一栏点击“复制”，然后打开html文件，把代码复制进去，
记住要在视频地址前加上"https:"然后手动添加“width"和"height"特性

HTML插入视频和音频(详解),HTML,html,音视频,前端,超链接


<iframe src="//player.bilibili.com/player.html?aid=366435053&bvid=BV1u94y1n72F&cid=1344766911&p=1"
        width="100%" height="500" scrolling="no" border="0" frameborder="no"
        allowfullscreen="true">
        
</iframe>

使用youtube的嵌入方式，先找一个youtube视频，然后照例点击分享，再点击嵌入

然后把代码粘贴到html文件中，YouTube的嵌入代码不需要做任何修改，如果嫌太小，修改一下"width"和"height"特性的值就可以了。

这里起始于BiLiBiLi 的嵌入方式，并无太大差别，照做即可实现

网络上流传的"bilibili视频需要找‘aid’和‘cid’“还有什么YouTube视频要借助"YouTube API"其实完全没必要。以上所说的方法完全不涉及编程知识，相当傻瓜，省时省力。
国产其他视频平台的嵌入方法也大同小异，类似"优酷”,"爱奇艺"也都支持类似的代码嵌入，只不过现在bilibili在一定程度上已经战胜了其他平台，更多的网站也选择使用bilibili。而在国外，这种YouTube视频嵌入法也被诸多公司的网站采用，可以说范围相当广泛了。

🧀三，音频(audio)

音频也是支持三种格式：mp4,Wav,Ogg.

当然也有支持：

浏览器	MP3	Wav	Ogg
IE	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

所以一般的时候音频文件都使用mp3.

格式：


<audio src="音频地址" controls="controls"></audio>

当然为了兼容低版本可以如下写：


<audio width='320' height='240' controls>
	<source src="音频地址" type="type/mp3">
    <source src="音频地址" type="type/ogg">
</audio>

当然也有其属性：

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	auto：预先加载视频。none：不应加载视频	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。
…	…	…