H5 동일 레이어 비디오 플레이어 액세스 예시 공유
- 小云云원래의
- 2018-02-09 16:01:134024검색
이 기사에서는 주로 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과 유사합니다.
동일 레이어 플레이어 사용에 대한 몇 가지 제안 적응형 뷰포트 크기 변경을 구현하기 위해 크기 조정 이벤트를 수신하면 비디오 재생 중에 뷰포트 크기가 조정됩니다 비디오 재생 중 상호 작용, 팝업 상자, 비디오 영역 외부가 아닌 비디오 영역의 자막 라이브 전체 화면 영상의 경우 인터랙티브 요소를 상단에 넣지 않는 것이 가장 좋습니다- 인터랙티브 영상 구현 제안
- 영상 영역(영상 요소) 위 작업 허용
- 전체 화면 인터랙션이 필요한 분들을 위해 , 비디오 영역을 뷰포트 크기>
- 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
기본 영상은 지정된 영역의 중앙에 표시됩니다. CSS 객체 위치 속성을 통해 비디오의 표시 위치(왼쪽 상단)를 제어할 수 있습니다예: http://res.imtt.qq.com/qqbrow... Top:
myVideo.addEventListener("x5videoenterfullscreen", function(){
alert("player enterfullscreen");
})
Rendering:
하단 디스플레이:
myVideo.style["object-position"]= "0px 0px"
효과:
관련 권장 사항:
위 내용은 H5 동일 레이어 비디오 플레이어 액세스 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!