1、视频播放
（1）、h5提供了一个新的标签用于播放视频：
引入视频的方式与‘img’的引入方式相同，即：<video src="视频的路径"><video>。
为使视频可以在大多数浏览器上播放，可以用以下这种方式来引入视频：
....
<video>
<source src="x.mp4"/> //mp4格式
<source src="x.ogg"/> //如果浏览器不支持MP4格式，就转换为.ogg格式
<source src="x.webm"/> //如果不支持以上两种格式，就转换为.webm格式
您的浏览器版本过低，请升级浏览器！ //浏览器不支持以上所有格式的视频
<video>
.....它本身是一个300*500的inlinne-block 。在浏览器中，执行以上代码的先后顺序是由上而下执行，所以才可能逐级降格式。
（2）、关于视频的新特性---[属性：方法]
①autoplay：false 是否自动播放； ②controls:false 是否显示播放控件；③loop: false 是否循环播放；
④muted:false 是否静音播放； ⑤poster:"图片路径" 在播放第一帧前显示的海报；
⑥preload:视频预加载选项; 其属性值可选择：
auto:预加载视频元数据和缓冲一定时长； metadata：只加载元数据（第一帧画面） none：不加载任何数据
注：在使用①--④中的属性时，其属性值如果为“true”，直接将属性名称填入“video”标签的开始标签中即可。
例：
...
<video id="v3" loop controls poster="res/x.png" src="res/birds.mp4" preload="metadata" >
....js对象属性：
①duration:总时长； ② paused:true 当前视频是否处于暂停状态 ；③volume：1 当前音量 ；
④playbackRate:回放速率 大于1快放 小于1慢放；
js对象成员方法：play（） 播放视频 pause( ) 暂停视频
js对象成员事件：onplay 当视频开始播放时触发的事件 onpause 当视频暂停播放时触发的事件
关于视频播放中属性引用的示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>html5新特性--视频播放</h3>
<video id="v3" loop controls poster="res/x.png" src="res/birds.mp4" preload="metadata" >
</video>
<hr/>
<hr/>
<button id="start">播放</button>
<button id="stop">暂停</button>
<script>
var v3 = document.getElementById("v3");
console.log("视频长度:"+v3.duration);
console.log("视频状态:"+v3.paused);
v3.volume = 0.7; //调节音量
v3.playbackRate = 1.3; //调节播放速率
var start = document.getElementById("start");
var stop = document.getElementById("stop");
start.onclick = function(){
v3.play(); //播放视频
}
stop.onclick = function(){
v3.pause(); //暂停视频
}
//#视频播放事件,触发条件只要视频播放
v3.onplay = function(){console.log("播放视频")}
v3.onpause = function(){console.log("暂停")}
</script>
</body>
</html>利用原生js的基础知识，可以做以下两个练习：
练习1:不使用video自带的controls，自定义播放/暂停按钮
鼠标移出视频区域，隐藏按钮 ；鼠标移入视频区域，显示按钮
练习2:只要视频暂停就显示一副广告,只要播放就隐藏广告
未完，待续.........
131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
