iOS 및 Android 폰에서 WeChat 아래에서 비디오를 재생할 때는 많은 문제가 발생하면 동영상을 클릭 해야하는 경우 비디오가 재생되면 WeChat 상자 밖으로 나옵니다. 비디오가 Tencent 비디오가 아닌 경우 재생이 재생됩니다
솔루션 : 비디오에 몇 가지 속성을 추가하고 H5 Native Video를 호출하십시오.<video id = videoall src = video/01.mp4 poster = images/1.jpg/*视频封面*/preload = auto webkit-playsinline = true/*这个属性是 ios 10 中设置可以让视频在小窗内播放즉, 전체 화면 재생* / playsInline = true /* iOS WeChat 브라우저는 작은 창 재생을 지원합니다* / x -webkit-Airplay = x5-video-player-type = h5 /* h5 플레이어 WeChat Android Edition Feature* /x5-Video-Player-Fullscreen = 수평 화면을 방지하기 위해 True true /* 전체 화면 설정* /-video-orientation = intraint /* 플레이어 지불, 조경 수평 TV 화면, 기본값 값은 수직 화면*/ Style = Object-Fils : fill> </ video>입니다.Poster = images/1.jpg : 속성이 비디오 다운로드를 지정할 때 표시되는 이미지 또는 사용자 앞에 표시되는 이미지가 재생 버튼을 클릭합니다. 이 속성이 설정되지 않은 경우 대신 비디오의 첫 번째 프레임을 사용하십시오. Preload = Auto : 속성은 페이지가로드 된 후 비디오를 지정합니다. WebKit-PlaysInline 및 PlaySinline : 비디오 재생 중 로컬 재생은 문서 흐름을 남기지 마십시오. 그러나이 속성은 WeChat의 allowinlinediaplayback = 예와 같은 웹 페이지에 내장되어야하는 앱이 더 특별합니다. 다시 말해, 앱이 설정되지 않으면이 레이블이 페이지에서 효과적이지 않습니다. 앱이 비디오가 플레이 한 이유는 항상 전체 화면입니다.
여기에 추가해야합니다. 풀 스크린 라이브 브로드 캐스트 또는 전체 스크린 H5 경험을하려면 ISO는 WebKit-PolaysInline 태그를 설정해야합니다. 전체 화면이 기본값이기 때문에 필요합니다. 그러나 현재 전체 화면이 컨트롤을 설정했는지 여부에 관계없이 컨트롤을 재생했습니다. 라이브 브로드 캐스트의 라이브 방송은 사용될 수 있지만 전체 화면 H5는 필요하지 않으므로 전체 화면 재생 중 컨트롤의 제어에는 다음 설정이 필요합니다. 동일한 레이어 재생이 필요합니다.
x-webkit-airplay = 허용 당시의 역할을 정확히 알 수는 없지만 Xiaobian 은이 속성 이이 비디오가 iOS의 AirPlay 기능을 지원해야한다고 추측합니다. AirPlay를 사용하면 iOS 장치의 다른 위치에서 비디오, 음악 및 사진 파일을 직접 재생할 수 있습니다 재생은 또한 해당 기능을 지원합니다. X5-Video-Player-Type : 동일한 레이어 H5 플레이어를 활성화합니다. 동일한 레이어의 별명을 재생하면 화면이 전체 화면 인 것처럼 보이지만 X와 <2 키 만 남겨 둡니다. 현재 동일한 레벨 플레이어는 Android (WeChat 포함)에만 적용되며 당분간 iOS를 지원하지 않습니다. 동일한 레이어 재생이 Android에만 열려있는 이유에 대해서는 ISO처럼 Android를 재생할 수 없기 때문에 기본 전체 화면으로 인해 일부 인터페이스 작업이 차단되면 H5가 달성 할 수 없습니다. 현재 동일한 층 이이 문제를 해결합니다. 그러나 테스트 중에 다른 버전의 ISO 및 Android 효과가 약간 다릅니다. X5- 비디오 지향 : 플레이어가 지원하는 방향, 선택적 가치 조경 수평 스크린, 인상적인 수직 스크린을 선언합니다. 기본값 인상. 라이브 브로드 캐스트와 풀 스크린 H5는 일반적으로 수직 스크린으로 재생되지만이 속성은 x5-video-player 유형이 H5 모드를 열어야합니다. X5- 비디오 플레이어 포도 화면 : 전체 화면 설정. True는 전체 화면 재생을 지원하며 False는 전체 화면 재생을 지원하지 않습니다.실제로 ISO WeChat 브라우저는 Chrome의 핵심이며 관련 속성이 지원되며 X5가 동일한 레이어에 의해 지원되지 않는 이유입니다. Android WeChat 브라우저는 X5 커널입니다.
Android의 Wechat에도 문제가 있습니다. 속성이 추가 되더라도 검은 모서리가 위아래로 문제가됩니다.
솔루션 : 객체-피트 추가 : 비디오에 스타일 속성. 여전히 검은 모서리가 있으면 비디오 크기가 부적절합니다.<div id = videobox> <video id = videoall src = mp4.mp4 포스터 = 1.jpg preload = auto webkit-playsinline = true playsinline = true = 허용 x5-video-player-type = h5 x5- 비디오-플레이어-풀 스크린 = true x5-video-orientation = intraint style = object-fit : fill> </video> <div id = playcontr ()> </div> </div> <div id = videoend> <div id = acclick = PlayContr ()> </div> </div>
*패딩 : 0; 100%; 배경 -크기 : #againbtn {width : 75px; : -40.5px; 2. JPG); 배경 크기; <cript> varide videoall = getElementById ( 'videoall'), videobox = document.getElementById ( 'videobox'), videond = document.getElementById ( 'videoend'); .docmeentElement.clientWidth; document.documentledle.width = clientWidth + 'PX'videoAll.Style.height = 'Auto'; 예방자 ()} 'PX'; .indexof ( 'adr')> -1; iOS 터미널 함수 playContr () {if (isandroid) {videoall.style.width = window.style.head.head.screen.height + 'px';} videobox.style.display = videoall.style.display; , function () {videoAlll.Style.display = none.display = block;};위는 Xiaobian이 연주하는 HTML5 Wechat의 전체 화면 문제에 대한 해결책입니다. VEVB WULIN 웹 사이트를 지원해 주셔서 대단히 감사합니다!