音频

1、互联网常用的音频格式

ogg

有损的音频压缩技术

免费的开源音频格式

它可以在相对较低的数据速率下实现比MP3更好的音质

mp3

有损的音频压缩技术

想使用MP3格式发布自己的作品,需要付给发明MP3的公司专利使用费

wav

无损压缩,浏览器支持差

flac

无损压缩

aac

音效速率公式

音效速率水平≈容量(M)× 音效系数(C)÷音乐播放时间

音乐播放时间≈容量(M)× 音效系数(C)÷位速

音效系数每个格式是固定的,比如MP3的音效系数是136kbps/M

2、

格式:

<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg"> </audio>

3、

属性:

属性 值 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新循环开始播放。
preload preload

如果出现该属性,则音频在页面加载时进行加载,并预备播放。

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

src url 要播放的音频的 URL。也可以使用<source>标签来设置音频。

谷歌

火狐

IE9

加载页面后自动、循环播放此URL连接里的音乐

<body>
<audio controls="controls" autoplay="autoplay" loop="loop">
<source src="http://www.w3school.com.cn/i/song.mp3" type="audio/mpeg">
</body>

去掉 controls="controls" 可以达到隐藏播放器的效果,这个挺有意思

<body>
<audio autoplay="autoplay" loop="loop">
<source src="http://www.w3school.com.cn/i/song.mp3" type="audio/mpeg">
</body>

视频

<body>
<video width="800" height="600" controls>
<source src="movie.mp4" type="video/mp4">
</video>
</body>
属性 值 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preload preload

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

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

src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

(5)html音频视频的更多相关文章

  1. iOS 直播-获取音频(视频)数据

    iOS 直播-获取音频(视频)数据 // // ViewController.m // capture-test // // Created by caoxu on 16/6/3. // Copyri ...

  2. iOS 微信 音频 视频自动播放

    iOS 微信 音频 视频自动播放 http://www.w3ctech.com/topic/1165

  3. 【转】android如何浏览并选择图片 音频 视频

    转自:http://www.cnblogs.com/top5/archive/2012/03/06/2381986.html   这几天 在学习并开发android系统的图片浏览 音频 视频 的浏览 ...

  4. HTML5 音频视频

    HTML5 视频和音频的 DOM 参考手册 HTML5 DOM 为 <audio> 和 <video> 元素提供了方法.属性和事件. 这些方法.属性和事件允许您使用 JavaS ...

  5. 第六十六节,htnl音频视频

    htnl音频视频 学习要点:     1.音频和视频概述     2.video视频元素     3.audio音频元素 本章主要探讨HTML5中音频和视频元素,通过这两个原生的媒体元素向HTML页面 ...

  6. 前端笔记之HTML5&CSS3(上)新特性&音频视频&本地存储&自定义属性

    一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...

  7. HTML5媒体(音频/视频)

    摘要: 在HTML5出现之前,web媒体大部分通过Flash来实现.这种方式造成了文件大加载慢,影响网站性能,开发难度高,维护麻烦,不易扩展等.这就导致HTML5自己开始支持媒体功能.HTML5 DO ...

  8. 音频视频解决方案:GStreamer/ffmpeg/ffdshow/directshow/vfw

    音频视频编程相关:GStreamer/ffmpeg/directshow/vfw linux和window下几种流行的音频视频编程框架作一个总结,防止自己迷惘,免于晕头转向. 一.GStreamer ...

  9. iOS 音频视频图像合成那点事

    代码地址如下:http://www.demodashi.com/demo/13420.html 人而无信不知其可 前言 很久很久没有写点什么了,只因为最近事情太多了,这几天终于闲下来了,趁此机会,记录 ...

  10. iOS WKWebView 退出后停止播放音频/视频

    带有<video>或者<audio>标签的H5网页在播放音频视频时,退出webview后不会自动停止播放,手动处理一下. 1.注入使网页停止音频.视频播放的JS代码(Swift ...

随机推荐

  1. OOP中常用到的函数

    学习地址: http://www.jikexueyuan.com/course/2420.html 判断类是否存在 class_exists() 得到类或者对象中的成员方法组成的数组 get_clas ...

  2. python解析库之 XPath

    1. XPath (XML Path Language) XML路径语言 2. XPath 常用规则: nodename    选取此节点的所有子节点 /                    从当前 ...

  3. Solr 中的 docValues=true

    前言:  在Lucene4.x之后,出现一个重大的特性,就是索引支持DocValues,这对于广大的solr和elasticsearch用户,无疑来说是一个福音,这玩意的出现通过牺牲一定的磁盘空间带来 ...

  4. C语言结构体初始化的四种方法(转载)

    原文:https://blog.csdn.net/ericbar/article/details/79567108 定义 struct InitMember { int first: double s ...

  5. CDH4 journalnode方式手工安装手册之三

    一.                                启动JournalNode 每台机器都要执行: mkdir -p /smp/hadoop-cdh4/bch/ chmod -R 77 ...

  6. meteor 检测运行环境,手机或者桌面

    meteor add mystor:device-detection Meteor.Device.isPhone() https://atmospherejs.com/mystor/device-de ...

  7. hdu1787 GCD Again poj 2478 Farey Sequence 欧拉函数

    hdu1787,直接求欧拉函数 #include <iostream> #include <cstdio> using namespace std; int n; int ph ...

  8. php isset()与empty()详解

    bool isset(mixed var);[;mixed var[,...]] 这个函数需要一个变量名称作为参数,如果这个变量存在,则返回true,否则返回false. 也可以传递一个由逗号间隔的变 ...

  9. 第四部分 linux使用者管理

    第一章 linux帐号管理与acl权限控制    不同的用户拥有不同的权限    可以通过user/group的特殊权限设定,来规范不同的群组开发 一 linux帐号与群组 A 使用者的识别码: UI ...

  10. CodeM美团点评编程大赛初赛A轮

    因为语文太差弃赛,第一个追及问题看不懂我就弃赛了.打进复赛确实挺难的,补一下题,锻炼下就行了. 身体训练 时间限制:1秒 空间限制:32768K 美团外卖的配送员用变速跑的方式进行身体训练.他们训练的 ...