반응형
JavaScript를 사용하여 동영상의 실제 가로세로 크기를 가져와서 엘리먼트의 속성에 할당할 수 있습니다. 다음은 해당 예제 코드입니다.
<!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>이 코드에서는 loadedmetadata 이벤트에서 비디오의 가로세로 크기를 가져와서, 그 값을 비디오 엘리먼트의 width와 height 속성에 할당하여 동영상의 실제 크기로 설정하고 있습니다.
비디오의 가로 크기를 500px로 고정하고 세로 크기를 비율에 따라 지정하는 방법
<!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>이 코드에서는 loadedmetadata 이벤트에서 가로 크기를 500px로 고정하고, 비율을 계산하여 세로 크기를 설정하고 있습니다. 이를 통해 가로 크기는 500px로 유지되며, 비디오의 원래 비율에 따라 세로 크기가 조정됩니다.
반응형
'SMART GPT' 카테고리의 다른 글
| getElementsByClassName 사용하기 (0) | 2024.08.06 |
|---|---|
| 텍스트에 직접 그라데이션 색상을 적용하려면? (0) | 2024.07.27 |
| 일반적으로 사용되는 해상도별 미디어 쿼리 예시 (0) | 2024.05.19 |
| 정규표현식 한글 특수문자 숫자 영문 분리(문자와 숫자를 제외한 모든 문자 제거) (0) | 2024.02.03 |
| 이미지, 동영상, 텍스트 가로 세로 사이즈 구하기 (0) | 2023.12.16 |
| JavaScript 원하는 자릿수의 랜덤 숫자를 생성하는 함수 (0) | 2023.10.13 |
| mix-blend-mode 블렌딩 모드를 설정하는 속성 (0) | 2023.10.06 |
| 모바일 웹 애플리케이션에서 confirm() 및 alert() 창 대신 간단한 커스텀 모달 창 (0) | 2023.10.05 |
댓글