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. 4.4、Libgdx用法查询执行环境相关性

    (原版的:http://www.libgdx.cn/topic/46/4-4-libgdx%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%E6%9F%A5%E8%AF%A2% ...

  2. 一个简单的Java死锁示例（转）

    在实际编程中,要尽量避免出现死锁的情况,但是让你故意写一个死锁的程序时似乎也不太简单(有公司会出这样的面试题),以下是一个简单的死锁例子,程序说明都写着类的注释里了,有点罗嗦,但是应该也还是表述清楚了 ...

  3. HDOJ 1753 明朝A+B

     http://acm.hdu.edu.cn/showproblem.php? pid=1753 大明A+B Time Limit: 3000/1000 MS (Java/Others)    M ...

  4. &quot;伪中国移动client&quot;--伪基站诈骗

    一.简单介绍: 近日,百度安全实验室发现一款"伪中国移动client"病毒.犯罪分子通过伪基站方式大量发送伪10086的短信,诱导用户点击钓鱼链接:并在钓鱼页面诱导用户输入网银账号 ...

  5. Android分享到微信等社交平台教程

    在Android手机app上增加分享到微信等平台的功能,使用的是第三方的开源组件,友推SDK. 集成分为下面几个步骤: 1. 在友推官网注冊,加入要集成友推sdk的 app信息,并获取appkey. ...

  6. 表与表的关系把RD搞乱了，记一个Procedure中的bug

    就是6张表的关联查询,写了一个存储过程,使用4层for来处理 bug:最后一个for中,两张表的关联条件少了一个,结果数据多查了. 排查办法:使用dbms_output.printline('');每 ...

  7. OpenGL于MFC使用汇总（三）——离屏渲染

    有时直接创建OpenGL形式不适合,或者干脆不同意然后创建一个表单,正如我现在这个项目,创建窗体不显示,它仅限于主框架.而我只是ActiveX里做一些相关工作,那仅仅能用到OpenGL的离屏渲染技术了 ...

  8. Custom Data Service Providers

    Custom Data Service Providers Introduction Data Services sits above a Data Service Provider, which i ...

  9. 开始折腾cocos2d-x，使用批处理来创建项目

    开始服用的时间来学习cocos2d-x该,尽管C和C++另外不咋.只是学习和记忆可能是更深层次的,现在发展: so从今天开始正式决定学会与自己的业余时间折腾吧,仅这51什么.昨天,在开发环境中建,Vi ...

  10. java_Eclipse主题颜色配置+全屏

    http://www.eclipsecolorthemes.org/ 这个是主题的网站. 在Eclipse里, File->Import->General->Preferences- ...