随笔 - 54,  文章 - 0,  评论 - 0,  阅读 - 13063

HTML5多媒体的特性

在HTML5语法中,<video>标记用于页面添加视频,<audio>标记用于为页面添加音频。

多媒体的支持条件

在实际操作中要考虑视频、音频编解码器,以及浏览器支持等多种因素。

视频和音频编解码器

视频编解码器

 定义了多媒体数据流编码和解码的算法,其中编码器主要是对数据流进行编码操作,用于存储和传输。解码器主要是对视频文件进行解码。

音频编解码器

定义了音频数据流编码和解码的算法,其工作原理与视频编解码器一样。

嵌入视频和音频

1.在HTML5中嵌入视频

在HTML5中,video元素用于定义播放视频文件的标准,它支持3种视频格式,分别为Ogg、WebM和MPEG4,其基本语法格式如下:

<video src="视频文件路径" controls="controls"></video>

 

controls属性用于为视频提供播放控件。

下面通过一个案例来演示嵌入视频的方法:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>在HTML5中嵌入视频</title>
    </head>
    <body>
        <video src="video/pian.mp4" controls="controls" width="200px" height="200px">浏览器不支持video元素</video>
    </body>
</html>
复制代码

 

运行效果如图所示:

 

 在video元素中还可以添加其他属性,具体如表所示:

属性 描述
autoplay autoplay 当页面载入完成后自动播放视频
loop loop 视频结束时重新开始播放
preload preload 视频在页面加载时进行加载,并预备播放;如果使用“autoplay”则忽略该属性
poster poster 视频缓冲不足时,该属性值链接一个图像,并按照一定比例显示出来

2.在HTML2中嵌入音频

在HTML5中,audio元素用于定义播放音频文件的标准,它支持3种音频格式,分别为Ogg、MP3和Wav,其基本语法格式如下:

<audio src="音频文件路径" controls="controls"></audio>

 

下面通过一个案例来演示嵌入式音频的方法:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>在HTML5中嵌入音频</title>
    </head>
    <body>
        <audio src="audio/1.mp3" controls="controls">浏览器不支持audio元素</audio>
    </body>
</html>
复制代码

 

运行效果如图所示:

 

audio的其他属性与video类似。

3.音、视频中的source元素

为了使音、视频能够在各个浏览器中正常播放,往往需要准备多种格式的音、视频文件。在HTML5中,使用source元素可以为video元素或audio元素提供多个备用文件。运用source元素添加音频的格式如下:

<audio controls="controls">
    <source src="音频文件地址" type="媒体文件类型/格式"/>
    <source src="音频文件地址" type="媒体文件类型/格式"/>
    ……
</audio>

 

  • src:用于指定媒体文件的URL地址
  • type:指定媒体文件的类型

 

设置视频的宽和高

运用width和height属性可以设置视频文件的宽度和高度:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css控制视频的宽和高</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 600px;
                height: 300px;
                border: 1px solid #000;
            }
            video{
                width: 200px;
                height: 300px;
                background: #f90;
                float: left;
            }
            p{
                width: 200px;
                height: 300px;
                background: #999;
                float: left;
            }
        </style>
    </head>
    <body>
        <h2>视频布局样式</h2>
        <div>
            <p>占位色块</p>
            <video src="video/pian.mp4" controls="controls">浏览器不支持video标签</video>
            <p>占位色块</p>
        </div>
    </body>
</html>
复制代码

 

运行效果如图所示:

HTML5音、视频的方法和事件

1.video和audio元素的方法

方法 描述
load() 加载媒体文件,为播放做准备。通常用于播放前的预加载,也会用于重新加载媒体文件
play() 播放媒体文件。如果视频没有加载,则加载并播放;如果视频是暂停的,则变为播放
pause() 暂停播放媒体文件
canPlayType() 测试浏览器是否支持指定的媒体类型

2.video和audio元素的事件

事件 描述
play  当执行方法play()时触发
playing 正在播放时触发 
pause 当执行了方法pause()时触发 
timeupdate 当播放位置被改变时触发 
ended 当播放结束后停止播放时触发 
waiting 在等待加载下一帧时触发 
ratechange 在当前速率改变时触发 
volumechange 在音量改变时触发 
canplay 以当前播放速率,需要缓冲时触发 
canplaythrough 以当前播放速率,不需要缓冲时触发
durationchange 当播放时长改变时触发 
loadstart 在浏览器开始在网上寻找数据时触发 
progress 当浏览器正在获取媒体文件时触发 
suspend 当浏览器正在获取媒体文件时触发,且文件获取并没有正常结束时触发 
abort 当中止获取媒体文件时触发(不是由错误引起的) 
error 当获取媒体过程中出错时触发 
emptied 当所在网路变为初始化状态时触发 
stalled 浏览器尝试获取媒体数据失败时触发 
loadedmetadata 在加载完媒体源数据时触发 
loadeddata 在加载完当前位置的媒体播放数据时触发 
seeking 浏览器正在请求数据时触发 
seeked 浏览器停止请求数据时触发 
posted on   心有所信方能行远  阅读(36)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示