HTML5 WeChat에서 전체 화면 재생 문제를 해결하는 방법

이 기사에서는 HTML5 WeChat에서 전체 화면 재생 문제를 해결하는 방법에 대한 새로운 지식을 계속 제공합니다. iOS 및 Android 휴대폰에서 WeChat으로 비디오를 재생할 때 많은 문제가 발생합니다. 예를 들어 비디오가 재생되기 전에 수동으로 클릭해야 하며 비디오가 WeChat 상자 밖으로 튀어나오고 컨트롤 막대가 나타납니다. 동영상이 Tencent Video가 아닌 경우 동영상 재생 후 동영상이 재생되지 않습니다. Tencent Video의 광고 푸시와 같은 문제가 나타납니다

해결책: 동영상 태그에 일부 속성을 추가하고 h5 기본 동영상을 호출합니다.

<video></video>
  x5-video-orientation="portraint" /*播放器支付的方向，
                     landscape横屏，portraint竖屏，默认值为竖屏*/
  style="object-fit:fill">

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

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

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

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

x-webkit-airplay="allow" 정확히 무엇을 하는지는 알 수 없지만, 편집자는 이 속성이 이 영상이 iOS의 AirPlay 기능을 지원해야 한다고 추측합니다. AirPlay를 사용하면 iOS 기기의 다양한 위치에서 직접 비디오, 음악 및 사진 파일을 재생할 수 있습니다. 즉, AirPlay 기능을 통해 오디오 및 비디오 파일의 무선 재생이 가능하다는 것입니다. 재생에 사용되는 단말 장치도 해당 기능을 지원해야 합니다.

x5-video-player-type: 동일한 레이어에서 H5 플레이어를 활성화합니다. 즉, 동영상이 전체 화면일 때 p가 동영상 레이어에 표시될 수 있으며 이는 WeChat Android 버전의 고유한 속성이기도 합니다. 동일 레이어 재생의 별칭은 몰입형 재생이라고도 합니다. 재생할 때 전체 화면처럼 보이지만 컨트롤과 WeChat 탐색 표시줄이 제거되고 "X" 및 "

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

x5-video-player-fullscreen: 전체 화면 설정을 켜려면 x5-video-player-type이 필요합니다. true와 false라는 두 가지 속성 값이 있습니다. True는 전체 화면 재생을 지원하고, false는 전체 화면 재생을 지원하지 않습니다.

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

또 다른 문제가 있는 안드로이드 위챗에서는 위의 속성을 추가해도 여전히 상단과 하단에 검은색 테두리가 생기고 화면을 전체화면으로 볼 수 없는 문제가 발생합니다.

해결책: 비디오에 스타일 속성 object-fit: fill을 추가하세요. 여전히 검은색 테두리가 나타나는 경우 영상 크기가 부적절할 수 있습니다.

rreee

<p>
   <video>
    </video> 
   </p><p></p>

<p></p><p></p>

*{
            padding: 0;
            margin: 0;
        }
    #videobox{position: absolute;width: 100%;height: 100%;background-color: green;background-image: url(1.jpg);background-size: 100% 100%;background-position: top;overflow: hidden;}
    #videoALL{
  height: auto;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  object-fit: fill;
  display: block;
  background-size: cover;
  overflow: hidden;}
    #btn,#againbtn{width: 81px;height: 75px;position: absolute;top: 50%;left:50%;margin-top: -37.5px;margin-left: -40.5px;background-image: url(btn.png);background-size: 100% 100%;}
    #videoend{position: absolute;background-color: pink;display: none;background-image: url(2.jpg);background-size: cover;background-position: top;}

다들 배우셨나요? 서둘러서 사용해 보세요.

관련 추천:

HTML5는 휴대폰 코드 스캔 기능과 그 장점과 단점을 켭니다_html5 튜토리얼 기술

HTML5 전역 속성에 대한 가장 완벽한 요약

HTML5 단일 페이지 제스처 슬라이딩 화면 전환 원리 분석

위 내용은 HTML5 WeChat에서 전체 화면 재생 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!