简介：

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

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

 浏览器支持：

<video src='../test.webm' controls>

    <object data='videoplayer.swf' type='application/x-shockwave-flash'>

	<param name="movie" value="video.swf">

   </object>

</video>

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

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

  • 字幕：关于对话的转译或者翻译。
  • 标题：类似于标题，但是还包括音响效果和其他音频信息。
  • 说明：预期为一个单独的文本文件，通过屏幕阅读器描述视频。
  • 章节：旨在帮助用户浏览整个视频。
  • 元数据：默认不打算展示给观众的、和视频有关的信息和内容。但是你可以使用Javascript来访问。
test.vtt

---------

1

00:00:01.000 --> 00:00:18.000

At the left we can see...

test.html

------------

<video src='../test.webm' controls>

    <track src="test.vtt" kind="subtitles" srclang="en" label="English" />

</video>

理解媒体元素：

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

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

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

使用audio

  • 设置背景音乐：

    <body>
    
	<audio id='musci'>
    
	      <source src='test.ogg'>
    
	      <source src='test.mp3'>
    
	</audio>

	<button id='toggle'  onclick='toggleSound()'>Play</button>
    
</body>

<script type="text/javascript">
    
	function toggleSound() {
    
		var music = document.getElementById('musci');
    
		var toggle = document.getElementById('toggle');
    
		if(music.paused) {
    
			music.play();
    
			toggle.innerHTML = 'Pause';
    
		} else {
    
			music.pause();
    
			toggle.innerHTML = 'Play';
    
		}
    
	}
    
</script>

使用video

  • 额外特征

    • poster：视频加载前的内容图片url地址
    • width/height:设置尺寸或读取设置的尺寸；
    • videoWidth/videoHeight:返回视频固有宽高；只读
  • 创建一个视频时序查看器： 
    <body>
    
	<video src='./test.webm' controls id='movies' autoplay oncanplay='startVideo()' onended='stopTimeline()'>
    
		<object data='videoplayer.swf' type='application/x-shockwave-flash'>
    
			<param name="movie" value="video.swf">
    
		</object>
    
	</video>

	<canvas id='timeline' width='400px' height='300px'>

	</canvas>
    
</body>

<script type="text/javascript">
    
//设置帧更新的间隔
    
	var updateInterval = 5000;

//时序中帧的尺寸
    
	var frameWidth = 100;
    
	var frameHeight = 75;

//时序的总帧数
    
	var frameRows = 4;
    
	var frameColumns = 4;
    
	var frameGrid = frameRows * frameColumns;	

//当前帧
    
	var frameCount = 0;

//播放完后取消计时器
    
    var intervalId;
    
	var videoStarted = false;

	function startVideo() {
    
		//确保第一次播放才触发
    
		if(videoStarted) {
    
			return
    
		}
    
		videoStarted = true;

		updateFrame();
    
		intervalId = setInterval(updateFrame, updateInterval);

		var timeline = document.getElementById('timeline');
    
		timeline.onclick = function(evt) {
    
			var video = document.getElementById('movies');
    
            //计算出第几个，0开始计算
    
			var offX = evt.layerX;
    
			var offY = evt.layerY;
    
			var clickedFrame = Math.floor(offY / frameHeight) * frameRows;
    
			clickedFrame += Math.floor(offX / frameWidth) ;

			var totalTimes = Math.floor(frameCount / 16) * 16 + clickedFrame;
    
			if(clickedFrame > (frameCount % 16)) {
    
				totalTimes -= 16;
    
			}

			video.currentTime = totalTimes * updateInterval / 1000;
    
		}
    
	}

//把帧绘制到画布上
    
	function updateFrame() {
    
		var video = document.getElementById('movies');
    
		var timeline = document.getElementById('timeline');

        var ctx = timeline.getContext('2d');
    
        //当前播放位置
    
        var framePosition = frameCount % frameGrid;
    
        var frameX = (framePosition % frameColumns) * frameWidth;
    
        var frameY = (Math.floor(framePosition / frameRows)) * frameHeight;
    
        //canvas的绘制程序可以将视频源当作图像绘制
    
        ctx.drawImage(video, 0, 0, 400, 300, frameX, frameY, frameWidth, frameHeight);

        frameCount++;
    
	}
    
	function stopTimeline() {
    
		clearInterval(intervalId);
    
	}

</script>
    • 获取当前时间video.currentTime;
    • 当前加载可播放事件：oncanplay;
    • 当前播放结束事件：onended;
  • 一些其他设置例子：
<video src='./test.webm' controls id='movies' autoplay onmouseover='this.play()'onmouseout='this,pause()'>

       <object data='videoplayer.swf' type='application/x-shockwave-flash'>

	      <param name="movie" value="video.swf">

       </object>

</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. 无线路由器的设置_不能通过wifi进行设置

    昨天朋友的小区宽带续费完不能上网了,过去看了一下,无线路由器没有问题,但是宽带信号没过来,网线直接插在电脑上用拨号,发现根本没办法连接,提示网线已经被拔出,重新还原一下系统,也是不行.因为之前他的电脑 ...

  2. Spring AOP使用整理:使用@AspectJ风格的切面声明

    要启用基于@AspectJ风格的切面声明,需要进行以下的配置: <!-- 启用@AspectJ风格的切面声明 --> <aop:aspectj-autoproxy proxy-tar ...

  3. uchome 2.0 存在持久XSS漏洞

    发布时间:2010-09-03 影响版本:uchome 2.0 漏洞描述:看源码分析的,出错位置较敏感,而且基本没有利用限制,个人主页自定义风格时,可@import外部css文件 测试方法: 本站提供 ...

  4. Memcached的配置和使用

    1.下载windows版本,64位下载地址: http://s3.amazonaws.com/downloads.northscale.com/memcached-win64-1.4.4-14.zip ...

  5. 在docker里面安装部署应用

    最近一直在做docker的安装打包工作,学到不少东西,在博客里记一下. 环境centos6 ,docker 基础镜象centos6 1.创建本地基础镜象,安装基础命令包 (1)Dockerfile,D ...

  6. axis2 webservice 发布、调用与项目集成

    发布 1.在apache官网下载axis2包,下载Binary Distribution和War Distribution两个zip. 2.将war放入tomcat webapps下部署.并输入 ht ...

  7. Unity3D研究院之动态修改烘培贴图的大小&脚本烘培场景

    Unity默认烘培场景以后每张烘培贴图的大小是1024.但是有可能你的场景比较简单,用1024会比较浪费.如下图所示,这是我的一个场景的烘培贴图,右上角一大部分完全是没有用到,但是它却占着空间.  有 ...

  8. [BZOJ1061][Noi2008]志愿者招募

    [BZOJ1061][Noi2008]志愿者招募 试题描述 申奥成功后,布布经过不懈努力,终于成为奥组委下属公司人力资源部门的主管.布布刚上任就遇到了一个难 题:为即将启动的奥运新项目招募一批短期志愿 ...

  9. TCP/IP协议原理【转载】

    前述        各种L2数据网具有不同的通信协议与帧结构,其网络节点设备可以是各种类型的数据交换机(X.25.FR.Ethernet和ATM等分组交换机):而L3数据网(IP网或internet) ...

  10. 南洋理工 OJ 115 城市平乱 dijstra算法

    城市平乱 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 南将军统领着N个部队,这N个部队分别驻扎在N个不同的城市. 他在用这N个部队维护着M个城市的治安,这M个城市 ...