HTML5多媒体audio和video详细介绍(一)


本文摘自PHP中文网,作者黄舟,侵删。

通常浏览器通过安装flash来实现网页音视频的播放。
HTML5新增了audio和video元素来进行音视频的播放,从而减少了对flash的依赖。

audio对音频的支持

HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
目前audio元素支持以下三种音频格式:

音频格式IE9Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0
Ogg VorbisNOYESYESYESNO
MP3YESNONOYESYES
WavNOYESYESNOYES

video对视频的支持

HTML5 规定了一种通过 video 元素来包含视频的标准方法。
目前video元素支持以下三种视频格式:

格式IEFirefoxOperaChromeSafari
OggNo3.5+10.5+5.0+No
MPEG 49.0+NoNo5.0+3.0+
WebMNo4.0+10.6+6.0+No

audio和video播放音视频实例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!Doctype html>

<html>

<head>

<title>HTML5多媒体</title>

<meta charset="utf-8"/>

</head>

<body>

    <p>

        <audio id="myAudio" controls="controls">

            <source src="resource/传奇.mp3" type="audio/mpeg">

            您的浏览器不支持audio       

            </audio>

    </p>

 

    <p>

        <video id="myVideo" controls="controls">

            <source src="resource/手语.mp4" type="video/mp4">

            您的浏览器不支持video       

            </video>

    </p>

    </body>

    </html>

上面是最简单的播放音频和视频的示例代码,当然mp3和mp4资源文件要自己找啦~
下面是我的示例代码运行效果,音频和视频都播放起来了!
这里写图片描述

【相关推荐】

1. 详解html5的video标签测试应用

2. html 5中使用video元素制作一个影片播放器

3. 分享一个video标签无法播放mp4的问题以及解决方案

4. H5 video标签只能放声音不能放视频的解决办法

5. IIS的MIME未注册MP4类型,导致无法识别vidoe标签的解决办法

以上就是HTML5多媒体audio和video详细介绍(一)的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

HTML5实践-可伸缩的mobile搜索框图文详解

关于HTML5如何在canvas中插入图片的示例详解

详细分析HTML5 formdata对象的使用

移动端h5中百度地图的click事件的介绍(代码示例)

详解HTML5实现微信拍摄上传照片的功能

HTML5 css 需不需要js

HTML5中websocket是什么意思

HTML5新特性之webrtc详解

HTML5 data-* 自定义属性实例分享

HTML5离线存储知识详解

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...