首页 前端知识 HTML插入视频和音频(详解)

HTML插入视频和音频(详解)

2024-05-22 09:05:24 前端知识 前端哥 911 548 我要收藏

📍文章目录📍

  • 🧀一,简介
  • 🧀二,视频(video)
    • 🍧1,普通的视频插入
    • 🍧2,在html5中嵌入视频网站视频
  • 🧀三,音频(audio)

🧀一,简介

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

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

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

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

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

:

🧀二,视频(video)

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

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

浏览器MP4WebMOgg
IEYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESNONO
OperaYESYESYES

所以为了兼容性更好,一般都使用 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的属性值:

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

:

  • 如果只是单独的引入资源,虽然引入但是没有播放效果。
<video src="video/林俊杰 - 不潮不用花钱.mp4">
    林俊杰,不潮不用花钱MV
</video>

在这里插入图片描述

:

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

在这里插入图片描述

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

<video src="video/林俊杰 - 不潮不用花钱.mp4" 
controls="controls" autoplay="autoplay" muted="muted">
    曲婉婷,我的歌声里MV
    
</video>
  • 还有很多产品网页视频在不停的循环播放,那个就需要loop属性了。

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

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

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

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

:

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

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

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

:

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

在这里插入图片描述


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

在这里插入图片描述


<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.

当然也有支持:

浏览器MP3WavOgg
IEYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESYESNO
OperaYESYESYES

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

格式:


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

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


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


当然也有其属性:

属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
looploop如果出现该属性,则每当音频结束时重新开始播放。
mutedmuted规定视频输出应该被静音。
preloadauto:预先加载视频。none:不应加载视频如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。
srcurl要播放的音频的 URL。

因两者使用很类似,就不在演示了。
:

需要注意一下:

  • 谷歌浏览器把音频和视频的自动播放禁止了,所以视频需要添加muted属性。但是音频不能通过muted控制,需要js进行控制。
  • 一般网页中视频经常设置为自动播放,所以不适用controls,当然如果有需要也是通过js来实现,毕竟为了显示的ui统一。

:
OK

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9012.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!