• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5多媒体audio和video详细介绍(一)

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

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5,audio,video等相关知识,匿名希望在学习及工作中可以帮助到您
通常浏览器通过安装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播放音视频实例

<!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知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2017-08-06HTML5中语义化 b 和 i 标签
  • 2018-12-03canvas实现二维码和图片合成的示例代码
  • 2017-08-065 个强大的HTML5 API 函数推荐
  • 2017-08-06html5实现多文件的上传示例代码
  • 2017-09-11H5实现Tab标签切换效果
  • 2018-12-03关于知乎回答问题编辑框用Ctrl+V 粘贴图片是如何实现的详解
  • 2018-12-03HTML5在canvas中绘制复杂形状附效果截图_html5教程技巧
  • 2018-12-03Html5 video 上传预览图片视频,设置、预览视频某秒的海报帧
  • 2018-12-03如何升级H5混合开发的app
  • 2018-12-03web端的应用实现后退强制刷新

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 如果html传输全部使用json, browser 将会快很多?
    • HTML5 Canvas绘制五星红旗
    • HTML5实战与剖析之焦点管理(activeElement和hasFocus)
    • HTML5 语音搜索(淘宝店语音搜素)_html5教程技巧
    • 相比px而言,在响应式web设计中,em有何优势?
    • html5视频播放教程实例
    • 用仿ActionScript的语法来编写html5——第九篇,仿URLLoader读取文件
    • html5中在可拖动元素或选取的文本放置在目标区域时触发的事件ondrop
    • HTML 是怎样一步步被渲染成网页的?
    • HTML5教程之html 5 本地数据库(Web Sql Database)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有