login register Sysop! about ME  

2016년 09월 06일 19시 45분 00초,     조회수 : 2477
  제목 : 웹브라우저별 동영상 색상 차이 문제
SEQ : 1663 글쓴이 : hskim618

작성 포맷 : TEXT 모드, 자동 줄바꿈 사용

이번에 웹서버에 짧은 동영상을 올리고 
웹브라우저에서 감상할 수 있게 작업을 했습니다.

그런데 웹브라우저별로 색이 조금 다르게 보이더군요.
제 눈으로도 구별이 될 정도라서
그래픽하시는 분은 더 크게 느끼시는 것 같더군요.

검색해 보니 브라우저별로 비디오 플레이어 구현이 달라서
브라우저에 따라 색상이 조금 다르게 보인다고 합니다.

예를 들어 IE11에서는 안티알리아싱이 적용이 안 돼서 계단 현상이 발생하지만
색상은 윈도우의 비디오 플레이어와 동일하게 나옵니다

크롬은 안티알리아싱이 적용되어 선이 깨끗하게 보이지만
약간 물빠진 색감으로 나옵니다.
비디오에 포함된 색상 정보를 무시한다는 말도 있네요..

스택오버플로우에 색상 차이를 줄이는 방법이 있더군요..
http://stackoverflow.com/questions/30359068/firefox-chrome-safari-have-grey-background-for-mp4-html5-
video

css로 video 태그의 부모 태그에 필터를 걸어 brightness를 108.5%로 지정하는 방법이에요.
<style>
.brightness{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter 
id=\'brightness\'><feColorMatrix type=\'matrix\' values=\'1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.2 0\'/>
</filter></svg>#brightness"); /* Firefox 3.5+ */
    -webkit-filter:brightness(108.5%); /* Chrome 19+ & Safari 6+ */
}
</style>

<div class="brightness">
<video src="http://www.botlibre.com/media/a786628.mp4"></video>
</div>

다른 해결 방법으로는 웹브라우저 기본 플레이어를 사용하지 않고
다른 웹플레이어를 사용하는 방법이 있습니다.
유튜브에 올리고 유튜브가 알아서 처리하도록 하는 방법도 있구요..

그리고 위 글에 따르면 비디오 카드 설정에 따라서도 색상이 달라진다고 하네요.

이상입니다. ^^
도움이 되었으면 좋겠네요.. 

  taeyo
  2017-10-24(03:58)
캐릭 이미지
좋은 정보 감사합니다.
  julboy2
  2018-04-27(17:30)
대박!!!!
이런건 정말 생각도 못했네요!!!!



제목 작성자 날짜 조회
웹브라우저별 동영상 색상 차이 문제 (2) hskim618 2016-09-06 2477

 
 
.NET과 Java 동영상 기반의 교육사이트

로딩 중입니다...

서버 프레임워크 지원 : NeoDEEX
based on ASP.NET 3.5
Creative Commons License
{5}
{2} 읽음   :{3} ({4})