html5 音频和视频(audio And video)
1、音频和视频
Web 上的视频
直到现在,仍然不存在一项旨在网页上显示视频的标准。
今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
视频格式
当前,video 元素支持三种视频格式:
格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
补充:在火狐最新版本下发现其是支持MP4视频格式的,感谢楼主@正在缓冲的补充!
Web 上的音频
直到现在,仍然不存在一项旨在网页上播放音频的标准。
今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
audio 元素能够播放声音文件或者音频流。
音频格式
当前,audio 元素支持三种音频格式:
IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis √ √ √
MP3 √ √ √
Wav √ √ √
简单的video元素创建
<video src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" controls>
您的浏览器不支持video元素
</video>
视频默认的大小是300*150
controls:显示视频的默认的控件
video标签的使用(带字幕文件)
<video src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg">
<!--此处添加字幕文件-->
<track label="English" kind="subtitles" srclang="en" src="./test.vtt" default>
您的浏览器不支持html5 video
</video>
<!--字幕文件的格式如下:-->
<pre>
WEBVTT
1
00:00:00.240 --> 00:00:04.130
大家好 最近 Visual Studio 2013 做了一些更新 2
00:00:04.140 --> 00:00:08.110
那我们今天请到 twMVC 的 Dino
来为我们介绍这个更新里面关于 SASS Editor 的部分 3
00:00:18.120 --> 00:00:19.280
</pre>
audio元素创建
<audio controls src="http://www.w3school.com.cn/i/song.mp3">
</audio>
controls:显示通用的用户控件,包括开始,停止,跳播,以及音量控制
audio source元素
<audio controls>
<source src="http://www.w3school.com.cn/i/song.mp3">
<source src="http://www.w3school.com.cn/i/song.ogg">
</audio>
source提供多个音频元素,供浏览器自身播放能力自动选择,如果支持的不知一种,浏览器会选择第一个来源。
媒体的控制 自动播放
<audio autoplay controls>
<source src="http://www.w3school.com.cn/i/song.mp3">
您的浏览器不支持audio
</audio>
autoplay:设置音频自动播放
2、可脚本话的视频和音频
判断浏览器支持情况
// 判断浏览器是否支持audio或者video元素最简单的办法是用脚本动态创建它,然后检测特定的函数是否存在
var hasVideo = !!(document.createElement('video').canPlayType);
js中控制音频或者视频的内置的方法
load() 加载音频或者视频文件,为播放做准备。通常情况下不需要调用,除非是动态创建的的元素,用来在在播放前加载
play() 加载(如果还未加载完成)并播放音频或视频文件,除非音频或视频已经暂停在其他位置了,否则从头开始
pause() 暂停处于播放的视频或者音频文件
canPlayType(type) 试video元素是否支持给定MIME类型的文件
js中控制音频或者视频的内置只读属性
duration 整个媒体文件的播放时长,以s为单位,如果无法获取时长返回NaN
paused 如果媒体文件当前被暂停,则返回true,如果还未开始播放也返回true
ended 如果媒体文件已经播放完毕。返回true
startTime 返回最早的播放起始时间,一般是0.0,除非是从缓冲过的文件,并且一部分已经不在缓冲区了!
error 在发生错误的时候返回的错误代码
currentSrc 以字符串的形式返回当前正在播放的或已经加载的文件,对应于浏览器就是source选择的文件
js中可被脚本修改并影响播放的部分媒体元素的特性
autoplay 将媒体文件设置为创建后自动播放,或者查询是否已经设置autoplay
loop 如果媒体文件已经播放完毕后能重新播放则返回true,或者媒体将媒体文件设置为循环播放
currentTime 以s为单位返回从开始播放到现在所用的时间,在播放过程中,设置currentTime来进行搜索,并定位到媒体文件特定的位置
controls 显示或隐藏用户控制界面,或者查询用户控制界面当前是否可见
volume 在0.0到1.0之前设置音频音量的值,或者查询当前音量的相对值
muted 为音频文件设置静音或者消除静音,或者检测当前是否为静音
autobuffer 通知播放器在媒体文件开始播放前是否进行缓冲加载,如果媒体文件设置autoplay,则忽略该属性
video元素的额外特性
poster 在视频加载完成之前,代表视频内容的图片的url地址,该属性可读可写,可以随意修改
width,height 取或设置显示的尺寸。如果设置的宽度与视频本身大小不匹配,可能导致四周会出现黑色区域
videoWidth,videoHeight 返回视频固有的宽度和高度,只读
3、html5通过canvas抓取视频(实例演示)
<!doctype html>
<meta charset="utf-8">
<html>
<title></title>
<body>
<video id="movies" src="test.mp4" controls="controls" autobuffer="true" oncanplay="startVideo()" onended="stopTimeLine()" width="1920px" height="758px">
</video>
<canvas id="timeLine" width="1920px" height="758px">
</canvas>
</body>
<script>
var updataInterval = 100;//抓取帧的时间间隔
var frameWidth = 1920;//时序中帧的尺寸
var frameHeight = 758;
//时序中总的帧数
var frameRows = 4;
var frameColumns = 4;
var frameGrid = frameRows*frameColumns;
//当前帧
var frameCount = 0;
//播放完取消计时器
var intervalid;
var videoStart = false;
//添加updateFrame函数
function updateFrame(){
var video = document.getElementById('movies');
console.log(video.videoWidth);
console.log(video.videoHeight);
var timeline = document.getElementById('timeLine');
var cxt = timeline.getContext('2d');
//根据帧数计算出当前播放的播放的位置
//然后以视频为输入参数绘制图像
var framePos = frameCount%frameGrid;
var frameX = (framePos%frameColumns)*frameWidth;
var frameY = (framePos%frameRows)*frameHeight;
cxt.drawImage(video,0,0,1920,758,frameX,frameY,frameWidth,frameHeight);
frameCount++;
}
function startVideo(){
if(videoStart){
return;
}
videoStart = true;
updateFrame();
intervalId = setInterval(updateFrame,updataInterval);
}
//处理用户输入
var timeLine = document.getElementById('timeLine');
timeLine.onclick = function(evt){
var offX = evt.layerX - timeLine.offsetLeft;
var offY = evt.layerY - timeLine.offsetTop;
var clickedFrame = Math.floor(offY/frameHeight)*frameRows;
clickedFrame += Math.floor(offX/frameWidth);
var seekedFramed = (((Math.floor(frameCount/frameGrid)*frameGrid)) + clickedFrame);
if(clickedFrame > (frameCount%16)){
seekedFramed = frameGrid;
}
if(seekedFramed < 0){
return;
}
var video = document.getElementById('movies');
video.currentTime = seekedFramed*updataInterval/1000;
frameCount = seekedFramed;
}
function stopTimeLine(){
clearInterval(intervalId);
}
</script>
</html>
html5的audio和video元素的引入,让html5在媒体选择上可以不需要通过引入插件的形式来播放音频和视频文件,此外音频和视频的集成API方法也可以方便我们控制音频和视频!
html5 音频和视频(audio And video)的更多相关文章
- html5音频和视频标签
在html5之前的版本中如果想要在网页中插入音频和视频必须要安装插件才可以,比如最常见的flash插件.很多人在刚安装一款浏览器的时候都会遇到浏览器建议安装flash插件,在移动端也是如此.如果想要在 ...
- 移动端HTML5音频与视频问题及解决方案
最近在研究用视频代替动画,用视频代替精灵动画,我们称这种视频叫做交互视频. 传统的精灵动画: 磁盘空间大,下载慢,尤其是在线播放,会更慢 文件太多,在线播放的时候,太多http请求,会导致响应慢,或者 ...
- html5音频、视频
1.插入一个视频:<video src="test.webm" width="800" height="600"></vi ...
- html5音频和视频相关属性和方法
方法 方法 描述 addTextTrack() 为音视频加入一个新的文本轨迹 canPlayType() 检查指定的音视频格式是否得到支持 load() 重新加载音视频标签 play() 播放音视频 ...
- html5页面怎么播放音频和视频
html5页面怎么播放音频和视频 一.总结 一句话总结:html5 音频和视频标签:(audio And video),局限是不同浏览器对音频视频的格式支持很让人头痛 1.最基础的音频和视频标签的使用 ...
- html5-8 如何控制html5中的视频标签和音频标签
html5-8 如何控制html5中的视频标签和音频标签 一.总结 一句话总结:找到视频或者音频的element对象,然后查手册看对应的方法或者属性就可以,里面有控制的. 1.如何控制html5中的视 ...
- audio和video元素
目录 [1]HTML元素 audio video source track[2]API 方法 属性 事件 audio专有 前面的话 HTML5新增了两个与媒体相关的标签,让开发人员不必依赖任何插件就能 ...
- HTML5 学习07——Video(视频)Audio(音频)
<video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...
- html5之音频、视频(video&audio)
音频&视频 本篇为本人的学习笔记. 在Html5之前,浏览器对于视频和音频的处理并没有一个标准.因此在网页中看到的视频,都是通过第三插件的方式嵌入的,如:QuickTime.RealPlaye ...
随机推荐
- Android开发系列(十九个):至SimpleAdapter设置样式
Adapter任务:在数据adapter处理后做.展会上的观点 对于一般ArrayAdapter供.传递给ArrayAdapter之后就能够在视图上用一个列表显示出这个字符串数组. 比例如以下边的代码 ...
- JS前端正则表达式学习笔记(转)
1.正则表达式的创建: 方法一:以字面量形式来创建 格式为/pattern/flags;其中pattern(模式)为任何简单或者复杂的表达式,可以包括字符类,限定符,分组,向前查找以及反向引用.每个正 ...
- MyEclipse中将项目导出jar包,以及转化成EXE文件
1.对于项目如何导出jar文件,和生成exe,解答目录如下: 首先生成jar文件,单击项目名称CF-users(这是我的协同过滤项目文件名称)右击--->Export如下图: 单击下一步 Sel ...
- SQL_sql的简单查询
***********************************************声明*************************************************** ...
- Android 最热的高速发展框架XUtils
近期搜了一些框架供刚開始学习的人学习,比較了一下XUtils是眼下git上比較活跃 功能比較完好的一个框架,是基于afinal开发的,比afinal稳定性提高了不少.以下是介绍: 鉴于大家的热情,我又 ...
- Navicat工具Oracle数据库复制 or 备用、恢复功能(评论都在谈论需要教)
GXPT它是一个分布式系统,该系统包括一个临时许可系统.基本系统.教学评价体系.考试系统,每个系统都有自己的oracle数据库.统,而评教系统的正常须要借助于权限系统和基础系统,详细的业务这里就不多解 ...
- .NET系统开发过程中积累的扩展方法
分享.NET系统开发过程中积累的扩展方法 .NET 3.5提供的扩展方法特性,可以在不修改原类型代码的情况下扩展它的功能.下面分享的这些扩展方法大部分来自于Code Project或是Stacko ...
- React Native开发的通讯录应用
React Native开发的通讯录应用(使用JavaScript开发原生iOS应用,vczero) 0.前言: 项目地址:https://github.com/vczero/React-Native ...
- iterm2 快捷键大全 Mac item2常用快捷键
整理使用 iTerm 2 过程中得常用快捷键,Mac 原来自带的终端工具 Terminal 不好用是出了名的,虽然最近几个版本苹果稍微做了些优化,功能上,可用性方面增强不少,无奈有个更好用的 Iter ...
- 2014联合三所学校 (HDU 4888 HDU 4891 HDU 4893)
HDU 4891 The Great Pan 注册标题 他怎么说,你怎么样 需要注意的是乘法时,它会爆炸int 代码: #include<iostream> #include<c ...