<meta name="keywords" content="华夏棋牌,HTML5,音频,视频" />
华夏棋牌 > web前端 > H5教程 > 注释

HTML5中的音频和视频媒体播放元素小结_html5教程手艺

原创 2016-05-16 15:45:57 0 138
赞助会员专享特权
音频和视频的编码/解码器是一组算法,用来对一段特定的音频或视频流阻拦编码息争码,以便音频和视频能够播放。原始的媒体文件体积异常年夜,假定纰谬其阻拦编码,那么组成一段视频和音频的数据能够会异常宏年夜,以致于在因特网上撒播需消耗没法忍耐的时间。若没有解码器的话,吸收方就不克不及把编码过的数据重组为原始的媒体数据。编解码器可以读懂特定的容器名堂,而且对其中的音频轨道和视频轨道解码。
明确媒体元素
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应用视频作为绘制泉源时,画出来的只是以后播放的帧。 php中文网最新课程二维码
  • 相关标签:HTML5 音频 视频
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 若何应用input事宜来监听移动端的输入_html5教程手艺
  • 深刻剖析HTML5 Canvas控制图形矩阵变换的措施_html5教程手艺
  • 实例解说应用SVG制造loading加载动画的措施_html5教程手艺
  • 实例解说应用HTML5 Canvas API操作图形改变的措施_html5教程手艺
  • HTML5中的音频和视频媒体播放元素小结_html5教程手艺
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(173551)

    独孤九贱(4)_PHP视频教程

    华夏棋牌江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(169675)

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(137125)

    ThinkPHP5实战之[教授修养治理系统]

    本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(130418)

    PHP入门视频教程之一周学会PHP

    华夏棋牌一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(129775)

    作者信息

    php中文网

    认证0级讲师

    比来文章

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节