HTML5 WeChat에서 전체 화면 재생 문제를 해결하는 방법-H5 튜토리얼-php.cn

iOS 및 Android 휴대폰에서 WeChat으로 비디오를 재생할 때 많은 문제가 발생합니다. 예를 들어 비디오가 재생되기 전에 수동으로 클릭해야 하며 비디오가 WeChat 상자 밖으로 튀어나오고 컨트롤 막대가 나타납니다. 동영상이 Tencent Video가 아닌 경우 재생이 완료됩니다. Tencent Video의 광고 푸시 등의 문제가 있을 수 있습니다. 어떻게 해결해야 할까요? 이 글에서는 HTML5 WeChat 재생의 전체 화면 문제에 대한 해결 방법을 공유하겠습니다. 모두에게 도움이 될 수 있습니다.

해결책: 비디오 태그에 몇 가지 속성을 추가하고 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 태그를 설정하고 삭제해야 한다는 점을 여기에 추가하고 싶습니다. false로 설정하면 지원되지 않기 때문입니다. 안드로이드는 기본적으로 전체 화면이기 때문에 필요하지 않습니다. 하지만 현재 전체 화면에는 컨트롤 설정 여부에 관계없이 재생 컨트롤이 있습니다. 라이브 방송을 하는 분들은 재생 컨트롤이 필요할 수 있지만, 전체 화면 H5에는 필요하지 않습니다. 전체 화면 재생 중에 컨트롤을 제거하려면 동일 레이어 재생 설정이 필요합니다.

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

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

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

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

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

<p id="videobox">
   <video 
    id="videoALL" 
    src="mp4.mp4" 
    poster="1.jpg" 
    preload="auto" 
    webkit-playsinline="true" 
    playsinline="true" 
    x-webkit-airplay="allow" 
    x5-video-player-type="h5" 
    x5-video-player-fullscreen="true" 
    x5-video-orientation="portraint"
    style="object-fit:fill">
    </video> 
   <p id="btn" onclick="playcontr()"></p>
</p>
<p id="videoend"><p id="againbtn" onclick="playcontr()"></p></p></p>
<p></p>
<p></p>
<pre class="brush:php;toolbar:false">*{
            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;}

로그인 후 복사

<script>
var videoALL = document.getElementById('videoALL'),
    videobox = document.getElementById('videobox'),
    btn = document.getElementById('btn'),
    videoend =  document.getElementById('videoend');
var clientWidth = document.documentElement.clientWidth;
var clientHeight = document.documentElement.clientHeight;
videoALL.style.width = clientWidth + 'px';
videoALL.style.height = 'auto';
document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
function stylep(pId){
    pId.style.width = clientWidth + 'px';
    pId.style.height = clientHeight +200+ 'px'; 
}
stylep(videobox);
stylep(videoend);
var u = navigator.userAgent; 
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 
function playcontr(){
    if (isAndroid) {
       videoALL.style.width = window.screen.width + 'px';
       videoALL.style.height = window.screen.height + 'px'; 
    }
    videobox.style.display = "block";
    videoALL.play();
    btn.style.display = "none";
    videoend.style.display = "none";
};
videoALL.addEventListener('pause',function(){  
    videoALL.style.width = clientWidth + 'px';
    btn.style.display = "block";
})  
videoALL.addEventListener("ended",function(){
    videoALL.pause();
    videobox.style.display = "none";
    videoend.style.display = "block";
});
</script>

로그인 후 복사

다들 배워보셨나요? 서둘러서 한번 시도해 보세요.