동층 플레이어의 사용은 일반 비디오 요소와 크게 다르지 않지만' X5-비디오-플레이어-유형' 과' X5- 비디오-플레이어-전체 화면' 이라는 두 가지 X5 사용자 정의 속성을 추가해야 합니다.
같은 레이어 플레이어에 테스트 페이지를 포함합시다.
재생을 클릭하면 비디오 요소가 전체 화면을 차지하며 비디오 부분은 기본적으로 중앙에 표시됩니다.
공식 파일에 따라 비디오 요소의' object-position' 속성을 수정하여 비디오 부분이 표시되는 위치를 수정할 수 있지만 실제로 비디오 요소의 폭과 높이는 화면의 폭과 높이로 설정해야 합니다.
효과는 다음과 같습니다 (오른쪽).
비디오 요소의 높이를 화면 높이로 설정할 때 "document" 대신 "window.screen.height" 를 사용해야 합니다. Documentelement. Clientheight "는 내비게이션 막대의 높이가 포함되지 않아 화면을 채울 수 없기 때문입니다 (위 왼쪽).
아래에 제목 블록을 추가합니다.
그러나 재생을 클릭하여 전체 화면 상태로 들어가면 제목 표시줄이 사라집니다. 같은 계층의 플레이어를 덮어쓸 수 있기 때문에 절대 포지셔닝을 시도합니다.
제목 표시줄은 비디오를 차단하지만 검은색 그라데이션과 왼쪽 및 오른쪽 버튼 (왼쪽 아래) 이 있습니다. 공식 문서에 따르면 이것들은 제거할 수 없다.
다음으로 해야 할 일은 비디오를 아래로 이동하여 전체 UI 가 전체 화면 (오른쪽 위) 에 들어가기 전과 일치하도록 하는 것입니다.
다음 단계는 비디오 요소 뒤에 다른 내용을 추가하는 것입니다.
그러나 전체 화면 상태가 되면 컨텐트 요소가 위로 이동합니다 (왼쪽 아래).
이 요소의 위치도 제목 블록의 높이를 아래로 이동해야 합니다.
다음으로 간단한 클릭 이벤트 응답을 시도합니다.
이 시점에서 전체 화면 상태로 들어간 후 콘텐츠 요소를 클릭하는 것은 반응이 없다. 비디오 요소가 전체 화면을 차지하고 계층 구조가 높아 콘텐츠 요소를 차단하기 때문이다. 문제를 알면 해결책은 간단해지고, 주요 요소의 수준을 높이면 된다.
같은 층의 플레이어의 전체 화면 상태는 한 방향 (기본 수직 화면) 만 지정할 수 있기 때문에, 수직 화면 재생 후에도 강제됩니다. 이 시점에서 전체적인 효과는 그다지 좋지 않습니다.
가로 화면 상태의 폭과 높이가 세로 화면 상태와 정확히 반대이기 때문에 세로 화면을 복원할 때 UI 이상이 발생합니다. 따라서 전체 화면으로 들어갈 때는 너비와 높이를 판단해야 한다. 폭이 높이보다 크면 다음을 교체하십시오.
재생 전 페이지에 스크롤 막대가 있으면 전체 화면으로 스크롤할 수 있습니까? 대답은 실제로 스크롤할 수 있다는 것이지만, 구르기보다는 떨림이라기보다는 구체적인 효과를 스스로 시험해 볼 수 있다는 것이다. 즉, 전체 화면 상태에 들어간 후에는 페이지 스크롤을 사용하지 말고 로컬 스크롤을 사용합니다. 또한 콘텐츠 요소가 너무 높으면 비디오 컨트롤 바를 가릴 수 있는 수준이 높아졌기 때문에 주의해야 합니다.
마지막 문제는 일부 비디오 형식을 재생할 때 진행률 표시줄이 뒤죽박죽이 되어 비 전체 화면 모드로 돌아간다는 것입니다.
이 기사는 저자 개인 블로그: X5 플레이어 평가판 보고서 | 프런트 개발 | 헤로의 블로그에도 게재됩니다.