189 8069 5689
video有一下属性
目前创新互联已为超过千家的企业提供了网站建设、域名、网站空间、绵阳服务器托管、企业网站设计、山海关网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
src ：视频的属性
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度
html 代码：
video id="media" src="" controls width="400px" heigt="400px"/video
//audio和video都可以通过JS获取对象,JS通过id获取video和audio的对象
获取video对象：
Media = document.getElementById("media");
Media方法和属性：
HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement
Media.error; //null:正常
Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
//网络状态
- Media.currentSrc; //返回当前资源的URL
- Media.src = value; //返回或设置当前资源的URL
- Media.canPlayType(type); //是否能播放某种格式的资源
- Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
- Media.load(); //重新加载src指定的资源
- Media.buffered; //返回已缓冲区域，TimeRanges
- Media.preload; //none:不预载 metadata:预载资源信息 auto:
//准备状态
- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
- Media.seeking; //是否正在seeking
//回放状态
Media.currentTime = value; //当前播放的位置，赋值可改变位置
Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0
Media.duration; //当前资源长度 流返回无限
Media.paused; //是否暂停
Media.defaultPlaybackRate = value;//默认的回放速度，可以设置
Media.playbackRate = value;//当前播放速度，设置后马上改变
Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文
Media.seekable; //返回可以seek的区域 TimeRanges
Media.ended; //是否结束
Media.autoPlay; //是否自动播放
Media.loop; //是否循环播放
Media.play(); //播放
Media.pause(); //暂停
//视频控制
Media.controls;//是否有默认控制条
Media.volume = value; //音量
Media.muted = value; //静音
TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置
//相关事件
var eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e)
},false);
}
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载（不是因为错误引起）
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载（不是因为错误引起），
eventTester("error"); //请求数据时遇到错误
eventTester("stalled"); //网速失速
eventTester("play"); //play()和autoplay开始播放时触发
eventTester("pause"); //pause()触发
eventTester("loadedmetadata"); //成功获取资源长度
eventTester("loadeddata"); //
eventTester("waiting"); //等待数据，并非错误
eventTester("playing"); //开始回放
eventTester("canplay"); //可以播放，但中途可能因为加载而暂停
eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕
eventTester("seeking"); //寻找中
eventTester("seeked"); //寻找完毕
eventTester("timeupdate"); //播放时间改变
eventTester("ended"); //播放结束
eventTester("ratechange"); //播放速率改变
eventTester("durationchange"); //资源长度改变
eventTester("volumechange"); //音量改变
html5的video标签只有部分浏览器支持，对于IE只有9.0+以上的版本才支持，所以对于视频播放要做兼容，下载所需要的源文件：html5media.min.js，flowplayer.controls.swfflowplayer.swf即可解决。详细步骤：
1、首先下载所需要的源文件：html5media.min.js，flowplayer.controls.swfflowplayer.swf。
2、然后将解压后的js文档和swf文档放在同一目录下，在head部分引入js文档，
3、然后在要引入视频的位置放入video标签，通常放置在div内
4、width:为视频播放宽度，height：为视频播放高度，如果视频大笑适中这里可以不设置，播放器会自动加载视频的原始大小。
如果视频原始大小太大，但不清楚比例，可以只设置高度或者宽度。另外一个设置为auto自动适应，这样视频不会变形。
如果想要视频自动播放，可在video标签中加入autoplay标签。
5、src为视频源文件的路径，poster为视频播放前显示的图片。为播放切换的自然，这里可以设置成视频播放的第一个画面截图。
preload：为预加载视频，设置为auto代表自动加载。
source标签可以省略，但是video标签内的src属性不能省略，如果省略，在IE浏览器中会报错。
所以最后精简后的源码可以如下图所示这样。
6、如果调试过程中，其他浏览器没有问题，但是ie总是有问题的话，清空ie浏览器的缓存再调试。清空缓存步骤如下，先找到Internet工具
7、进入后，点击浏览历史下面的删除按钮。
8、清除如下内容即可，完成后，再用IE刷新页面。
一共支持三种格式: Ogg、MPEG4、WebM。
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。
HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。
HTML5 是HyperText Markup Language 5 的缩写，HTML5技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。
与传统的技术相比，HTML5 的语法特征更加明显，并且结合了SVG的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容，而且 HTML5中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。
1、新建一个html文件，命名为test.html，用于介绍如何使用video控制视频。
2、在test.html页面，使用button标签创建四个按钮，分别是播放/暂停、大、中、小，用于控制视频的播放效果。同时，使用video标签创建一个视频。
3、给每个按钮绑定onclick点击事件，当按钮被点击时，分别执行相应的函数来控制视频的播放效果。
4、使用document.getElementById()获得视频对象，创建“播放/暂停”的playPause()函数，使用play()方法控制视频的播放，使用pause()控制视频的暂停。
5、创建makeBig（）函数，当点击"大"按钮时，使视频以宽度560px来播放视频。
6、创建makeNormal()函数与makeSmall()函数，当点击“中”按钮时，使视频以宽度420px来播放视频，当点击“小”按钮时，使视频以宽度320px来播放视频。
7、在浏览器打开test.html文件，测试js控制视频播放的效果。
video 标签是 HTML 5 的新标签，video 标签定义视频，比如电影片段或其他视频流。，记得实战帮有一个课酬专门是介绍video 标签的
HTML 5 video 标签
定义和用法
video 标签定义视频，比如电影片段或其他视频流。
提示和注释
提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
属性
实例
!-- 一段简单的 HTML5 视频：--
video src="movie.ogg" controls="controls"您的浏览器不支持 video 标签。/video