2013-05-02 3 views
0

웹 페이지에서 비디오의 크기를 조절하는 버튼이 필요합니다. 버튼을 먼저 클릭하면 동영상이 커지고 두 번째로 클릭하면 동영상이 작아집니다. 비디오를 더 크게 또는 더 작게 만들지 여부를 추적하려면 변수가 필요하다는 것을 알고 있습니다.비디오 자바 스크립트 크기 조정

<!DOCTYPE html> 
<html> 
<head> 
<title>Simple animations in HTML5</title> 
</head> 
<body> 
<h2> Optical Illusion </h2> 
<video id="illusion" width="640" height="480" controls> 
    <source src="Illusion_movie.ogg"> 
</video> 

<div id="buttonbar"> 
<button onclick="changeSize()">Big/Small</button> 
</div> 

<p> 
Watch the animation for 1 minute, staring at the centre of the image. Then look at   something else near you. 
For a few seconds everything will appear to distort. 
Source: <a href="http://en.wikipedia.org/wiki/File:Illusion_movie.ogg">Wikipedia:Illusion  movie</a> 
</p> 

<script> 
var myVideo=document.getElementById("illusion"); 
var togglesize = false 

if togglesize == true 
{ 
function changeSize() 
{ 
myVideo.width=800; 
togglesize = false; 
} 
} 
else 
{ 
function changeSize() 
{ 
myVideo.width = 400; 
togglesize = true; 
} 
} 
</script> 
</body> 
</html> 

답변

2

클릭 이벤트에이 기능을 첨부하십시오. 도움을

var littleSize = false; 
function changeSize() 
{ 
    myVideo.width = littleSize ? 800 : 400; 
    littleSize = !littleSize;//toggle boolean 
} 

http://jsfiddle.net/uNLHL/

+0

좋은 일 개 감사합니다! – user1554786

관련 문제