H5新增多媒体标签

最新推荐文章于 2024-04-25 18:38:08 发布

CLAM-

最新推荐文章于 2024-04-25 18:38:08 发布

阅读量158

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_42306826/article/details/115048417

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

H5新增多媒体标签

多媒体标签包括两个

音频：- - - < audio >
视频：- - - < video >
使用他们很方便的在页面中嵌入音频和视频，再也不用使用落后的flash和其他浏览器插件

audio标签说明

可以在不使用标签的情况下，能能够原生的支持音频格式文件的播放，但是，播放格式是有限的。

audio目前支持三种格式

格式	IE9	火狐3.5	opera10.5	Chrome3.0	Safari3.0
ogg		√	√	√
mp3	√			√	√
wav		√	√		√

audio的参数

属性	值	描述
autoplay	autoplay	音频在就绪后马上播放
controls	contrlos	向用户展示该控件
loop	loop	循环播放
src	url	要播放的url

案例：

<body>
    <!-- 谷歌浏览器把autoplay属性禁用了 -->
    <audio src="./media/阿信 - 哄我入睡.mp3" autoplay loop controls="controls"></audio> 
    <!-- 因为不同浏览器支持不同格式，我们采取的方法的解决方案是 我们为这个音频准备多个格式 -->
    <audio controls>
        <source src="./media/阿信 - 哄我入睡.mp3" type="audio/mpeg">
        <source src="./media/阿信 - 哄我入睡.ogg" type="audio/ogg">
            您的浏览器不支持audio播放
    </audio>
</body>

video视频标签

目前支持的三种格式

格式	IE9	火狐	opera	Chrome	Safari
ogg	NO	3.5	10.5	5.0+	NO
MP4	9.0+	NO	NO	5.0+	3.0+
wwbm	NO	4.0+	10.6+	6.0+	NO

video的参数

属性	值	描述
autoplay	autoplay	视频在就绪后马上播放(谷歌需要静音[muted]播放)
controls	contrlos	向用户展示该控件
width	px	设置播放器宽度
height	px	设置播放器高度
preload	auto/none	是否预加载，如果有autoplay属性则忽略
loop	loop	循环播放
src	url	要播放视频的url
poster	imgurl	加载等待的画面图片
muted	muted	视频静音

案例：

<body>
    <!-- <video src="./video/1.mp4" controls></video> -->
    <!-- 兼容格式处理 -->
    <!-- 谷歌浏览器把自动播放禁用了  有解决方案 -- 给视频加静音属性（muted） -->
    <video autoplay muted loop>
        <source src="./video/1.mp4" type="video/mp4">
        <source src="./video/1.ogg" type="video/ogg">
            浏览器不支持此视频播放
    </video>
</body>