닝기미 뭔 생각으로 기본 video태그에 다운로드 버튼을 만들어놨는지
내 기가막혀서.. 구글 하는짓이 다 이러함 써글
상황은 이러하다
아이폰은 상관이 없지만 안드로이드 구글 브라우저의 크롬 버전을 각기 다르게 사용한다.
실제로 안드로이드 삼성갤럭시 원에서는 다운로드 버튼이 나오지 않지만 LG신형폰은 다운로드 버튼이 나온다.
이유는 구글 크롬 브라우저의 버전이 55 >= 부터 다운로드 버튼이 존재하기 때문이다.
망할
뭔 개똥같은 생각으로 크롬 엔진에 VIDEO TAG 다운로드 버튼을 만들어 놨는지 이녀석을 보이게 하거나 기능을 중지시키는 방법 자체가 존재하지 않라는 점.
공유도 좋지만 일반적으로 자사의 컨텐츠를 다운로드 되지 않길 바라는 회사가 수두룩하다.
그냥 다운로드 버튼만 누르면 음원이든 영상이든 다 다운받게 해놓는건 무슨 개수작인지!
다행히 해법은 두가지가 존재한다.
하나는 VIDEO TAG 시스템 컨트롤을 숨기고 그 자리에 커스텀 컨트롤을 만들어 붙이는 방법이고
다른 방법은 다운로드 버튼의 위치를 안보이게 밀어내버리는 방법이다.
결론부터 말하자면 커스텀 컨트롤을 만드는 방법은 특정 폰에선 커스텀 컨트롤 터치가 되지 않는 현상을 접하곤 GG
사실 이 커스텀 컨트롤을 만들어 붙이면 몇가지 난관이 존재한다.
바로 전체화면시 커스텀 컨트롤을 붙여야 한다란 점, VIDEO TAG가 전체화면 돌입시 최상단에 붙어버리는 점 등등 좀 귀찮다.
이제 본론인 후자의 방법
즉 크롬 브라우저의 다운로드 버튼을 안보이게 밀어내버리는 방법을 설명하겠다.
사실 이 방법은 서양 형님들도 애용하는 방법이지만 난 이 방법 + 각 버전별 대응 방법을 가미한 내용을 공개하겠다.
난 착하니까 드래그도 될 수 있게 해뒀다.
한국인들 중 몇몇 (사실 다수) 바보들은 기술 포스팅에 드래그도 못하게 막아놓은 애들이 있는데...
에효.... 한심하다. 그렇게 살지 말자.. 차라리 비공개 포스팅으로 해둬라 웹 검색 힘들다.
전세계를 둘러봐라 누가 블로그에 드래그 막아놨나?
이제 정말 본론이다. CLASSIC ASP기준으로 설명하겠다.
나 PHP, JSP 모른다.
대신 VISUAL C++, OBJECTIVE C, VISUAL BASIC, ASP 할줄안다.
그러니 토달지 말아라
1. 안드로이드용 크롬 브라우저 USER AGENT를 살펴보면 이런식이다.
보이는가? 캔유씨?
Chrome/51.0.2704.106 이부분이 바로 크롬 브라우저의 버전이다.
여기에서 원하는 부분 Chrome/51.0에서 51만 추출해 내겠다.
2. 원하는 부분인 크롬의 버전을 추출해내자
Dim strCromeVersion, strUserAgent, nCromePos, arrCromeVersion, nMoveDownloadButton
nMoveDownloadButton = "0" 'CSS용 기준 수치 설정:일단 0으로 해둠
strUserAgent = Request.ServerVariables("HTTP_USER_AGENT") 'USER AGENT추출
nCromePos = inStr(strUserAgent, "Chrome/") '아이폰은 크롬이 없을테니 크롬 문자열 위치를 확인
if nCromePos > 0 then
arrCromeVersion = Split(mid(replace(strUserAgent, "Chrome/", ""), nCromePos, 30),".") '크롬 문자열이 존재한다면 문자열 자체를 날려버린 후 그 위치부터가 버전정보임
'사실 2~3자리만 추출해 내도 되지만 세상이 어찌 변할지 모르니 30자 여유롭게
if ubound(arrCromeVersion) > 0 then '버전 정보를 . 을 기준으로 배열에 담았으므로 배열이 존재하는지 체크
if cint(arrCromeVersion(0)) >= 55 then '첫번째가 버전 정보이므로 이 버전이 55이상인지 확인
nMoveDownloadButton = "50" 'CSS용 기준 수치 저장
end if
end if
end if
3. 이제 CSS로 가보자. 아래 스타일 부분이 핵심이다. 또한 width: calc(100% + <%=nMoveDownloadButton%>px); 여기보면 위에서 구한 밀어낼 픽셀 값이 들어있다.
만약 크롬55 이상 버전이면 VIDEO 컨트롤은 전체화면보기 버튼 다음에 다운로드 버튼이 존재한다.
하지만 그 이하 버전이라면 전체화면보기 버튼만 존재한다.
크롬 55이상 버전인 경우 다운로드 버튼이 나타날테니 50px 밀려서 저멀리 사라질 것이다.
그 이하 버전이라면 0px 밀어낼것이므로 전체화면으로 보기 버튼이 그대로 보여진다.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes, target-densitydpi=medium-dpi" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>이히히</title>
<style>
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + <%=nMoveDownloadButton%>px);
}
</style>
</head>
4. 이걸로 끝~
웃기시네
구글 놈들이 참 사악하다.
VIDEO 영역을 길게 눌러봐라
팝업이 뜬다.
즉 CONTEXT MENU
윈도우로 따지자면 마우스 오른쪽 버튼처럼 뜨면서 다운로드 하실래예~ 뿌잉뿌잉 이지랄한다.
써글 졸라 귀찮다.
JAVASCRIPT의 힘을 빌리자
<video id="video" playsinline webkit-playsinline width="100%" height="auto" poster="videothumb.jpg" controls onclick="playPause();">
<source src="test.mp4" type="video/mp4" />
</video>
<script type="text/javascript">
$(document).ready(function() {
$('#video').bind('contextmenu', function() { return false; }); //VIDEO의 ID가 video임. contextmenu 나오면 false처리해주셈
});
</script>
5. 이걸로 진짜 끝이다.
아 욕나온다.
이틀동안 컨트롤 숨겨도 보고, 제어하는 방법 찾아 삼만리에 커스텀 컨트롤 만들어보고 오픈소스 붙여보며 삽질하다 정말 마지막 심정으로 버전별로 대응해볼까? 순간 생각이 들어 처리한게 적중했다.
