모바일 환경 페이지 갱신이 잘 안됨.
PC에선 변경된 항목이 반영되었는데, 모바일에선 새로고침을 계속 해도 업데이트가 잘 안됨.
1. Video,Audio Player
- <video src="비디오파일주소" controls loop muted autoplay poster="이미지주소">브라우저가 지원하지 못할 시 표시할 내용</video>
- controls : 영상 컨트롤러
- loop : 반복여부. loop = "loop" 설정시 반복
- muted : 음소거
- autoplay : 자동재생
- poster : 섬네일 이미지
- controlsList="nodownload" : 컨트롤러에 영상 다운로드 메뉴 삭제
- oncontextmenu="return false;" : 마우스 우클릭 방지
- 자동 실행의 경우 muted가 아닌이상 자동재생 되지 않음 (브라우저에서 막음)
- Audio의 경우 태그명이 audio이며 나무지는 동일.
- 안드로이드 크롬, 아이폰 사파리에서 영상 재생됨을 확인
- 참조 : https://www.w3schools.com/tags/ref_av_dom.asp
<video id="vid" oncontextmenu="return false;" src="https://god-of-interview-streaming.s3.ap-northeast-2.amazonaws.com/Test/Lecture_cloth_6.mp4" controls ></video>
<script>
document.getElementById("vid").play();
</script>* 이슈 : 영상 자동 재생 방법, 영상 다운로드 방지 방법
- 영상 자동재생 조건 : https://dev-momo.tistory.com/entry/HTML-Video-Tag%EC%9D%98-%EC%9E%90%EB%8F%99%EC%9E%AC%EC%83%9Dauto-play-%EC%A1%B0%EA%B1%B4
- 아이폰 영상 재생시, 기본 플레이어로 재생되는듯 하며, 페이지 재생이 아니다. 따라서 페이지 내에서 다른 동작을 할 수 없다.
2. 음성 녹음
- 크롬 버전 47이상 및 파이어폭스 버전 25이상 지원, 사파리 모바일 11이상 지원
- 모바일에서는 https 접속만 권한을 물어봄
- 권한 획득 필요
- MediaRecorder API를 이용하여 녹음 진행.
=> navigator.mediaDevices.getUserMedia
- 예제 : 링크 : https://mido22.github.io/MediaRecorder-sample/
=> 안드로이드 크롬브라우저 동작확인, 아이폰 사파리의 경우 녹음은 되는듯하나 플레이는 안됨(샘플이 ogg)
=> 녹음 및 재생을 wav로 해야 함
- 아이폰의 경우, 세팅 -> 사파리 -> 고급 -> Experimental Features -> MediaRecorder 켜야함
=> 동작을 할 때가 있고, 안할때가 있다...
* (안드로이드) 영상 재생도중 마이크 입력을 하면, 영상이 음소거 됨 -> 마이크 입력완료후에도 음소거된 영상이 회복되지 않음.
=> 새로운 video 태그 삽입 후 동작해도 음소거 된 상태로 영상 플레이됨
=> 볼륨값을 변경해도 소용없음
=> Mute 후 Mute 해제 해도 소용없음
=> PC는 정상 동작
- 예제코드 :
<!DOCTYPE html>
<html>
<head>
<title>MediaRecorder API - Sample</title>
</head>
<body>
<h1> MediaRecorder API example</h1>
<div id='label'></div>
<div id='gUMArea'>
<div>
Record:
<input type="radio" name="media" value="audio">audio
</div>
<button class="btn btn-default" id='gUMbtn'>Request Stream</button>
</div>
<div id='btns'>
<button class="btn btn-default" id='start'>Start</button>
<button class="btn btn-default" id='stop'>Stop</button>
</div>
<div>
<ul class="list-unstyled" id='ul'></ul>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
let log = console.log.bind(console),
id = val => document.getElementById(val),
ul = id('ul'),
gUMbtn = id('gUMbtn'),
start = id('start'),
stop = id('stop'),
stream,
recorder,
counter=1,
chunks,
media;
$(document).ready(function()
{
//마이크 지원여부
if(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia)
$("#label").text("Mic Available");
else
$("#label").text("Mic not available");
});
gUMbtn.onclick = e => {
let mv = id('mediaVideo'),
mediaOptions = {
audio: {
tag: 'audio',
type: 'audio/wav',
ext: '.wav',
gUM: {audio: true}
}
};
media = mediaOptions.audio;
navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => {
stream = _stream;
id('gUMArea').style.display = 'none';
id('btns').style.display = 'inherit';
start.removeAttribute('disabled');
recorder = new MediaRecorder(stream);
recorder.ondataavailable = e => {
chunks.push(e.data);
if(recorder.state == 'inactive') makeLink();
};
log('got media successfully');
}).catch(log);
}
start.onclick = e => {
start.disabled = true;
stop.removeAttribute('disabled');
chunks=[];
recorder.start();
}
stop.onclick = e => {
stop.disabled = true;
recorder.stop();
start.removeAttribute('disabled');
}
function makeLink(){
let blob = new Blob(chunks, {type: media.type })
, url = URL.createObjectURL(blob)
, li = document.createElement('li')
, mt = document.createElement(media.tag)
, hf = document.createElement('a')
;
mt.controls = true;
mt.src = url;
hf.href = url;
hf.download = `${counter++}${media.ext}`;
hf.innerHTML = `donwload ${hf.download}`;
li.appendChild(mt);
li.appendChild(hf);
ul.appendChild(li);
}
</script>
</body>
</html>
* 두개의 테스트 가능 사이트 위치 : https://3park.github.io/ (Dean 개인)
* Github를 통한 https 테스트 : https://mintpot.synology.me:30000/boards/2/topics/311
* 소스는 첨부파일로 업로드
'FrontEnd' 카테고리의 다른 글
| [node.js] 애플실리콘 칩 에서 package.json 세팅 변경(node-sass, react) (0) | 2024.07.15 |
|---|---|
| PWA (Progressive Web Application) (0) | 2022.03.25 |
| 부트스트랩 (0) | 2022.03.25 |
| vue js 내용정리 (2.7. 트랜지션 ~) (0) | 2022.03.25 |
| vue js 내용정리 (2.3.9 컴포넌트-slot태그 ~ 2.6. 사용자 정의 이벤트) (0) | 2022.03.25 |