H5 WeChat 재생을 전체 화면으로 구현하는 방법

이번에는 H5 WeChat에서 전체 화면 재생을 구현하는 방법과 H5 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-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></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>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천도서:

H5의 저장방법에 대한 자세한 설명

zepto를 사용하면 모바일에서도 원활한 위아래 스크롤이 가능합니다

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