Video 태그
Video 태그
정의
HTML video 태그는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다.
매개변수
- autoplay
- 준비되는 비디오가 즉시 재생을 시작하도록 지정
- autoplay="false" ==> autoplay 비활성화
- muted
- 비디오의 오디오 출력이 음소거되도록 지정
- poster
- 이미지가 동영상을 다운로드하는 동안 표시, 또는 사용자까지 재생 버튼 안타를 지정합니다.
- width, height
- 비디오 플레이의 너비와 높이 설정
예시
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
Sorry, your browser doesn't support embedded videos,
but don't worry, you can <a href="videofile.ogg">download it</a>
and watch it with your favorite video player!
</video>
공식 문서: https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video
MediaDevices.getUserMedia()
정의
사용자에게 미디어 입력 장치 사용 권한을 요청하며, 사용자가 수락하면 요청한 미디어 종류의 트랙을 포함한 MediaStream을 반환합니다.
반환하는 값은 MediaStream 객체로 이행하는 Promis 입니다. 사용자가 권한 요청을 거부했거나 일치하는 유형의 미디어를 사용할 수 없는 경우, 프로미스는 각각 NonAllowedError 와 NotFounError로 거부합니다.
매개변수
-
MediaStreamConstraints
-
audio와 video 요청 지정
{ audio: true, video: true }
-
해상도 지정
{ audio: true, video: { width: { min: 1024, ideal: 1280, max: 1920 }, height: { min: 776, ideal: 720, max: 1080 } } }
-
예시
// video 태그
const myFace = document.getElementById("myFace")
let constraints = {
audio: true,
video: {
width: { min: 1024, ideal: 1280, max: 1920 },
height: { min: 776, ideal: 720, max: 1080 }
}
}
let stream;
async function getMedia(constraints) {
try {
stream = await navigator.mediaDevices.getUserMedia(constraints);
myFace.srcObject = stream
/* 스트림 사용 */
} catch(err) {
/* 오류 처리 */
}
}
getMedia(constraints)
공식문서: https://developer.mozilla.org/ko/docs/Web/API/MediaDevices/getUserMedia
Muted, cameraOff
const muteBtn = document.getElementById("mute");
const cameraBtn = document.getElementById("camera");
let muted = false;
let cameraOff = false;
function handleMuteClick() {
stream
.getAudioTracks()
.forEach((track) => (track.enabled = !track.enabled));
if (!muted) {
muteBtn.innerText = "Unmute";
muted = true;
} else {
muteBtn.innerText = "Mute";
muted = false;
}
}
function handleCameraClick() {
stream
.getVideoTracks()
.forEach((track) => (track.enabled = !track.enabled));
if (cameraOff) {
cameraBtn.innerText = "Turn Camera Off";
cameraOff = false;
} else {
cameraBtn.innertText = "Turn Camera On";
cameraOff = True;
}
}
muteBtn.addEventListener("click", handleMuteClick);
cameraBtn.addEventListener("click", handleCameraClick);
MediaStram.getVideoTracks()
이 스트림의 비디오 트랙을 나타내는 일련의 MediaStreamTrack 개체를 반환합니다
MediaStram.getAudioTracks()
이 스트림의 오디오 트랙을 나타내는 일련의 MediaStreamTrack 개체를 반환합니다
공식문서: https://developer.mozilla.org/en-US/docs/Web/API/MediaStream/getVideoTracks
Author And Source
이 문제에 관하여(Video 태그), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@leeyw2709/Video-태그저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)