HTML5 비디오 : 비디오 위에 일반 html 콘텐츠를 배치하는 것이 가능합니다.

일반 HTML 콘텐츠 (주로 img 태그)를 얻는 방법을 아는 사람이 비디오 태그를 통해 비디오 상단에 표시 할 수 있습니까?HTML5 비디오 : 비디오 위에 일반 html 콘텐츠를 배치하는 것이 가능합니다.

2011-01-07 Jason Miesionczek

왜 포스터 속성을 사용하지 않습니까? 그렇게하면 비디오가로드되거나 재생 될 때까지 이미지를 표시 할 수 있습니다.

2011-01-07 15:06:50

아이디어는 비디오 디자인 부분의 일부로 비디오를 통합하려고합니다. 비디오 위쪽 부분이 비디오가 부분적으로 아래처럼 보이게 만듭니다. 비디오 자체에 이미지를 넣으려고했으나 압축으로 인해 색상 및 크기가 약간 변경되어 그 차이가 눈에.니다. –

이 특별한 예제에서 생각할 수있는 유일한 해결책은 JavaScript를 사용하여 div/img를 비디오 상단에 자동으로 넣는 것입니다. 그렇게하면 비디오가 페이지와 함께로드되어 이미지를 방해하지 않습니다. Z- 색인을 계속 주시 할 수도 있습니다. –

해당 div의 배경으로 비디오를 설정할 수 있습니까? 귀하의 레이아웃에 맞는지 확실하지 않은 경우 ...

출처

2011-01-07 15:50:32 zenbike

어떻게 비디오를 배경으로 설정합니까? –

HTML5 비디오 위에 비디오 요소를 절대적으로 배치하여 html 요소를 간단하게 배치 할 수 있습니다. video 요소와 HTML 요소를 모두 "position : absolute"로 지정하고 HTML 요소를 동영상 요소보다 높은 z 색인에 배치합니다.

출처

2011-02-23 08:45:31 jj1910

이 작업의 예가 있습니까? –

다음은 그 예입니다. 하지만 다음 번에는 직접 해봐야합니다. 비용은 5 분;) : http://jsfiddle.net/GxvyG/ –

절대 위치 지정을 사용하여 VIDEO 요소 위에 HTML 요소를 배치하는 것은 매우 쉽습니다. 이 문제는 아이폰, 아이팟, 그리고 아마도 얇은 네이티브 재생 클라이언트와는 달리 페이지에서 인라인으로 비디오 자산을 재생하지 않는 오래된 안드로이드 폰에서 이벤트를 캡처하려고 할 때 발생합니다. 그 이유는 해당 인스턴스가 VIDEO 요소이기 때문입니다 탐욕스럽게 사건을 포착합니다.

당신이 IMAGE 요소 또는 당신이 "포스터"또는 "미리보기"로 사용하고 싶은 이미지의 background-image 세트와 DIV를 사용하는 경우, 사용자가 비디오를 얻을 그들에 탭 할 수 없습니다 재생 시작 - 모바일 브라우저는이 동작을 해당 공간에 존재하는 것처럼 처리합니다 (좋은 재생 버튼이있는 곳을 클릭하면 발생하지만 좋다고 말하면 좋음). 하지 중간에 사용자 지정 컨트롤.

솔루션 내가 과거에 사용했던 당신이 일반적으로 VIDEO 요소를 넣고을 이동 할 경우 단지 페이지의 IMG 또는 DIV 포스터를 넣어하는 것입니다3210 요소 (예 : left 스타일이 -3000px로 설정 됨)가 더 이상 해당 이벤트를 저장할 수 없습니다.

나는 이것이 정확히 무엇인지 물어 보지 않았지만,이 정보가 누군가에게 유용 할 것입니다.

출처

2012-07-11 17:48:01 natlee75

+1 귀하의 방법에 동의합니다. 사용자 작업 (예 : 버튼 클릭)이 필요한 제 3 자 라이브러리를 구현해야했습니다. 퀵타임 플레이어는 악몽이었다. 처음에는 표시 할 비디오 요소를 설정합니다 : 없음 및 사용자 동작 후에 만 보여주었습니다. 비디오 요소가 어디서나 전체 화면으로 열리는 것처럼 실제로 어디서 문제가되지 않으므로이 방법은 완벽합니다. CSS를 사용하면 사용자를 속일 수 있습니다. – sidarcy

http://stackoverflow.com/questions/3683211/ipad-safari-mobile-seems-to-ignore-z-indexing-position-for-html5-video-elements – RobW

HTML5 비디오 : 비디오 위에 일반 html 콘텐츠를 배치하는 것이 가능합니다.

답변

관련 문제