H5 WeChat 재생 전체 화면 문제에 대한 세부 분석을 위한 샘플 코드

iOS 및 Android 휴대폰에서 WeChat으로 동영상을 재생할 때 많은 문제에 직면하게 됩니다. 예를 들어 동영상을 재생하려면 수동으로 클릭해야 하며 동영상이 WeChat 상자 밖으로 튀어나오고 컨트롤 막대가 나타납니다. .Tencent Video가 아닌 경우 재생 후 Tencent Video의 광고 푸시

해결 방법: 비디오 태그에 일부 속성을 추가하고 h5 네이티브 비디오를 호출하는 등의 문제가 있습니다.

<video  id="videoALL" 
  src="video/01.mp4" 
  poster="images/1.jpg" /*视频封面*/
  preload="auto" 
  webkit-playsinline="true" /*这个属性是ios 10中设置可以
                     让视频在小窗内播放，也就是不是全屏播放*/  
  playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ 
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  /*启用H5播放器,是wechat安卓版特性*/
  x5-video-player-fullscreen="true" /*全屏设置，
                     设置为 true 是防止横屏*/>
  x5-video-orientation="portraint" /*播放器支付的方向，
                     landscape横屏，portraint竖屏，默认值为竖屏*/
  style="object-fit:fill"></video>

poster="images/1.jpg": 속성은 동영상을 다운로드할 때 표시되거나 사용자가 클릭하기 전에 표시되는 이미지를 지정합니다. 재생 버튼 이미지입니다. 이 속성을 설정하지 않으면 비디오의 첫 번째 프레임이 대신 사용됩니다.

preload="auto" : 속성은 페이지가 로드된 후에 비디오가 로드되도록 지정합니다.

webkit-playsinline 및 presentsinline: 동영상은 로컬에서 재생되며 문서 스트림에서 벗어나지 않습니다. 그러나 이 속성은 매우 특별합니다. WeChat의 UIwebview와 같은 앱의 웹페이지에 삽입되어야 하며, allowedInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES가 적용되어야 합니다. 즉, 앱이 이를 설정하지 않으면 페이지에 이 태그를 추가하는 것이 유효하지 않습니다. 이것이 바로 Android 휴대폰의 WeChat이 항상 전체 화면으로 동영상을 재생하는 이유입니다. 앱은 인라인 재생을 지원하지 않지만 ISO WeChat은 지원하기 때문입니다.

여기에 전체 화면 라이브 방송이나 전체 화면 H5 경험을 하려면 ISO에서 webkit-playsinline 태그를 설정하고 삭제해야 한다는 점을 추가하고 싶습니다. Android에서는 기본 전체 화면이므로 필요하지 않습니다. 하지만 현재 전체 화면에는 컨트롤 설정 여부에 관계없이 재생 컨트롤이 있습니다. 라이브 방송을 하는 분들은 재생 컨트롤이 필요할 수 있지만, 전체 화면 H5에는 필요하지 않습니다. 전체 화면 재생 중에 컨트롤을 제거하려면 동일 레이어 재생 설정이 필요합니다.

x5-video-player-type

:

동일한 레이어에서 H5 플레이어를 활성화합니다. 즉, 비디오가 전체 화면일 때 p를 표시할 수 있습니다. 비디오 레이어 및 WeChat Android 관련 속성도 있습니다. 동일 레이어 재생의 별칭은 몰입형 재생이라고도 합니다. 재생할 때 전체 화면처럼 보이지만 컨트롤과 WeChat 탐색 표시줄이 제거되고 "X" 및 "<" 키만 남습니다. 현재 동일 레이어 플레이어는 Android(WeChat 포함)에서만 유효하며, 당분간 iOS는 지원하지 않습니다. 동일한 레이어 재생이 Android에만 열리는 이유는 Android가 ISO처럼 로컬로 재생할 수 없기 때문입니다. 기본 전체 화면은 일부 인터페이스 작업을 차단합니다. 전체 화면 H5라면 괜찮지만 라이브 방송의 경우 다음과 같은 기능이 있습니다. 사격으로 달성하는 것은 불가능하므로 현재 동일 레이어 재생 개념이 이 문제를 해결합니다. 그러나 테스트 중에 ISO와 Android 버전에 따라 효과가 약간 다른 것으로 나타났습니다. x5-video-orientation

:

플레이어가 지원하는 방향을 선언합니다. 선택 값은 가로 가로 화면, 세로 세로 화면입니다. 기본값은 세로입니다. 라이브 방송이든 전체 화면 H5이든 일반적으로 세로로 재생되지만 이 속성에는 H5 모드를 켜려면 x5-video-player-type이 필요합니다 x5-video-player-fullscreen

:

전체화면 설정입니다. true와 false라는 두 가지 속성 값이 있습니다. True는 전체 화면 재생을 지원하고, false는 전체 화면 재생을 지원하지 않습니다. 사실 ISO WeChat 브라우저는 Chrome의 핵심이며, 관련된 모든 속성을 지원하므로 X5는 동일 레이어 재생을 지원하지 않습니다. Android WeChat 브라우저는 X5 커널을 사용하며,playinline과 같은 일부 속성 태그는 지원되지 않으므로 항상 전체 화면입니다.

안드로이드 위챗에서는 위의 속성을 추가해도 상단과 하단에 검은색 테두리가 생기고 화면을 전체화면으로 볼 수 없는 문제가 또 있습니다. 해결책: 스타일 속성 object-fit: fill을 비디오에 추가하세요. 여전히 검은색 테두리가 나타나면 비디오 크기가 부적절할 수 있습니다.

아아아아

아아아아

아아아아아

위 내용은 H5 WeChat 재생 전체 화면 문제에 대한 세부 분석을 위한 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!