简介：

  • 容器：不论是音频还是视频文件，实际上都是容器文件；

    • 视频文件包含了音频轨道、视频轨道和其他一些元数据；
    • 视频文件播放时，音频轨道和视频轨道是绑定在一起；元数据包含了该视频的封面、子标题、字幕等信息；
  • 主流视频容器支持格式：
    • Audio Video Interleave(.avi)
    • Flash Video(.flv)
    • MPGE4(.mp4)
    • Mattroska(.mkv)
    • Ogg(.ogv)
  • 编/解码器：
    • 一组算法，用来对一段特定视频或音频进行解码和编码；
    • 由于一些原因，当前没有任意一种编解码器可以被所有浏览器厂商支持；
    • 目前HTML5规范中并没有对编解码器做要求；

 浏览器支持：

  1. <video src='../test.webm' controls>
  2.     <object data='videoplayer.swf' type='application/x-shockwave-flash'>
  3. 	<param name="movie" value="video.swf">
  4.    </object>
  5. </video>

以插件方式播放视频的代码为备选内容；不过考虑到各种浏览器，可能需要多种视频格式；

WebVTT文件： 一个WebVTT（.vtt）文件是一个简单的纯文本，里面包含了几种类型的视频信息：

  • 字幕：关于对话的转译或者翻译。
  • 标题：类似于标题，但是还包括音响效果和其他音频信息。
  • 说明：预期为一个单独的文本文件，通过屏幕阅读器描述视频。
  • 章节：旨在帮助用户浏览整个视频。
  • 元数据：默认不打算展示给观众的、和视频有关的信息和内容。但是你可以使用Javascript来访问。
  1. test.vtt
  2. ---------
  3. 1
  4. 00:00:01.000 --> 00:00:18.000
  5. At the left we can see...
  6.  
  7. test.html
  8. ------------
  9. <video src='../test.webm' controls>
  10.     <track src="test.vtt" kind="subtitles" srclang="en" label="English" />
  11. </video>

理解媒体元素：

  • 声明媒体元素：audio/video ; controls //如果不指定controls,浏览器将无法显示通用的控件，可用在如背景音乐；
  • source元素：用于备用声明包含来源 
    1. <audio controls>
    2.     <source src = 'test.ogg'>
    3.     <source src = 'test.mp3'>
    4. </audio>

    来源列表的顺序，最好按照用户由高到低或者服务器消耗由低到高；　　

  • 媒体的控制：
    • autoplay:自动播放，在不设置controls的情况下设置，如广告。//注意不是每种设备都支持自动播放，IOS就不支持；
    • 常用控制函数：load()、play()、pause()、canPlayType()；
    • 只读媒体特性：durationo、paused、ended、startTime、error......
    • 可用脚本控制的特性值：autoplay、 loop、 muted...............

使用audio

  • 设置背景音乐：

    1. <body>
    2. 	<audio id='musci'>
    3. 	      <source src='test.ogg'>
    4. 	      <source src='test.mp3'>
    5. 	</audio>
    6.  
    7. 	<button id='toggle'  onclick='toggleSound()'>Play</button>
    8. </body>
    9.  
    10. <script type="text/javascript">
    11. 	function toggleSound() {
    12. 		var music = document.getElementById('musci');
    13. 		var toggle = document.getElementById('toggle');
    14. 		if(music.paused) {
    15. 			music.play();
    16. 			toggle.innerHTML = 'Pause';
    17. 		} else {
    18. 			music.pause();
    19. 			toggle.innerHTML = 'Play';
    20. 		}
    21. 	}
    22. </script>

使用video

  • 额外特征

    • poster：视频加载前的内容图片url地址
    • width/height:设置尺寸或读取设置的尺寸；
    • videoWidth/videoHeight:返回视频固有宽高；只读
  • 创建一个视频时序查看器： 
    1. <body>
    2. 	<video src='./test.webm' controls id='movies' autoplay oncanplay='startVideo()' onended='stopTimeline()'>
    3. 		<object data='videoplayer.swf' type='application/x-shockwave-flash'>
    4. 			<param name="movie" value="video.swf">
    5. 		</object>
    6. 	</video>
    7.  
    8. 	<canvas id='timeline' width='400px' height='300px'>
    9.  
    10. 	</canvas>
    11. </body>
    12.  
    13. <script type="text/javascript">
    14. //设置帧更新的间隔
    15. 	var updateInterval = 5000;
    16.  
    17. //时序中帧的尺寸
    18. 	var frameWidth = 100;
    19. 	var frameHeight = 75;
    20.  
    21. //时序的总帧数
    22. 	var frameRows = 4;
    23. 	var frameColumns = 4;
    24. 	var frameGrid = frameRows * frameColumns;	
    25.  
    26. //当前帧
    27. 	var frameCount = 0;
    28.  
    29. //播放完后取消计时器
    30.     var intervalId;
    31. 	var videoStarted = false;
    32.  
    33. 	function startVideo() {
    34. 		//确保第一次播放才触发
    35. 		if(videoStarted) {
    36. 			return
    37. 		}
    38. 		videoStarted = true;
    39.  
    40. 		updateFrame();
    41. 		intervalId = setInterval(updateFrame, updateInterval);
    42.  
    43. 		var timeline = document.getElementById('timeline');
    44. 		timeline.onclick = function(evt) {
    45. 			var video = document.getElementById('movies');
    46.             //计算出第几个，0开始计算
    47. 			var offX = evt.layerX;
    48. 			var offY = evt.layerY;
    49. 			var clickedFrame = Math.floor(offY / frameHeight) * frameRows;
    50. 			clickedFrame += Math.floor(offX / frameWidth) ;
    51.  
    52. 			var totalTimes = Math.floor(frameCount / 16) * 16 + clickedFrame;
    53. 			if(clickedFrame > (frameCount % 16)) {
    54. 				totalTimes -= 16;
    55. 			}
    56.  
    57. 			video.currentTime = totalTimes * updateInterval / 1000;
    58. 		}
    59. 	}
    60.  
    61. //把帧绘制到画布上
    62. 	function updateFrame() {
    63. 		var video = document.getElementById('movies');
    64. 		var timeline = document.getElementById('timeline');
    65.  
    66.         var ctx = timeline.getContext('2d');
    67.         //当前播放位置
    68.         var framePosition = frameCount % frameGrid;
    69.         var frameX = (framePosition % frameColumns) * frameWidth;
    70.         var frameY = (Math.floor(framePosition / frameRows)) * frameHeight;
    71.         //canvas的绘制程序可以将视频源当作图像绘制
    72.         ctx.drawImage(video, 0, 0, 400, 300, frameX, frameY, frameWidth, frameHeight);
    73.  
    74.         frameCount++;
    75. 	}
    76. 	function stopTimeline() {
    77. 		clearInterval(intervalId);
    78. 	}
    79.  
    80. </script>
    • 获取当前时间video.currentTime;
    • 当前加载可播放事件：oncanplay;
    • 当前播放结束事件：onended;
  • 一些其他设置例子：
  1. <video src='./test.webm' controls id='movies' autoplay onmouseover='this.play()'onmouseout='this,pause()'>
  2.        <object data='videoplayer.swf' type='application/x-shockwave-flash'>
  3. 	      <param name="movie" value="video.swf">
  4.        </object>
  5. </video>

　　

HTML-Audio/Video的更多相关文章

  1. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  2. Capturing Audio & Video in HTML5

    使用HTML5抓取 Audio & Video 原文地址: http://www.html5rocks.com/en/tutorials/getusermedia/intro/ 本地化的文章: ...

  3. [jPlayer] HTML5 Audio & Video for jQuery

    ---------------------------------------------------------------------------------------------------- ...

  4. [转载]HTML5 Audio/Video 标签,属性,方法,事件汇总

    <audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 <audio id=& ...

  5. 如何让windows版Safari支持H5 audio/video?

    今天在windows版Safari上看效果的时候惊奇地发现它竟然不支持HTML5的audio/video, 这样的话就无法复现不少ios上出现的问题. 在同事提醒下, 发现Safari HTML5 A ...

  6. HTML 5 Audio/Video DOM buffered 属性

    1.实例1获取视频第一段缓冲范围部分,以秒计: myVid=document.getElementById("video1"); alert("Start: " ...

  7. js 多媒体audio video

    本文主要简单的介绍一下audio 和 video两个标签的用法 <audio src="music.mp3"></audio> <video src= ...

  8. audio,video标签

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  9. HTML5 Audio/Video 标签,属性,方法,事件汇总 （转）

    HTML5 Audio/Video 标签,属性,方法,事件   <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...

  10. 使用HTML5抓取 Audio & Video

    原文地址: http://www.html5rocks.com/en/tutorials/getusermedia/intro/ 本地化的文章: http://www.html5rocks.com/z ...

随机推荐

  1. ReactJS入门学习一

    ReactJS入门学习一 阅读目录 React是什么? React如何制作组件? 理解组件属性props 理解页面中如何渲染数据的 理解从服务器端获取数据及理解state的 回到顶部 React是什么 ...

  2. matlab之round any size rat isscalar ismatrix mean find max

    1.round : 四舍五入 例子:a = [-1.9, -0.2, 3.4, 5.6, 7.0, 2.4+3.6i] round(a): [-2  0  3  6  7  2  4] 2.butte ...

  3. cf.295.C.DNA Alignment（数学推导）

    DNA Alignment time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  4. IOS 入门开发之创建标题栏UINavigationBar的使用（二）

    IOS 入门开发之创建标题栏UINavigationBar的使用 http://xys289187120.blog.51cto.com/3361352/685746     IOS 开发有关界面的东西 ...

  5. MySQL sql语句总结

    1.说明:创建数据库CREATE DATABASE database-name2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备份数据的 d ...

  6. 秀尔算法：破解RSA加密的“不灭神话”

    RSA加密 VS 秀尔算法 作为RSA加密技术的终结者——“太多运算,无法读取”的秀尔算法(Shor’s algorithm)不是通过暴力破解的方式找到最终密码的,而是利用量子计算的并行性,可以快速分 ...

  7. Nmap备忘单：从探索到漏洞利用（Part3）

    众所周知NMAP是经常用来进行端口发现.端口识别.除此之外我们还可以通过NMAP的NSE脚本做很多事情,比如邮件指纹识别,检索WHOIS记录,使用UDP服务等. 发现地理位置 Gorjan Petro ...

  8. javascript动态添加一组input

    2013年12月18日 20:56:29 场景: 批量添加 友情链接 功能 每个友情链接记录有3个字段:名字(name),超链接(url),排序(order) 要求每次点击"添加" ...

  9. Linux下配置Hadoop 1.2.1

    首先要下载hadoop的包,版本选择1.2.1的,下载地址为:http://mirrors.cnnic.cn/apache/hadoop/common/hadoop-1.2.1/ 这里可以下载hado ...

  10. 2.python基础深入(元组、字符串、列表、字典)

    一,对象与类 对象: python中一切皆为对象,所谓对象:我自己就是一个对象,我玩的电脑就是对象,玩的手机就是对象. 我们通过描述属性(特征)和行为来描述一个对象的. 在python中,一个对象的特 ...