H5 동일 레이어 비디오 플레이어 액세스 예시 공유

이 기사에서는 주로 WeChat x5-video-player-type에서 동일한 레이어의 H5 비디오 플레이어에 액세스하는 방법에 대한 튜토리얼을 공유합니다. 동일한 레이어의 H5 플레이어를 활성화하려면 비디오를 통해 동일한 레이어의 H5 플레이어를 선언하세요. 속성 "x5-video-player-type". x5-video-player-type에서 지원되는 값 유형: h5

예:

<video src="http://xxx.mp4" x5-video-player-type="h5"/>

참고: 이 속성은 재생 전에 설정해야 합니다. 아래의 'x5-video-player-fullscreen'도 마찬가지입니다.

x5-video-player-fullscreen 전체 화면 모드

동영상 재생 시 전체 화면 모드로 들어갑니다

이 속성이 선언되지 않으면 뷰포트 영역은 ​​페이지는 WeChat과 같이 원래 뷰포트 크기(동영상이 재생되기 전)가 되며 이 속성이 선언되지 않으면 제목 표시줄의 높이가 제공되지 않습니다. 페이지는 재생 중에 두 개의 동일한 부분(상단 및 하단 검정색 블록)으로 나뉩니다. 참고: 이 속성을 선언하려면 페이지 자체가 새 뷰포트 크기 변경에 맞게 다시 조정되어야 합니다. 이는 크기 조정 이벤트를 청취하여 달성할 수 있습니다

<video id="test_video" src="xxx" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>

전체 화면을 달성하려면 창 크기 변경(크기 조정)을 모니터링해야 합니다

window.onresize = function(){

  test_video.style.width = window.innerWidth + "px";

  test_video.style.height = window.innerHeight + "px";

}

참고: 1. 비디오가 실제로 전체 화면을 채우도록 하려면 적절하게 할 수 있습니다. 비디오의 표시 영역을 뷰포트 영역보다 크게 만들어 표시 시 뷰포트 외부 부분이 잘린 후 주변에 검은색 테두리가 생기지 않도록 합니다.

x5-video-orientation은 수평을 제어합니다.

기능: 플레이어가 지원하는 방향을 선언합니다.

선택 값: 가로 가로 화면, 세로 세로 화면

기본값: 세로

e.g: http://res.imtt.qq.com/ qqbrow...

가로 화면

<video ... x5-video-player-type=”h5” x5-video-orientation="landscape"/>

세로 화면

<video ... x5-video-player-type="h5" x5-video-orientation="portrait"/>

자동으로 회전하려면 휴대폰을 따라가세요

<video x5-video-player-type="h5" x5-video-orientation="landscape|portrait"/>

참고: 이 속성은 x5-video-player-type="h5"가 선언된 경우에만 적용됩니다

이벤트 callback

x5videoenterfullscreen은 전체 화면 알림을 시작합니다

지원 버전: TBS는 >=036900에서 지원되고, QB는 >= 7.2 vX5VideoEnterfullScreen 지원 시작: JS를 통해 전체 화면 상태로 들어가는 플레이어를 나타냅니다. 사건 모니터링

<video id=“myVideo".../>

E

VIDEOEEXITFULLLLLLLLLLEN 전체 화면 종료 알림

X5VIDEOEEXITFULLLLLLLLLLEN: 플레이어가 전체 화면 모양의 모양을 종료한다는 의미입니다. 사용 방법은 X5VIDEOENTERLLLLLLLLLLLEN과 유사합니다.

동일 레이어 플레이어 사용에 대한 몇 가지 제안

적응형 뷰포트 크기 변경을 구현하기 위해 크기 조정 이벤트를 수신하면 비디오 재생 중에 뷰포트 크기가 조정됩니다

비디오 재생 중 상호 작용, 팝업 상자, 비디오 영역 외부가 아닌 비디오 영역의 자막

라이브 전체 화면 영상의 경우 인터랙티브 요소를 상단에 넣지 않는 것이 가장 좋습니다

1. 인터랙티브 영상 구현 제안
2. 영상 영역(영상 요소) 위 작업 허용

3. 전체 화면 인터랙션이 필요한 분들을 위해 , 비디오 영역을 뷰포트 크기>

동일 레이어 플레이어 지원 버전

TBS WeChat:

TBS 커널>=036849으로 설정한 다음

1. UA 지원을 시작할 수 있습니다. 예:
   Mozilla/5.0(Linux; Android 4.4.4; OPPO R7 빌드/KTU84P) AppleWebKit/537.36(KHTML, like Gecko) 버전/4.0 Chrome/37.0.0.0 모바일 MQQBrowser/6.8 TBS/036849 Safari/537.36 MicroMessenger/ 6.3.27.861 NetType/WIFI 언어/zh_CN

TBS 모바일 QQ:

TBS 커널>= 036855

Android QQ 브라우저:

브라우저 버전>=7.1

UA 예:

UserAgent: Mozilla/ 5.0(Linux; U; Android 4.4.4; zhcn; OPPO R7 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36

영상 표시 위치 제어

기본 영상은 지정된 영역의 중앙에 표시됩니다. CSS 객체 위치 속성을 통해 비디오의 표시 위치(왼쪽 상단)를 제어할 수 있습니다

예: http://res.imtt.qq.com/qqbrow...

Top:

myVideo.addEventListener("x5videoenterfullscreen", function(){

  alert("player enterfullscreen");

})

Rendering:

하단 디스플레이:

myVideo.style["object-position"]= "0px 0px"

효과:

관련 권장 사항:

HTML5 MiranaVideo 플레이어(코드 오픈 소스) _html5 튜토리얼 기술

위 내용은 H5 동일 레이어 비디오 플레이어 액세스 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!