📖
동영상의 실제 크기를 비디오 엘리먼트의 width와 height에 적용
페이지 정보
본문
JavaScript를 사용하여 동영상의 실제 가로세로 크기를 가져와서 엘리먼트의 속성에 할당할 수 있습니다. 다음은 해당 예제 코드입니다.[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>동영상 크기 가져오기</title>
</head>
<body>
<video id="myVideo" controls>
<source src="동영상 URL" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
// 비디오 엘리먼트 가져오기
var video = document.getElementById('myVideo');
// 비디오의 메타데이터 로드 후 실행
video.addEventListener('loadedmetadata', function() {
// 비디오의 가로세로 크기 가져오기
var videoWidth = video.videoWidth;
var videoHeight = video.videoHeight;
// 비디오 엘리먼트의 크기를 동영상 실제 크기로 설정
video.width = videoWidth;
video.height = videoHeight;
// 결과 출력
console.log('동영상 가로 크기:', videoWidth);
console.log('동영상 세로 크기:', videoHeight);
});
</script>
</body>
</html>[/code]이 코드에서는 loadedmetadata 이벤트에서 비디오의 가로세로 크기를 가져와서, 그 값을 비디오 엘리먼트의 width와 height 속성에 할당하여 동영상의 실제 크기로 설정하고 있습니다.
비디오의 가로 크기를 500px로 고정하고 세로 크기를 비율에 따라 지정하는 방법[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>동영상 크기 가져오기</title>
</head>
<body>
<video id="myVideo" width="500" controls>
<source src="동영상 URL" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
// 비디오 엘리먼트 가져오기
var video = document.getElementById('myVideo');
// 비디오의 메타데이터 로드 후 실행
video.addEventListener('loadedmetadata', function() {
// 비디오의 가로세로 크기 가져오기
var videoWidth = video.videoWidth;
var videoHeight = video.videoHeight;
// 가로 크기를 500px로 고정
var fixedWidth = 500;
// 비율을 계산하여 세로 크기 설정
var fixedHeight = (fixedWidth / videoWidth) * videoHeight;
// 비디오 엘리먼트의 크기를 설정
video.width = fixedWidth;
video.height = fixedHeight;
// 결과 출력
console.log('동영상 가로 크기:', fixedWidth);
console.log('동영상 세로 크기:', fixedHeight);
});
</script>
</body>
</html>[/code]이 코드에서는 loadedmetadata 이벤트에서 가로 크기를 500px로 고정하고, 비율을 계산하여 세로 크기를 설정하고 있습니다. 이를 통해 가로 크기는 500px로 유지되며, 비디오의 원래 비율에 따라 세로 크기가 조정됩니다.
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>동영상 크기 가져오기</title>
</head>
<body>
<video id="myVideo" controls>
<source src="동영상 URL" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
// 비디오 엘리먼트 가져오기
var video = document.getElementById('myVideo');
// 비디오의 메타데이터 로드 후 실행
video.addEventListener('loadedmetadata', function() {
// 비디오의 가로세로 크기 가져오기
var videoWidth = video.videoWidth;
var videoHeight = video.videoHeight;
// 비디오 엘리먼트의 크기를 동영상 실제 크기로 설정
video.width = videoWidth;
video.height = videoHeight;
// 결과 출력
console.log('동영상 가로 크기:', videoWidth);
console.log('동영상 세로 크기:', videoHeight);
});
</script>
</body>
</html>[/code]이 코드에서는 loadedmetadata 이벤트에서 비디오의 가로세로 크기를 가져와서, 그 값을 비디오 엘리먼트의 width와 height 속성에 할당하여 동영상의 실제 크기로 설정하고 있습니다.
비디오의 가로 크기를 500px로 고정하고 세로 크기를 비율에 따라 지정하는 방법[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>동영상 크기 가져오기</title>
</head>
<body>
<video id="myVideo" width="500" controls>
<source src="동영상 URL" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
// 비디오 엘리먼트 가져오기
var video = document.getElementById('myVideo');
// 비디오의 메타데이터 로드 후 실행
video.addEventListener('loadedmetadata', function() {
// 비디오의 가로세로 크기 가져오기
var videoWidth = video.videoWidth;
var videoHeight = video.videoHeight;
// 가로 크기를 500px로 고정
var fixedWidth = 500;
// 비율을 계산하여 세로 크기 설정
var fixedHeight = (fixedWidth / videoWidth) * videoHeight;
// 비디오 엘리먼트의 크기를 설정
video.width = fixedWidth;
video.height = fixedHeight;
// 결과 출력
console.log('동영상 가로 크기:', fixedWidth);
console.log('동영상 세로 크기:', fixedHeight);
});
</script>
</body>
</html>[/code]이 코드에서는 loadedmetadata 이벤트에서 가로 크기를 500px로 고정하고, 비율을 계산하여 세로 크기를 설정하고 있습니다. 이를 통해 가로 크기는 500px로 유지되며, 비디오의 원래 비율에 따라 세로 크기가 조정됩니다.
댓글목록
등록된 댓글이 없습니다.
  |