h5 播放器 -3
autoplay
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<script>
window.onload=function(){
var oA = document.getElementById('a1');
oA.currentTime = 60;//从一分钟的时候开始播放 这个在火狐里有效 在chrome下无效
oA.volume = 0.1;//音量
oA.muted =1;//静音 0 不静音
//setInterval(function(){
//console.log( oA.currentTime )
//},1000)
//还可以设置从哪里开始播放
}
</script>
</head>
<!--兼容性-->
<body>
<audio controls autoplay loop id="a1" src="goda goda.mp3"></audio>
<!-- <video controls src="Intermission-Walk-in_512kb.mp4"></video>-->
<video controls>
<source src="Intermission-Walk-in.ogv"></source>
<source src="Intermission-Walk-in_512kb.mp4"></source>
</video>
</body>
</html>
方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<script>
window.onload=function(){
var oA = document.getElementById('a1');
//没有设置control 控件的时候
oA.onmouseover = function(){
this.play()
}
oA.onmouseout = function(){
this.pause()
}
//load() 重新加载
var oInput = document.getElementsByTagName('input')[0];
var aS = document.getElementsByTagName('source') ;
oInput.onclick = function(){
aS[0].src = '111.ogv';
aS[1].src = '111.mp4';
oA.load()
}
}
</script>
</head>
<!--兼容性-->
<body>
<input type="button" value="切换媒体" />
<video id="a1">
<source src="Intermission-Walk-in.ogv"></source>
<source src="Intermission-Walk-in_512kb.mp4"></source>
</video>
</body>
</html>
poster 换封面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<script>
window.onload=function(){
var oA = document.getElementById('a1');
//没有设置control 控件的时候
oA.poster = '2.png';
oA.currentTime = 1020;
oA.addEventListener('ended',function(){
alert()
},false)
}
</script>
</head>
<!--兼容性-->
<body>
<video id="a1" controls>
<source src="Intermission-Walk-in.ogv"></source>
<source src="Intermission-Walk-in_512kb.mp4"></source>
</video>
</body>
</html>
带声音的导航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#ul1{ width:1000px; height:30px;}
#ul1 li{ list-style:none; width:100px; height:30px; background:red; color:white; border:1px #000 solid; float:left; line-height:30px; text-align:center;}
</style>
<script>
window.onload = function(){
var aLi = document.getElementsByTagName('li');
var oA = document.getElementById('a1');
for(var i=0;i<aLi.length;i++){
aLi[i].onmouseover = function(){
//this.getAttribute('au');
oA.src = 'http://s8.qhimg.com/share/audio/piano1/'+this.getAttribute('au')+'4.mp3';
oA.play();
};
}
};
</script>
</head>
<body>
<ul id="ul1">
<li au="a">11111</li>
<li au="b">22222</li>
<li au="c">33333</li>
<li au="d">44444</li>
<li au="e">55555</li>
<li au="f">66666</li>
<li au="g">77777</li>
</ul>
<audio id="a1"></audio>
</body>
</html>
