首页 > web前端 > H5教程 > 正文

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

黄舟
发布: 2017-05-19 16:57:31
原创
2603 人浏览过

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

audio对音频的支持

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

音频格式 IE9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis NO YES YES YES NO
MP3 YES NO NO YES YES
Wav NO YES YES NO YES

video对视频的支持

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

格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

audio和video播放音视频实例

<!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详细介绍(一)的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板