HTML5中的音频和视频媒体播放元素小结


Posted in HTML / CSS onJanuary 29, 2016

音频和视频的编码/解码器是一组算法,用来对一段特定的音频或视频流进行编码和解码,以便音频和视频能够播放。原始的媒体文件体积非常大,假如不对其进行编码,那么构成一段视频和音频的数据可能会非常庞大,以至于在因特网上传播需耗费无法忍受的时间。若没有解码器的话,接收方就不能把编码过的数据重组为原始的媒体数据。编解码器可以读懂特定的容器格式,并且对其中的音频轨道和视频轨道解码。
理解媒体元素
1、基本操作:声明媒体元素

XML/HTML Code复制内容到剪贴板
  1. <audio controls src="Adele-Set Fire To The Rain.mp3">  
  2. 您所使用的浏览器不支持HTML5 audio   
  3. </audio>  

代码中的controls 特性是告诉浏览器显示通用的用户控件,包括开始、停止、跳播以及音量控制。如果不指定controls属性,用户将无法播放页面上的音频。
2、使用source元素
最简单的情况下,src属性直接指向媒体文件就可以了,但是,万一浏览器不支持相关容器或者编码器呢?这就需要用到备用声明了。备用声明中可以包含多种来源,浏览器可以从这么多的来源中进行选择:

XML/HTML Code复制内容到剪贴板
  1. <audio controls>  
  2. <source  src="Adele-Set Fire To The Rain.mp3" >  
  3. <source  src="Adele-Set Fire To The Rain.ogg" >  
  4. </audio>  

对于来源,浏览器会按照声明顺序判断,如果支持的不止一种,那么浏览器会选择支持的第一个来源。
3、媒体的控制
在audio元素或video元素中通过设置特性autoplay,不需要任何用户交互,音频或视频文件就会在加载完成后自动播放。
常用的控制函数

函数 动作
load() 加载音频/视频文件,为播放做准备,通常情况下不必调用,除非是动态生成的元素。用来在播放前预加载。
play() 加载(有必要的话)并播放音频/视频文件。除非音频/视频已经暂停在其他位置了,否则默认从头开始播放
pause() 暂停处于播放状态的音频/视频文件
canPlayType(type) 测试video元素是否支持给定MIME类型的文件

只读的媒体特性
只读特性
duration 整个媒体文件的播放时长,以s为单位。如果无法获取时长,则返回NaN。
paused 如果媒体文件当前被暂停,则返回true。如果还未开始播放,则返回false。
ended 如果媒体文件已经播放完毕,则返回true
startTime 返回最早的播放起始时间,一般是0.0,除非是缓冲过的媒体文件,并且一部分内容已经不在缓冲区
error 在发生了错误的情况下返回的错误代码
currentSrc 以字符串形式返回当前正在播放或已加载的文件。对应于浏览器在source元素中选择的文件。

可脚本控制的特性值
特性
autoplay 将媒体文件设置为创建后自动播放,或者查询是否已设置为autoplay
loop 如果媒体文件播放完毕后能重新播放则返回true,或者将媒体文件设置为循环播放(或者不循环播放)
currentTime 以s为单位返回从开始播放到现在所用的时间。在播放过程中,设置currentTime来进行搜索,并定位到媒体文件的特定位置
controls 显示或隐藏用户控制界面,或者查询用户控制界面当前是否可见
volume 在0.0到1.0之间设置音频音量的相对值,或者查询当前音量的相对值。
muted 为音频文件设置静音或者消除静音,或者渐层当前是否为静音
autobuffer 通知播放器在媒体文件开始播放前,是否进行缓冲加载。如果媒体文件已经设置为autoplay,则忽略测特性。

3.1使用audio和video元素
HTML5 video元素同audio元素非常类似,只是比audio元素多了一些特性。
特性
poster 在视频加载完成之前,代表视频内容的图片的URL地址,可以想象一下“电影海报”。该特性不仅可读,而且可以修改,以便更换图片
width、height 读取或设置显示尺寸。如果设置的宽度与视频本身大小不匹配,可能导致居中显示,上下或左右可能出现黑色条状区域。
videoWidth、videoHeight 返回视频固有的或自适应的宽度和高度。只读video元素还有一个audio元素不支持的关键特性:可被HTML5 Canvas的函数调用。

提示:当canvas使用视频作为绘制来源时,画出来的只是当前播放的帧。
HTML / CSS 相关文章推荐
前端制作动画的几种方式(css3,js)
Dec 12 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
html5调用摄像头实例代码
Jun 28 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 #HTML / CSS
Html5 audio标签样式的修改
Jan 28 #HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 #HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 #HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 #HTML / CSS
Html5实现二维码扫描并解析
Jan 20 #HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 #HTML / CSS
You might like
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
Python中Continue语句的用法的举例详解
2015/05/14 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
python绘制简单彩虹图
2018/11/19 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
python实现合并两个排序的链表
2019/03/03 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
python3 实现调用串口功能
2019/12/26 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
Pycharm github配置实现过程图解
2020/10/13 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
大学校园毕业自我鉴定
2014/01/15 职场文书
《画》教学反思
2014/04/14 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
国际贸易实训总结
2015/08/03 职场文书
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android