망막 디스플레이에 맞게 HTML5 비디오를 최적화 하시겠습니까?

비디오의 저해상도 및 고해상도 버전을 제공하고 싶습니다. 후자는 망막 디스플레이 용입니다. 이 동영상은 html5 페이지에 삽입되어야합니다. 특히 이것은 iPad 웹 앱이 될 것입니다.망막 디스플레이에 맞게 HTML5 비디오를 최적화 하시겠습니까?

브라우저 엔진이 올바른 브라우저 (예 : 복수 <source> 태그)를 선택하도록하는 쉬운 방법이 있습니까, 아니면 JS-foo를 사용해야합니까? 나는 <img>, <canvas> 및 CSS 처리에 대한 많은 솔루션을 찾았지만 비디오는 모범 사례가 아닙니다.

출처

2012-12-11 grefab

좋은 질문입니다. 이미지의 경우 일부 사람들은 망막 이미지를 모든 사람에게 제공하기도합니다. 가시적 인 품질을 잃지 않으면 서보다 적극적인 JPG 압축을 사용할 수 있기 때문입니다 (http://blog.netvlies.nl/design-interactie/retina-revolution/, http://silev.org/test/Retina-resize.html). 비디오에서 비슷한 트릭이 작동하는지 잘 모르겠습니다. 나는 그것이 코덱에 달려 있다고 생각한다. –

source 요소에 media attribute을 사용해보세요.

코드 예는 아래와 같습니다 :

<video controls> 
    <source src="video-small.mp4" type="video/mp4" media="all and (max-width:480px)"> 
    <source src="video-small.webm" type="video/webm" media="all and (max-width:480px)"> 
    <source src="video.mp4" type="video/mp4"> 
    <source src="video.webm" type="video/webm"> 
</video>

문제는 디스플레이가 망막임을 표시하는 데 유용한 미디어 쿼리를 찾는 것입니다.

편집 나는이 조금 더 테스트하고, 그들이 우선 순위를 확보 할 것 같은 당신은 또한 다른 소스의 미디어 쿼리를 설정해야 할 것으로 나타났다. 나는 그것에 관하여 조금 썼다 : HTML5 video for retina displays.

출처

2012-12-11 15:24:33

"디스플레이가 망막임을 나타내는 데 도움이되는 미디어 쿼리를 찾는 것이 문제입니다." - [최소 디바이스 - 픽셀 비율] (http://css-tricks.com/snippets/css/retina-display-media-query/)이거나 최소한 접두어가 붙은 버전 일 것입니다. –

폴 감사합니다! 브라우저 지원이 어떤 것인지 궁금합니다. –

폴 감사합니다! 나는 그 사실을 몰랐다. 브라우저 지원이 어떤 것인지 궁금합니다. –

망막 디스플레이에 맞게 HTML5 비디오를 최적화 하시겠습니까?

답변

관련 문제