H5新特性—视频播放
<video src=”x.mp4”></video>
<video>
<source src=”x.mp4”></source>
<source src=”x.ogg”></source>
<source src=”x.webm”></source>
您的浏览器版本太低，请升级
</video>
它本身是一个300*150的inline-block元素
以下属性可以直接写在video标签中
ex：
<video controls loop muted poster="res/x.png">
<source src="res/x.mp4">
您的浏览器版本太低请升级
</video>成员属性
autoplay 是否自动播放
controls 是否显示控件
muted 是否静音
loop 是否循环播放
poster 在播放第一帧画面之前广告(图片)
preload 视频加载策略
1.auto: 预加载一定时长视频和元数据
2.metadata: 仅预加载元素数(尺寸，时长，第一帧画面)
3.none: 不加载任何内容
以下属性需要借助js才能使用
对象属性
currentTime 当前播放时长
duration 总时长
paused: 当前视频是否处理暂停状态
volume（0~1） 音量
playbackRate: 回放速率: 大于1快播 小于1慢放
成员方法
play() 播放视频
pause() 暂停视频播放
事件
onplay 当视频开始播放触发事件
onpause 当视频暂停播放触发事件
练习1:不使用video自带控件,自定义播放暂停按钮
鼠标移出视频区域隐藏按钮，鼠标移入，显示按钮
练习2:视频暂停就显示广告，只要播放广告隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#v1{
position: relative;
}
#img1{
position: absolute;
top: 240px;
left: 420px;
}
#ad{
width: 856px;
height: 487px;
position: absolute;
left: 7px;
top:7px;
}
</style>
</head>
<body>
<!--<video controls loop muted poster="res/x.png" id="v1">-->
<!--<source src="res/x.mp4">-->
<!--您的浏览器版本太低请升级-->
<!--</video>-->
<div id="d1">
<video id="v1">
<source src="res/x.mp4">
您的浏览器版本太低请升级
</video>
<img src="res/x.png" id="ad">
<img src="res/play.png" id="img1">
<button id="btn1">播放</button>
<button id="btn2">停止</button>
</div>
<script>
var v1=document.getElementById("v1");
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
var img1=document.getElementById("img1");
var d1=document.getElementById("d1")
var ad=document.getElementById("ad")
btn1.addEventListener("click",function () {
//调整音量
v1.volume=0.5
//调整速率
v1.playbackRate=3
v1.play()
})
btn2.addEventListener("click",function () {
v1.pause()
})
v1.onplay=function () {
console.log("播放")
}
v1.onpause=function () {
console.log("停止")
}
d1.onmouseover=function(){
img1.style.display="block"
}
d1.onmouseout=function(){
img1.style.display="none"
}
img1.addEventListener("click",function () {
if(v1.paused) {
v1.volume=0.3
v1.play()
img1.src="res/pause.png"
ad.style.display="none"
}else {
v1.pause()
img1.src="res/play.png"
ad.style.display="block"
}
})
</script>
</body>
</html>
3.3:H5新特性—音频
<audio src=”x.mp3”></audio>
<audio>
<source src=”x.mp3” />
<source src=”x.wav” />
</audio>
它默认300*30的inline-block元素，但是没有controls属性，
则display:none;
以下属性可以直接写在audio标签中
成员属性
autoplay 是否自动播放
controls 是否显示控件
muted 是否静音
loop 是否循环播放
preload 视频加载策略
auto: 预加载一定时长视频和元数据
metadata: 仅预加载元素数(尺寸，时长，第一帧画面)
none: 不加载任何内容
以下属性需要借助js才能使用
##js对象属性
currentTime 当前播放时长
duration 总时长
paused: 当前视频是否处理暂停状态
volume（0~1） 音量
playbackRate: 回放速率: 大于1快播 小于1慢放
#js 成员方法
play() 播放音频
pause() 暂停音频播放
#js 事件
onplay 当音频开始播放触发事件
onpause 当音频暂停播放触发事件
ex：用复选框来控制音频播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<audio src="res/x.mp3" controls id="a1">
您的浏览器版本太低请及时的升级
</audio>
<p><input type="checkbox" id="ch">123</p>
<script>
var a1=document.getElementById("a1")
var ch=document.getElementById("ch")
ch.onchange=function () {
if(this.checked){
a1.play();
}else {
a1.pause();
}
}
</script>
</body>
</html>