(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 ...
随机推荐
- OOP中常用到的函数
学习地址: http://www.jikexueyuan.com/course/2420.html 判断类是否存在 class_exists() 得到类或者对象中的成员方法组成的数组 get_clas ...
- python解析库之 XPath
1. XPath (XML Path Language) XML路径语言 2. XPath 常用规则: nodename 选取此节点的所有子节点 / 从当前 ...
- Solr 中的 docValues=true
前言: 在Lucene4.x之后,出现一个重大的特性,就是索引支持DocValues,这对于广大的solr和elasticsearch用户,无疑来说是一个福音,这玩意的出现通过牺牲一定的磁盘空间带来 ...
- C语言结构体初始化的四种方法(转载)
原文:https://blog.csdn.net/ericbar/article/details/79567108 定义 struct InitMember { int first: double s ...
- CDH4 journalnode方式手工安装手册之三
一. 启动JournalNode 每台机器都要执行: mkdir -p /smp/hadoop-cdh4/bch/ chmod -R 77 ...
- meteor 检测运行环境,手机或者桌面
meteor add mystor:device-detection Meteor.Device.isPhone() https://atmospherejs.com/mystor/device-de ...
- hdu1787 GCD Again poj 2478 Farey Sequence 欧拉函数
hdu1787,直接求欧拉函数 #include <iostream> #include <cstdio> using namespace std; int n; int ph ...
- php isset()与empty()详解
bool isset(mixed var);[;mixed var[,...]] 这个函数需要一个变量名称作为参数,如果这个变量存在,则返回true,否则返回false. 也可以传递一个由逗号间隔的变 ...
- 第四部分 linux使用者管理
第一章 linux帐号管理与acl权限控制 不同的用户拥有不同的权限 可以通过user/group的特殊权限设定,来规范不同的群组开发 一 linux帐号与群组 A 使用者的识别码: UI ...
- CodeM美团点评编程大赛初赛A轮
因为语文太差弃赛,第一个追及问题看不懂我就弃赛了.打进复赛确实挺难的,补一下题,锻炼下就行了. 身体训练 时间限制:1秒 空间限制:32768K 美团外卖的配送员用变速跑的方式进行身体训练.他们训练的 ...