h5播放音频标签,h5播放声音

H5新特性—视频播放

<video>

您的浏览器版本太低，请升级

</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>     <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>

</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>