<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.9.1.js"></script>
</head>
<body style="margin-top: 10px">
<div style="position: absolute;top:30px;left: 10px;" id="controls"><button id="play">播放</button><button id="pause" style="display: none">暂停</button><button id="big">2X</button><button id="normal">1X</button><button id="small">0.5X</button></div>
<video id="myVideo" src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4"
style="width: 320px;height: 176px;margin-top: 0px;">
你的浏览器不支持video标签,请换一个浏览器试试
</video>
<script>
var video = $("#myVideo")[0],
width = $(video).width(),
height = $(video).height();
$("#controls").delegate("#play","click",function(){
video.play();
$(this).hide();
$("#pause").show();
})
$("#controls").delegate("#pause","click",function(){
video.pause();
$(this).hide();
$("#play").show();
})
$("#controls").delegate("#big","click",function(){
$(video).css("width",width*2).css("height",height*2);
})
$("#controls").delegate("#normal","click",function(){
$(video).css("width",width).css("height",height);
})
$("#controls").delegate("#small","click",function(){
$(video).css("width",width/2).css("height",height/2);
})
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.9.1.js"></script>
</head>
<body style="margin-top: 10px">
<div style="position: absolute;top:30px;left: 10px;" id="controls"><button id="play">播放</button><button id="pause" style="display: none">暂停</button><button id="big">2X</button><button id="normal">1X</button><button id="small">0.5X</button></div>
<video id="myVideo" src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4"
style="width: 320px;height: 176px;margin-top: 0px;">
你的浏览器不支持video标签,请换一个浏览器试试
</video>
<script>
var video = $("#myVideo")[0],
width = $(video).width(),
height = $(video).height();
$("#controls").delegate("#play","click",function(){
video.play();
$(this).hide();
$("#pause").show();
})
$("#controls").delegate("#pause","click",function(){
video.pause();
$(this).hide();
$("#play").show();
})
$("#controls").delegate("#big","click",function(){
$(video).css("width",width*2).css("height",height*2);
})
$("#controls").delegate("#normal","click",function(){
$(video).css("width",width).css("height",height);
})
$("#controls").delegate("#small","click",function(){
$(video).css("width",width/2).css("height",height/2);
})
</script>
</body>
</html>