HTML5-多媒体标签

多媒体标签

audio标签

概念:在页面中插入音频，不同的浏览器对音频格式的支持不一样

语法:

<audio src="音频文件路径" controls="controls" autoplay="autoplay" preload="auto|media|none" loop="loop">
    你的浏览器不支持audio标签，请升级到最新版本
</audio>

说明

常用属性

• src ：音频文件的来源

• controls： 是否显示控制面板，默认不显示

• autoplay： 是否自动播放，默认不自动播放

• loop ：是否循环播放

• muted ：是否静音

• preload ：是否预加载

  • none：不预加载
  • auto： 默认值，预加载
  • metadata：只预加载元数据（即媒体字节数，第一帧，播放列表等)

实例

<audio src="../video/example.mp3" autoplay controls loop></audio>

运行结果

视频格式

对于HTML5音频格式中，主要有3种格式

• MP3
• WAV
• OGG

主流浏览器对音频的支持

source元素

概念:如果想要音频在所有主流浏览器中成功播放，还得做兼容处理。
在HTML5中，可以使用source元素来实现多种格式的音频播放

语法:

<audio>
    <source="audio/MP3" src="文件路径" />
    <source="audio/ogg" src="文件路径" />
</audio>

实例：

<audio  autoplay controls loop>
            <source src="../video/example.mp3" />
            <source src="../video/example.ogg"/>
</audio>

运行结果

video标签

概念:在页面中插入视频，不同的浏览器对视频格式的支持不一样

语法:

<video src="视频文件路径" height="高度值" width="宽度值" poster="视频文件封面的路径" 
  controls autoplay preload="auto|meta|none" loop>
    你的浏览器不支持video标签，请升级到最新版本
</video>

常用属性

• width/height ：视频播放器的尺寸

• poster ：在视频加载前显示的图片

• controls：是否显示控件

• loop：是否循环播放

• preload：是否预加载

  • auto：默认值，预加载
  • metadata：只预加载元数据（即媒体字节数，第一帧，播放列表等）
  • none：不预加载

如果浏览器不支持video元素，就会显示标签中的内容“你的浏览器不支持video标签，请升级到最新版本”。这个提示文字可加可不加.

实例:

<video src="../video/myVideo.mp4" width='400' height="400" autoplay controls loop>
       <!--以上格式都不满足就会显示以下这句话-->
    你的浏览器不支持video标签，请升级到最新版本
</video>

运行结果:

视频格式

对于HTML5，主要有3种视频格式

• mp4
• ogg
• webm

主流浏览器对视频格式的支持程度

source元素

概念:由于不同的浏览器对HTML5的视频格式各不相同，为满足需求，可能需要为视频文件提供多种不同的解码器，所以HTML5提供了一个新的元素source元素

语法:

<video>
    <source src="文件路径" type='video/mp4' media="解码器" />
    <source src="文件路径" type='video/ogg' media="解码器" />
    <source src="文件路径" type='video/webm' media="解码器" />
</video>

属性

• src：视频源的URL
• type：视频源的播放类型
• media：指定视频源所匹配的源码器信息

实例:

<video controls>
            <source src="../video/myVideo.mp4" type="video/mp4">    
            <source src="../video/myVideo.ogg" type="video/ogg">    
            <source src="../video/myVideo.webm" type="video/webm">
       <!--以上格式都不满足就会显示以下这句话-->
            你的浏览器不支持video标签，请升级至最新版
</video>

运行结果

embed标签

概念:

多媒体文件是文本、图像、声音、动画、视频等媒体元素的统称。embed元素可以插入多种格式的多媒体文件，常见的格式有JPG、WMV、WAV、AIFF、MP3等。

语法:

<embed src="url" width="宽度" height="高度" type="类型"></embed

说明

常用属性

• src：文件来源
• width：文件宽度
• height：文件高度
• type：可省略，文件类型

所有的type类型：www.iana.org/assignments…

实例

<!-- 显示图片 -->
<embed src="../img/a.jpg" height="200" width="200" ></embed>
<!-- 显示视频 -->
<embed src="../video/myVideo.mp4" height="300" width="400" ></embed>
<!-- 显示音频 -->
<embed src="../video/example.mp3" height="300" width="400" ></embed>

运行结果

object标签

概念:

object元素可以定义一个嵌入的对象。可以使用object向页面中添加文件。

object支持多种不同媒介类型，如图像、声音、动画、视频等。使用时必须要指定data和type属性。

语法:

<object type="类型" data="文件来源" width="宽度" height="高度">
      <!--无法加载就会显示以下这句话-->
        文件无法显示
</object>

实例

    <!-- 显示图片 -->
        <object type="image/jpg" data="../img/a.jpg" width="200" height="200">
     <!--无法加载就会显示以下这句话-->
            图片无法显示
        </object>
            <br/>
        <!-- 显示视频 -->
        <object type="video/mp4" data="../video/myVideo.mp4" width="200" height="300">
          <!--无法加载就会显示以下这句话-->
            视频无法显示
        </object>
        <!-- 显示音频 -->
        <object type="audio/mp3" data="../video/example.mp3" width="200" height="200">
          <!--无法加载就会显示以下这句话-->
        音频无法显示
        </object>

运行结果

音频与视频相关的属性

HTML5的常用音频/视频属性及描述如下所示，属性用于设置或返回播放的特性。

HTML5的常用音频/视频属性

HTML5的常用音频/视频方法

HTML5的音频/视频方法用于实现音频/视频的某些功能，如音频/视频的加载，播放，暂停播放等。

HTML5的常用音频/视频方法及描述

HTML5的常用音频/视频事件

HTML5中的某个音频/视频事件是在满足某些条件的情况下触发的。如 error 事件是在加载错误期间出现错误时触发的，加载出错时要做什么处理，就把出错程序写在这个事件中。

HTML5的常用音频/视频事件及描述

原文链接：https://juejin.cn/post/7318602430249353250 作者：AI_Ming