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. MVC中下拉框显示枚举项

    原文:MVC中下拉框显示枚举项 本篇将通过3种方式,把枚举项上的自定义属性填充到下拉框: 1.通过控制器返回List<SelectListItem>类型给前台视图 2.通过为枚举类型属性打 ...

  2. UVa753/POJ1087_A Plug for UNIX(网络流最大流)(小白书图论专题)

    解题报告 题意: n个插头m个设备k种转换器.求有多少设备无法插入. 思路: 定义源点和汇点,源点和设备相连,容量为1. 汇点和插头相连,容量也为1. 插头和设备相连,容量也为1. 可转换插头相连,容 ...

  3. SPOJ 375 树链剖分

    SPOJ太慢了,SPOJ太慢了, 题意:给定n(n<=10000)个节点的树,每条边有边权,有两种操作:1.修改某条变的边权:2.查询u,v之间路径上的最大边权. 分析:树链剖分入门题,看这里: ...

  4. 【甘道夫】官方网站MapReduce代码注释具体实例

    引言 1.本文不描写叙述MapReduce入门知识,这类知识网上非常多.请自行查阅 2.本文的实例代码来自官网 http://hadoop.apache.org/docs/current/hadoop ...

  5. openstack 网络简史

    openstack 网络简史 研究openstack有2个月的时间,这段时间从网上获取N多宝贵资料,对我的学习有非常大帮助,在加上我自己的研究,最终对openstack整个网络体系有了个浅显的认识,写 ...

  6. JQUERY 选择

    jQuery 选择器 jQuery 采用 CSS 一个选择选择 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取 ...

  7. Lucene40PostingWriter

    控制freq和prox这两个文件的输出,比较简单. 默认skip interval这是16,max skip level这是10. 由源或使用可见VInt编码(而不是速度的传奇PForDelta). ...

  8. [cocos2dx注意事项009]试用quick-cocos2dx-2.2.4

    quick-cocos2d-x 在中国站http://quick.cocoachina.com/?page_id=40,用他们自己的话说:quick-cocos2d-x(后文简称 quick)与 co ...

  9. HBase写的初步测试中的表现

    底 第四年HBase.在上线的机HBase集群做一个初步的测试写入性能.下面具体说明做测试内容. 说明 HBase周围环境 0.96版本号,8台region server.默认配置 写数据说明 单co ...

  10. find your present (2) 2095

    Problem Description In the new year party, everybody will get a "special present".Now it's ...