HTML-Audio/Video

简介：

容器：不论是音频还是视频文件，实际上都是容器文件；
- 视频文件包含了音频轨道、视频轨道和其他一些元数据；
- 视频文件播放时，音频轨道和视频轨道是绑定在一起；元数据包含了该视频的封面、子标题、字幕等信息；
主流视频容器支持格式：
- 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的更多相关文章

HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
Capturing Audio & Video in HTML5
使用HTML5抓取 Audio & Video 原文地址: http://www.html5rocks.com/en/tutorials/getusermedia/intro/ 本地化的文章: ...
[jPlayer] HTML5 Audio & Video for jQuery
---------------------------------------------------------------------------------------------------- ...
[转载]HTML5 Audio/Video 标签,属性,方法,事件汇总
<audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 <audio id=& ...
如何让windows版Safari支持H5 audio/video?
今天在windows版Safari上看效果的时候惊奇地发现它竟然不支持HTML5的audio/video, 这样的话就无法复现不少ios上出现的问题. 在同事提醒下, 发现Safari HTML5 A ...
HTML 5 Audio/Video DOM buffered 属性
1.实例1获取视频第一段缓冲范围部分,以秒计: myVid=document.getElementById("video1"); alert("Start: " ...
js 多媒体audio video
本文主要简单的介绍一下audio 和 video两个标签的用法 <audio src="music.mp3"></audio> <video src= ...
audio,video标签
<html><head lang="en"> <meta charset="UTF-8"> <title>< ...
HTML5 Audio/Video 标签,属性,方法,事件汇总（转）
HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...
使用HTML5抓取 Audio & Video
原文地址: http://www.html5rocks.com/en/tutorials/getusermedia/intro/ 本地化的文章: http://www.html5rocks.com/z ...

随机推荐

tyvj4221 货车漂移
背景蒟蒻中学的蒟蒻遇到了一些小问题. 描述蒟蒻考完noip也就要回家种田了,他老家的田地在s点,可是种子市场在e点,为了购买种子,中途要经过很多城市,这导致快递费非常的贵(因为快到双11了),于是 ...
Centos6.5更新e1000网卡驱动
导读在工作过程中经常遇到linux的操作系统网络不正常的情况,以前没有注意到,今天查看系统日志发现原来是网络驱动的问题.索性直接更新系统,更新网卡问题:linux系统经常出现断网的情况,重启之后系 ...
HDOJ 1875
畅通工程再续 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...
BZOJ 2818
2818:GCD Description 给定整数$N$,求$1\le x,y\le N$且$\gcd{x,y}$为素数的数对$(x,y)$有多少对. Input $N$ Output RT Samp ...
[转]Spring的IOC原理[通俗解释一下]
1. IoC理论的背景我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 图1:软件系统中耦合的对象如果我们打开机械 ...
Ubuntu系统如何查看硬件配置信息
查看ubuntu硬件信息 1, 主板信息 .查看主板的序列号 -------------------------------------------------- #使用命令 dmidecode | ...
windows下的unix工具集：UnxUtils
参考: http://blog.csdn.net/woohello/article/details/8365639 下载: http://sourceforge.net/projects/unxuti ...
javascript动态添加form表单元素
2014年11月7日 17:10:40 之前写过几篇类似的文章,现在看来比较初级,弄一个高级的简单的情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果主 ...
Python多线程（1）——介绍
Python对多线程提供了很好的支持,Python中多线程相关的模块包括:thread,threading,Queue.可以方便地支持创建线程.互斥锁.信号量.同步等特性. 1. thread:多线程 ...
利用 FFmpeg palettegen paletteuse 生成接近全色的 gif 动画
下载FFmpeg-VideoToGif-v1.0.bat.7z FFmpeg 2.6 及以上版本有效未使用palette时使用palette后 @echo off set inFile=2015. ...

HTML-Audio/Video

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

随机推荐

热门专题