wechatVideoExample
1.0.0
WeChat에서 동영상 재생을 위한 소스 코드 테스트: WeChat은 X5 브라우저를 사용하기 때문에 video 태그를 사용하여 동영상을 재생할 때 여러 가지 이상한 문제가 발생합니다. 본 소스코드는 이 문제를 해결하는 과정에서 만들어진 임시 소스코드입니다. 여기에는 캔버스를 사용하여 비디오 재생, 사진을 사용하여 비디오 재생, x5 태그 사용 등 다양한 테스트 사례가 포함됩니다. 이 사용 가능한 소스 코드 라이브러리는 보관할 수 있으며 관심 있는 학생들이 직접 다운로드할 수 있습니다.
###소개를 다운로드한 후 호스트에 새 디렉터리를 만들고 모든 소스 코드를 이 디렉터리에 복사합니다. WeChat 브라우저를 사용하여 내부 HTML 페이지에 액세스하여 테스트하세요.
작성자 chenjsh36 Ant 금융데이터체험기술팀
트래픽 시대의 도래와 하드웨어 기술의 발전으로 인해 점점 더 많은 웹사이트들이 PC나 모바일 단말기에서 자신의 비디오를 재생하기를 희망하고 있습니다 . 재생 시나리오.
이 문서에서는 주로 비디오 재생에 대한 일반적인 시나리오와 각 시나리오에서 발생하는 함정을 나열합니다. 이는 개발자가 적절한 기술 솔루션을 보다 신속하게 선택하고 수요 발생 빈도에 직면할 때 함정을 줄이는 데 도움이 되기를 바랍니다.
autoPlay 부울 속성을 지정하면 비디오가 자동으로 즉시 재생되기 시작하고 데이터 로드를 기다리지 않습니다.
비디오 자동 재생은 페이지가 열려 있고 리소스가 충분히 로드되면 자동으로 비디오를 재생할 수 있어 사용자 클릭 한 번으로 인한 상호 작용을 줄일 수 있습니다. 또한 동적 배경 및 H5 모방 화상 통화 기능에도 적용할 수 있습니다. 그러나 여러 가지 이유로 인해 자동 재생은 PC와 모바일 단말기 모두에서 다양한 정도의 제한을 받습니다.
초기에는 재생하려면 사용자 제스처 비디오 태그가 필요했지만, 버전 10부터 비디오 규칙이 수정되었으며 Apple은 인라인 및 자동 재생 전략을 다음과 같습니다(Safari 브라우저에만 적용 가능).
<video> 요소는 소스 미디어에 오디오 트랙이 포함되어 있지 않은 경우 사용자 동작 없이 autoplay 이 허용됩니다(오디오 소스가 없는 비디오 요소는 자동 재생을 허용합니다).<video muted> 요소는 사용자 동작 없이도 자동 재생이 허용됩니다.<video> 요소가 오디오 트랙을 얻거나 사용자 동작 없이 음소거가 해제되면 재생이 일시 중지됩니다.<video autoplay> 요소는 뷰포트로 스크롤되거나 CSS를 통해 표시되거나 DOM에 삽입될 때와 같이 화면에 표시될 때만 재생을 시작합니다(비디오 요소는 화면에 표시될 때만 재생을 시작합니다).<video autoplay> 요소는 뷰포트 밖으로 스크롤되는 등의 이유로 보이지 않게 되면 일시중지됩니다. __초기__에는 재생하려면 사용자 동작이 필요했습니다. Android의 Chrome 53에서는 자동 재생 정책이 iOS의 Safari와 다릅니다. 자동 재생을 허용하려면 동영상에 자동 재생 과 음소거 (사운드 음소거 여부)를 동시에 설정해야 합니다. ; __Android의 FireFox 및 UC 브라우저__는 어떤 상황에서도 자동 재생을 지원합니다. 현재 다른 Android 브라우저의 상황은 불분명합니다.
초기에는 자동재생이 지원됐으나 최근 사파리와 크롬에서 잇달아 자동재생 전략을 수정했는데...
__Safari 10 이상__ 자동 재생에서는 기본적으로 오디오가 포함된 비디오 및 오디오가 비활성화되어 있습니다 .
Chrome(이전 버전)에서 자동 재생:
Safari(10 이후)는 자동으로 재생되지 않습니다.
음소거된 동영상은 계속 재생할 수 있습니다. 소리가 있는 동영상은 __미디어 참여 지수__에 따라 자동으로 재생됩니다. 공식 설명 및 관련 치수는 다음과 같습니다.
MEI는 현재 사이트에서 사용자의 미디어 참여를 평가하는 지표입니다. 이는 다음 차원에 따라 달라집니다.
- 사용자가 7초 이상 미디어에 머물렀습니다.
- 오디오가 표시되어야 하며 음소거되어서는 안 됩니다.
- 비디오와 상호작용함
- 미디어 크기는 200x140 이상이어야 합니다.
이 글을 읽은 개발자의 생각은 다음과 같습니다.
다행스럽게도 Safari와 Chrome은 모두 자동 재생을 제한하면서도 비디오가 자동으로 재생될 수 있는지 감지하는 메커니즘을 제공하므로 개발자는 자동 재생이 불가능하다고 판단되는 경우 대안을 찾을 수 있습니다.
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.catch(error => {
// Auto-play was prevented
// Show a UI element to let the user manually start playback
}).then(() => {
// Auto-play started
});
}
파괴적일 수 있고 데이터가 많이 소모되며 많은 사용자가 좋아하지 않기 때문입니다 . (왜냐하면 파괴적이고 데이터가 많이 소모되며 많은 사용자가 좋아하지 않기 때문입니다.)
WeChat에서 자동으로 재생되는 H5를 자주 볼 수 있다는 것을 알았습니다. 그러나 작성자가 autoplay 및 presentsInline을 사용하여 작성한 비디오 재생 예제는 여전히 WeChat에서는 자동으로 재생되지 않지만 DingTalk에서는 자동으로 재생될 수 있습니다.
| 시스템 브라우저 | 소리와 함께 | 소리 없이 |
|---|---|---|
| IOS 딩톡 | 지원하다 | 지원하다 |
| iOS 사파리 | 금지하다 | 자동재생 |
| iOS 위챗 | 금지하다 | 금지하다 |
정보 조회를 통해 IOS WebAPP 개발은 IOS에서 제공하는 브라우저 커널을 기반으로 하므로 WebAPP의 웹뷰에서 자동 재생 성능을 수정할 수 있습니다. 반면 WeChat은 자동 재생을 금지하지만 내장 기능을 제공합니다. 자동 재생을 지원하는 이벤트:
WeChat에서 WeixinJSBridgeReady 이벤트를 통한 자동 재생:
document . addEventListener (
'WeixinJSBridgeReady' ,
function ( ) {
video . play ( ) ;
} ,
false
) ; 모바일 브라우저에서 사용자가 재생을 클릭하거나 API video.play()를 통해 재생을 실행하면 동영상이 강제로 상단에서 전체 화면으로 재생됩니다. 원래 의도는 전체 화면을 제공할 수 있다는 것입니다. 더 나은 사용자 경험을 제공하지만 때로는 개발자가 다른 요구 사항을 충족하기 위해 전체 화면으로 전환할지 여부를 제어할 수 있기를 원합니다.
전체 화면이 아닌 재생을 원할 경우 비디오 태그에 playinline 속성을 추가하면 됩니다. 이 속성은 기본적으로 웹킷 커널 기반 모바일 브라우저에서는 문제가 되지 않습니다. 작동하지 않으면 webkit-playsinline을 추가하면 됩니다.
< video
src = {videoUrl}
webkit-playsinline =" true "
playsinline =" true "
/>그렇다면 다른 커널이 있는 브라우저를 어떻게 처리해야 할까요? 이때 현재 시중에 나와 있는 브라우저가 무엇인지 이해해야 합니다.
먼저, 현재 전 세계 4개의 브라우저 코어를 알아야 합니다.
안에:
UC Browser, QQ Browser, Baidu Mobile Browser, 360 Secure Browser, Google Chrome, Sogou Mobile Browser, Cheetah Browser 등 일반적인 국내 PC 브라우저와 모바일 UC, QQ, Baidu 및 기타 모바일 브라우저는 기본적으로 Webkit을 기반으로 커널을 수정했습니다. 시중의 모바일 사용자들은 기본적으로 웹킷 커널이나 웹킷 커널을 기반으로 수정된 브라우저를 사용하고 있다고 생각하면 플레이인라인의 호환성은 매우 좋습니다!
video 요소는 개발자가 비디오 재생을 제어할 수 있는 여러 동작 이벤트를 제공합니다. 호환성이 좋은 이벤트에는 onended , __ontimeupdate, onplay, onplaying 등 이 포함됩니다. __일부 이벤트는 다양한 브라우저 및 기기에서 일관되게 동작하지 않습니다.
예를 들어, iOS에서 ' canplay ' 모니터링(부드러운 재생을 위해 충분한 데이터가 버퍼링되었는지 여부)은 __preload="auto" __가 쓸모 없더라도 로드 시 트리거되지 않지만 PC의 Chrome 디버거에서는 다음으로 실행됩니다. 로딩 단계에서 트리거됩니다. iOS가 실행되기 전에 먼저 플레이해야 합니다.
로드 완료됨:
재생하려면 클릭하세요:
로드 완료됨:
재생하려면 클릭하세요.
로드 완료됨:
재생하려면 클릭하세요:
일부 이벤트는 시스템, 장치, 브라우저에 따라 표시 특성이 일관되지 않으므로 주의해서 사용하세요.
이 속성에 컨트롤이 추가되면 Gecko는 사용자 컨트롤을 제공하여 사용자가 볼륨, 프레임 교차 및 재생 일시 중지/재개를 포함한 비디오 재생을 제어할 수 있도록 합니다.
컨트롤 속성은 브라우저가 비디오에 대한 재생 컨트롤을 제공해야 함을 지정합니다. 그렇지 않으면 재생 컨트롤이 숨겨지므로 개발자는 자신의 재생 컨트롤을 사용자 지정할 수 있습니다. 재생 컨트롤 숨기기는 PC 및 IOS 모바일 단말기에서 호환성이 좋습니다 . 그러나 Android 모바일 단말기에서는 컨트롤 숨기기가 지원되지 않지만 일부 방법을 통해 여전히 숨길 수 있습니다.
더 정교한 방법은 비디오를 확대하고 컨트롤 막대를 시야 밖으로 이동하여 숨겨진 효과를 얻는 것입니다! 실제로 이는 비디오 요소를 상위 컨테이너보다 크게 만들어 하단 컨트롤 막대가 상위 컨테이너 외부에 있게 한 다음 상위 컨테이너를 다음과 같이 설정하는 것입니다. 재생 컨트롤을 숨기는 메소드인 오버플로:숨김 ! 단점은 영상이 확대되기 때문에 확대를 위해서는 미리 공백을 남겨두셔야 합니다.
Tencent 안드로이드 팀의 x5 커널 팀은 비디오 재생에 대한 제한을 완화했습니다. 비디오는 반드시 많은 비판을 받는 비디오 플레이어를 호출하지 않으며 제어 요소를 숨기기 위해 __x5-video-player-type="h5" 속성을 사용합니다. 동시에 __비디오가 더 이상 상단에 표시되지 않아 다른 요소가 상단에 떠 있을 수 있습니다 .
비디오 재생의 일반적인 시나리오와 일반적인 함정을 이해한 후에는 다양한 시나리오에 해당하는 솔루션을 제공하여 사용자 경험을 향상시킬 수 있습니다. 예를 들어 모바일 장치에서 자동으로 재생되는 H5 페이지는 사용자에게 클릭하거나 슬라이드하도록 안내하여 간접적으로 비디오 재생을 실행할 수 있습니다. 이는 버그가 없는 가장 보수적인 접근 방식입니다. 더 나은 솔루션은 기본적으로 자동으로 재생하고 재생이 금지된 상황을 캡처한 다음 사용자가 상호 작용하여 비디오를 재생할 수 있도록 안내하는 것입니다.
비디오를 사용하다 초기에는 모바일 단말기에서 동영상 재생이 고성능 소모, 높은 트래픽 소모, 사용자 경험 등을 고려하여 심각하게 제한되었으나, 모바일폰 성능이 향상되고 트래픽 시대가 도래하며 장면이 더욱 강력해졌습니다. 요구 사항에 따라 제한 사항이 점진적으로 완화되는 반면, PC 측면은 점차적으로 완화되었습니다. 점차적으로 "느슨한 세대"에서 "긴축적인 세대"로 이동하면서 둘 다 사용자에게 더 나은 경험을 제공하기 위해 지속적으로 전략을 업데이트하고 있으며 향후에는 통합될 수 있으며 개발자는 최하위 계층에서 시작할 수 있습니다. 호환성과 적응력을 확보하여 더 높은 수준의 작업을 수행할 수 있는 더 많은 에너지를 확보하세요.
저희 팀에 관심이 있으시면 칼럼을 팔로우하시거나, github을 팔로우하시거나, 'tao.qit####alibaba-inc.com'.replace('####', '@')로 이력서를 보내주세요. 높은 이상을 가진 분이라면 누구나 참여하실 수 있습니다~
원래 주소: https://github.com/ProtoTeam/blog/blob/master/201806/1.md
