HTML5-多媒体标签

发布时间:2024年01月03日

多媒体标签

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

主流浏览器对音频的支持

格式ChromeEdgeFirefoxSafariOpera
MP3
OGG
WAV

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" poster="../img/a.jpg" autoplay controls loop>
			你的浏览器不支持video标签,请升级到最新版本
</video>

运行结果:

视频格式

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

  • mp4

  • ogg

  • webm

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

格式ChromeEdgeFirefoxSafariOpera
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类型:Media Types

实例

<!-- 显示图片 -->
<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的常用音频/视频属性

属性描述
autoplay设置或返回是否在加载完成后随即播放音频或视频
controls设置或返回音频/视频是否显示默认控制条(比如播放/暂停等)
currentTime设置或返回音频/视频中的当前播放位置(以秒计)
duration返回当前音频/视频的长度(以秒计)
loop设置或返回音频/视频是否应在结束时重新播放
muted设置或返回音频/视频是否静音
paused设置或返回音频/视频是否暂停
readyState返回音频/视频当前的就绪状态
src设置或返回audio/video元素的当前来源
poster设置或返回video元素的封面图片的地址
volume设置或返回音频/视频的音量

HTML5的常用音频/视频方法

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

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

方法描述
canPlayType()检测浏览器是否能播放指定的音频/视频类型
load()重新加载音频/视频
play()开始播放音频/视频
pause()暂停播放当前的音频/视频

HTML5的常用音频/视频事件

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

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

事件描述
ended目前的播放列表已结束时触发
error音频/视频加载期间发生错误时触发
pause音频/视频已暂停播放时触发
play音频/视频已开始播放或不再暂停播放时触发
volumechange音量已更改时触发
progress浏览器正在下载音频/视频时触发
文章来源:https://blog.csdn.net/AIMing_byte/article/details/135328930
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。