전제 조건:
비디오 태그는 비디오를 전달합니다.
발생한 문제:
- WeChat에서 재생 버튼을 클릭하면 자동으로 전체 화면으로 재생됩니다.
- ios에서 동영상의 표지는 첫 프레임을 얻지 못합니다. PC와 안드로이드는 정상입니다.
예상하다:
- WeChat에서 재생을 클릭하면 전체 화면이 아닌 현재 페이지에 계속 표시됩니다. .
- 모든 장치의 경우 첫 번째 프레임을 포스터로 사용합니다.
솔루션: 첫 번째 문제의 경우 설정 및 속성
으로 쉽게 수행할 수 있습니다. 레이블 쓰기:webkit-playsinlineplaysinline
<video src="https://vjs.zencdn.net/v/oceans.mp4" playsinline="playsinline" webkit-playsinline="webkit-playsinline"></video>
또는 js 설정을 사용하십시오.
for(const video of document.querySelectorAll('video')) { //我这里有多个vedio标签
video.setAttribute('webkit-playsinline', 'webkit-playsinline');
video.setAttribute('playsinline', 'playsinline');
video.setAttribute('muted', 'muted');
video.setAttribute('autoplay', 'autoplay');
setTimeout(() => video.pause(), 800);
video.append('您的浏览器不支持video播放');
}
두 번째 문제에 대한 솔루션과 관련하여 위의 코드가 표시되었습니다.
먼저 비디오를 자동 모드로 설정하여 직접 재생할 수 있습니다. 그렇지 않으면 크롬과 같은 상위 버전의 일부 브라우저는 자동 재생만 쓸 수 있고 자동 재생을 수행할 수 없습니다. 그 후 800ms를 지연하고 재생을 일시 중지하여 비디오가 첫 번째 프레임의 시작 부분에 멈추고 표지가 성공적으로 설정되도록 합니다.