HTML5를 사용하여 WeChat에서 전체 화면 재생을 구현하는 방법에 대한 자세한 설명

iOS 및 Android 휴대폰에서 WeChat으로 동영상을 재생할 때 많은 문제에 직면하게 됩니다. 예를 들어 동영상을 재생하려면 수동으로 클릭해야 하며 동영상이 WeChat 상자 밖으로 튀어나오고 컨트롤 막대가 나타납니다. .동영상이 Tencent Video가 아닌 경우 재생 후 Tencent Video의 광고 푸시와 같은 문제가 발생합니다. 해결 방법 이 기사에서는 HTML5 WeChat 재생의 전체 화면 문제에 대한 해결 방법을 알려 드리겠습니다. 🎜>

iOS 및 Android 휴대폰에서 WeChat으로 동영상을 재생할 때 많은 문제에 직면하게 됩니다. 예를 들어 동영상을 재생하려면 수동으로 클릭해야 하며 동영상이 WeChat 상자와 컨트롤 막대에서 튀어나옵니다. Tencent 동영상이 아닌 경우

재생 후 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 태그해야 한다는 점을 추가하고 싶습니다. false로 설정하면 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을 비디오에 추가하세요. 여전히 검은색 테두리가 나타나는 경우 영상 크기가 부적절할 수 있습니다.

<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>

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

【관련 추천】1. Html5 무료 동영상 튜토리얼

2. 브라우저 호환성 문제에 대한 자세한 설명

3. H5를 사용하여 새로고침 없이 현재 URL을 변경하는 방법을 알려드립니다.

4. phonegap을 통한 데이터베이스 운영에 대한 자세한 튜토리얼

5. H5에서 indexedDB 데이터베이스 사용법에 대한 자세한 설명

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