(5)html音频视频
音频
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音频视频的更多相关文章
- iOS 直播-获取音频(视频)数据
iOS 直播-获取音频(视频)数据 // // ViewController.m // capture-test // // Created by caoxu on 16/6/3. // Copyri ...
- iOS 微信 音频 视频自动播放
iOS 微信 音频 视频自动播放 http://www.w3ctech.com/topic/1165
- 【转】android如何浏览并选择图片 音频 视频
转自:http://www.cnblogs.com/top5/archive/2012/03/06/2381986.html 这几天 在学习并开发android系统的图片浏览 音频 视频 的浏览 ...
- HTML5 音频视频
HTML5 视频和音频的 DOM 参考手册 HTML5 DOM 为 <audio> 和 <video> 元素提供了方法.属性和事件. 这些方法.属性和事件允许您使用 JavaS ...
- 第六十六节,htnl音频视频
htnl音频视频 学习要点: 1.音频和视频概述 2.video视频元素 3.audio音频元素 本章主要探讨HTML5中音频和视频元素,通过这两个原生的媒体元素向HTML页面 ...
- 前端笔记之HTML5&CSS3(上)新特性&音频视频&本地存储&自定义属性
一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...
- HTML5媒体(音频/视频)
摘要: 在HTML5出现之前,web媒体大部分通过Flash来实现.这种方式造成了文件大加载慢,影响网站性能,开发难度高,维护麻烦,不易扩展等.这就导致HTML5自己开始支持媒体功能.HTML5 DO ...
- 音频视频解决方案:GStreamer/ffmpeg/ffdshow/directshow/vfw
音频视频编程相关:GStreamer/ffmpeg/directshow/vfw linux和window下几种流行的音频视频编程框架作一个总结,防止自己迷惘,免于晕头转向. 一.GStreamer ...
- iOS 音频视频图像合成那点事
代码地址如下:http://www.demodashi.com/demo/13420.html 人而无信不知其可 前言 很久很久没有写点什么了,只因为最近事情太多了,这几天终于闲下来了,趁此机会,记录 ...
- iOS WKWebView 退出后停止播放音频/视频
带有<video>或者<audio>标签的H5网页在播放音频视频时,退出webview后不会自动停止播放,手动处理一下. 1.注入使网页停止音频.视频播放的JS代码(Swift ...
随机推荐
- webpack4搭建Vue开发环境笔记~~持续更新
项目git地址 一.node知识 __dirname: 获取当前文件所在路径,等同于path.dirname(__filename) console.log(__dirname); // Prints ...
- CSS基础:block,inline和inline-block
css的display属性是前端开发中非常常见的属性,本文简单介绍下其中比较常用的属性值,即block.inline和inline-block. HTML组件中呈现一片空白区域的组件都可当盒模型(bo ...
- vue 顶级组件
快 有时候懒的把一些通用组件写到template里面去,而业务中又需要用到,比如表示loading状态这样组件. 如果是这样的组件,可以选择把组件手动初始化,让组件在整个app生命周期中始终保持活跃. ...
- 【android】安卓平台版本和API版本的对应关系
安卓平台版本和API版本对应关系
- SolrCloud下DIH实践
创建Collection 在/usr/local/solrcloud/solr/server/solr文件夹下创建coreTest文件夹 将/usr/local/solrcloud/solr/serv ...
- FIFO buffer 和普通buffer区别
1.FIFO可以说一块具体的硬件存储设备,也可以说程序在内存中开辟的一段内存区域.而buffer往往就是一段缓冲的数据区域 2.FIFO的数据是先进先出的,而buffer没有这个限制,可以全局访问 3 ...
- re--读书笔记【转】
原文链接 * 正则表达式入门 1.正则表达式的两种基本用途:搜索和替换. 2.正则表达式是一些用来匹配和处理文本的字符串. 小结:正则表达式是文本处理方面功能最强大的工具之一,正则表达式语言用来构造正 ...
- Centos启动时停止在登录界面但不显示登录信息(一直在转圈)
进入单用户模式 执行 iscsiadm -m node -o delete,然后reboot
- LA 7072 Signal Interference 计算几何 圆与多边形的交
题意: 给出一个\(n\)个点的简单多边形,和两个点\(A, B\)还有一个常数\(k(0.2 \leq k < 0.8)\). 点\(P\)满足\(\left | PB \right | \l ...
- mongodb的基本操作数据更新
先启动服务器 查看数据库 选择数据库 删除数据库 插入信息 查看插入的表名 查看信息 修改表数据 修改指定信息,其他信息不改变 可以使不存在的命令进行修改并保存 修改多条数据 删除数据 删除表 查看集 ...