最近在系统的学习HTML5的新功能,做了些基础了练习
主要是播放/暂停:play(); pause();
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#video1{
margin-top:10px;
}
audio{
margin-top:20px;
width:320px;
}
</style>
</head>
<body>
<div style="text-align:center;">
<button οnclick="playPause()">play/pause</button>
<button οnclick="makeBig()">lg</button>
<button οnclick="makeNormal()">md</button>
<button οnclick="makeSmall()">sm</button></br>
<!-- <video controls="controls" autoplay="autoplay" loop="loop" width="320" height="240"> -->
<video id="video1" width="320">
<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg">
<source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
</video></br>
<audio controls="controls">
<source src="http://www.w3school.com.cn/i/song.ogg" type="audio/ogg">
<source src="http://www.w3school.com.cn/i/song.mp3" type="audio/mpeg">
</audio>
</div>
<script type="text/javascript">
var myVideo=document.getElementById("video1");
function playPause(){
if(myVideo.paused){
myVideo.play();
}else{
myVideo.pause();
}
}
function makeBig(){
myVideo.width=560;
}
function makeNormal(){
myVideo.width=420;
}
function makeSmall(){
myVideo.width=320;
}
</script>
</body>
</html>