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）的更多相关文章

  1. html5音频和视频标签

    在html5之前的版本中如果想要在网页中插入音频和视频必须要安装插件才可以,比如最常见的flash插件.很多人在刚安装一款浏览器的时候都会遇到浏览器建议安装flash插件,在移动端也是如此.如果想要在 ...

  2. 移动端HTML5音频与视频问题及解决方案

    最近在研究用视频代替动画,用视频代替精灵动画,我们称这种视频叫做交互视频. 传统的精灵动画: 磁盘空间大,下载慢,尤其是在线播放,会更慢 文件太多,在线播放的时候,太多http请求,会导致响应慢,或者 ...

  3. html5音频、视频

    1.插入一个视频:<video src="test.webm" width="800" height="600"></vi ...

  4. html5音频和视频相关属性和方法

    方法 方法 描述 addTextTrack() 为音视频加入一个新的文本轨迹 canPlayType() 检查指定的音视频格式是否得到支持 load() 重新加载音视频标签 play() 播放音视频 ...

  5. html5页面怎么播放音频和视频

    html5页面怎么播放音频和视频 一.总结 一句话总结:html5 音频和视频标签:(audio And video),局限是不同浏览器对音频视频的格式支持很让人头痛 1.最基础的音频和视频标签的使用 ...

  6. html5-8 如何控制html5中的视频标签和音频标签

    html5-8 如何控制html5中的视频标签和音频标签 一.总结 一句话总结:找到视频或者音频的element对象,然后查手册看对应的方法或者属性就可以,里面有控制的. 1.如何控制html5中的视 ...

  7. audio和video元素

    目录 [1]HTML元素 audio video source track[2]API 方法 属性 事件 audio专有 前面的话 HTML5新增了两个与媒体相关的标签,让开发人员不必依赖任何插件就能 ...

  8. HTML5 学习07——Video(视频)Audio(音频)

    <video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...

  9. html5之音频、视频(video&audio)

    音频&视频 本篇为本人的学习笔记. 在Html5之前,浏览器对于视频和音频的处理并没有一个标准.因此在网页中看到的视频,都是通过第三插件的方式嵌入的,如:QuickTime.RealPlaye ...

随机推荐

  1. Gradle 2.0用户手册——总览（译）（转）

    2.1 特性 本章将介绍一系列Gradle的特性. 申明式构建和基于约定的构建 Gradle的核心是基于Groovy呈现了一种丰富的针对特定领域的语言,称之为Domain Specific Langu ...

  2. SVD在推荐系统中的应用

    一.奇异值分解SVD 1.SVD原理 SVD将矩阵分为三个矩阵的乘积,公式: 中间矩阵∑为对角阵,对角元素值为Data矩阵特征值λi,且已经从大到小排序,即使去掉特征值小的那些特征,依然可以很好地重构 ...

  3. log4j与commons-logging，slf4j的关系（转）

    前面有一篇日志中简单的介绍了 log4j,同时也介绍了它与commons-logging的关系,但是突然冒出来一个slf4j,并且slf4j有取代commons-logging的趋势,所以,我们可以推 ...

  4. WordPress添加评论回复的电子邮件警报通知

    评论回复帖子,主动发送电子邮件通知评论员,这是提高的一大举措的用户体验.倡导孟一直在使用Willin Kan主评论回复电子邮件警报通知码,我相信很多人也使用,假设你没有使用.最好的尝试. 根据自己的需 ...

  5. Hbase在的应用经验的统计

    1. 需求统计 互联网上对于数据的统计,一个重要的应用就是对站点站点数据的统计,比如CNZZ站长统计.百度统计.Google Analytics.量子恒道统计等等. 站点站点统计工具无外乎有下面一些功 ...

  6. 基于PHP的crontab定时任务管理

    BY JENNER · 2014年11月10日· 阅读次数:6 linux的crontab一直是server运维.业务开展的利器.但当定时任务增多时,管理和迁移都变得非常麻烦,并且easy出问题.以下 ...

  7. GeeksforGeeks - Adjacency List邻接矩阵C\C++代码

    邻接矩阵的图示: 构建一个这种无向邻接矩阵. 參考站点: http://www.geeksforgeeks.org/graph-and-its-representations/ 这里写了个类,添加删除 ...

  8. Poj 3517 And Then There Was One Joseph核心问题

    基本上纯Joseph核心问题,只是第一步多一件.m. 然后你就可以用获得的递推公式: Win(n) 代表n当个人的中奖号码, 然后,Win(n)必须相等Win(n-1).当一个人将在下一次删除队列. ...

  9. 使用Mockito进行单元测试【1】——mock and verify[转]

    本文转自:http://qiuguo0205.iteye.com/blog/1443344 1. 为什么使用Mockito来进行单元测试? 回答这个问题需要回答两个方面,第一个是为什么使用mock?m ...

  10. 第19章 解释器模式（Interpreter Pattern）

    原文 第19章 解释器模式(Interpreter Pattern) 解释器模式 导读:解释器模式,平常用的比较的少,所以在写这个模式之前在博客园搜索了一番,看完之后那叫一个头大.篇幅很长,我鼓足了劲 ...