详解 HTML5 中的声频 Audio 和视频 Video 使用 - 文章教程

详解 HTML5 中的声频 Audio 和视频 Video 使用

发布于 2019-12-15 字数 2793 浏览 1233 评论 0

HTML5 作为下一代 Web 标准,年前轩起了 HTML5 热潮。对于 HTML5 我只是本着了解看看。关于 HTML5 和 RIA(silverlight,flash,JavaFx等)我不想说什么,也没有什么可说的,存在就有其存在的理由。孰优孰劣,留给事实、时间来证明的。

详解 HTML5 中的声频 Audio 和视频 Video 使用

HTML5 新特性

在 html5 中出现了一些新特性:

  • canvas 元素
  • 视频 video 和声频 audio 元素 ;
  • 对本地离线存储(localStorage,sessionStorage)的支持 ;
  • 新增特殊内容元素:article、footer、header、nav、section ;
  • 新增表单控件: calendar、date、time、email、url、search 。

今天看看视频和声频:在html5中规定了视频的标准方法:video

<video src="xxx.ogg" controls="controls">你的浏览器还不支持哦</video>

我们也可以设置多个 source,浏览器会为我们选择第一个可识别的视频来播放,形如:

<video width="320" height="240" controls="controls">
  <source src="xxx.ogg" type="video/ogg">
  <source src="xx1.mp4" type="video/mp4">
  你的浏览器还不支持哦
</video>

Video属性

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height 像素 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用
“autoplay”,则忽略该属性。

src url视频地址 要播放的视频的 URL。
width 像素 设置视频播放器的宽度。
autobuffer Autobuffer

(自动缓冲)

在网页显示时,该二进制属性表示是由用户代理(浏览器)自动缓冲的内容,还是由用户使用相关API进行内容缓冲
poster url图片地址 当视频未响应或缓冲不足时,该属性值链接到一个图像。该图像将以一定比例被显示出来

在HTML5 规定了声频标准为 audio 元素,audio 元素能够播放声音文件或者音频流。

Audio格式和Video相似,直接行多Source:

<audio controls="controls">
  <source src="xx.ogg" type="audio/ogg">
  <source src="xx1.mp3" type="audio/mpeg">
  你的浏览器还不支持哦
</audio>

其属性比 video 少了 height、width、poster,在我们的开发中多媒体越来越重要,html5 出现了这些 video 和 audio。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论