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

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

理解媒体元素

1、基本操作:声明媒体元素

XML/HTML Code复制内容到剪贴板

您所使用的浏览器不支持HTML5 audio

代码中的controls 特性是告诉浏览器显示通用的用户控件,包括开始、停止、跳播以及音量控制。如果不指定controls属性,用户将无法播放页面上的音频。

2、使用source元素

最简单的情况下,src属性直接指向媒体文件就可以了,但是,万一浏览器不支持相关容器或者编码器呢?这就需要用到备用声明了。备用声明中可以包含多种来源,浏览器可以从这么多的来源中进行选择:

XML/HTML Code复制内容到剪贴板

对于来源,浏览器会按照声明顺序判断,如果支持的不止一种,那么浏览器会选择支持的第一个来源。

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使用视频作为绘制来源时,画出来的只是当前播放的帧。


相关文章

  • 浅谈常用工具软件在微课制作中的应用
  • 本文发表于 <数字教育> 2017年第3期(总第15期)实践案例栏目,页码:66-70.转载请注明出处. 摘 要:微课是近几年教育领域的研究热点.目前,微课制作大多采用简单的PPT 录屏形式,其实还有很多种方法可供教师选择.本文列举了七种常用工具软件在微课制作中的应用,并以Focusky ...

  • Java开发中的关键技术
  • 1. servlet 技术 Servlet (Server Applet),全称Java Servlet.是用Java 编写的服务器端程序.其主要功能在于交互式地浏览和修改数据,生成动态Web 内容.狭义的Servlet 是指Java 语言实现的一个接口,广义的Servlet 是指任何实现了这个Se ...

  • 小学五年级信息技术教学设计
  • 第一单元 制作多媒体演示文稿 一. 教材分析: 本单元通过前面的阅读与思考环节中的西洋镜的引入来引出本单元要学习的工具-Powerpoint2000.本单元是五年级上册的第一单元内容,主要是通过Powerpoint2000的学习,掌握Powerpoint2000制作的方法.这一单元主要是操作类型的课 ...

  • 未来的网络技术
  • 每到年底,众多信息分析机构总会提出未来一年新的技术发展趋势.2013年,业界普遍认为将有六大应用技术从移动.云端与信息等多领域中逐渐兴起.下面我们就分别看一下到底是哪些技术,将怎样改变我们的生活. 无处不在的物联网 物联网被称为继计算机.互联网之后世界信息产业发展的第三次浪潮.维基百科对物联网的概念 ...

  • 初二信息技术下册教案
  • 初二信息技术下册教案 第一单元 多媒体素材的采集与处理 一.单元概述 本单元是多媒体作品制作的基础,目的是让学生系统地了解多媒体素材的采集与处理方法,对已掌握的采集与处理方法加以规范和提升,为在多媒体作品中的应用做好准备:培养学生的信息素养,提高他们对信息的判断.采集.处理.提取的综合能力. 二.教 ...

  • 跨平台移动应用开发课程
  • 跨平台移动应用开发课程 方案6 一. 课程概述 1.HTML5新特性介绍 2.HTML5究竟有哪些改进? 3.HTML5离线存储.绘图画布.原生态视频和音频流支持? 4.HTML5几何定位? 5.企业应用开发中还会经常用到哪些实用工具和方法? 针对以上疑问,本课程围绕企业应用的实际案例,通过对照剖析 ...

  • 青岛出版社初一年级信息技术教案
  • 第9课时 第三单元 第1课亲密接触多媒体 学习目标 (一) 知识目标 1. 理解多媒体技术的含义:2. 掌握图形.图像的获取方法: 3. 掌握图形图像加工工具的功能特点. (二) 技能目标1.学会利用屏幕截取获取图像:2.能根据需要选择图像处理 软件. (三) 情感态度与价值观目标1.体验多媒体技术 ...

  • 论文-餐饮管理系统
  • 邯郸学院本科毕业论文(设计) 题 目 餐饮管理系统 学 生 XXX 指导教师 XXX 讲师 年 级 2011级 专 业 网络工程 二级学院 信息工程学院 邯郸学院信息工程学院 2015年5月 郑重声明 本人的毕业论文(设计)是在指导教师贾利敏的指导下独立撰写完成的.如有剽窃.抄袭.造假等违反学术道德 ...

  • 小米4对比华为P7全面评测:究竟谁更胜一筹?(多图)
  • 导读: 相信大家在华为荣耀6出来以后就忘了华为之前发布的华为P7吧,的确,搭载了自家海思麒麟920的华为荣耀6不负众望,性价比也是杠杠的,但是华为P7同样是一款值得拿来与小米4一较高下的产品,今天一起来看看当小米4遇到华为P7,会擦出怎样的火花吧! 关键字小米4  华为P7  荣耀6  海思麒麟92 ...

© 2024 范文中心 | 联系我们 webmaster# onjobs.com.cn