이상한 문제가 있습니다. 반복되는 배경 비디오로 웹 사이트를 만들려고합니다. 코드는 다음과 같습니다.
<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>이것은 대부분의 브라우저에서 완벽하게 작동하지만 (IE는이 객체에 맞는 것에 어려움을 겪지 만 괜찮습니다) iPhone에서는 비디오가 자동 재생되지 않지만 iPad에서는 작동합니다. 이미 iOS 용 새 정책을 읽었으며 요구 사항을 충족한다고 생각합니다 (그렇지 않으면 iPad가 자동 재생되지 않음). 다른 테스트를 수행했습니다.
- 오버레이 div를 제거해도 문제가 해결되지 않습니다.
- Z- 색인을 제거해도 문제가 해결되지 않습니다.
- Wi-Fi 또는 Cellular는 차이를 만들지 않습니다.
- 비디오 파일 크기도 차이를 만들지 않습니다.
내가 잘못하고 있거나 iPhone이 단순히 비디오를 자동 재생하지 않고 항상 상호 작용이 필요합니까? 저는 iOS 10 만 신경 쓰고 있습니다. iOS 9에서는 요구 사항이 다르다는 것을 알고 있습니다.
답변
않습니다 playsinline 속성 도움을?
내가 가진 것은 다음과 같습니다.
<video autoplay loop muted playsinline class="video-background ">
<source src="videos/intro-video3.mp4" type="video/mp4">
</video>
https://webkit.org/blog/6784/new-video-policies-for-ios/ 에서 댓글을 참조 playsinline하십시오.
답변
iOS 10 이상에서는 인라인 동영상 자동 재생이 가능합니다. 하지만 iPhone에서 “저전력 모드”를 꺼야합니다.
답변
다음은 웹 사이트에서 동영상 자동 재생에 대한 모든 어려움을 극복 할 수있는 작은 방법입니다.
- 비디오가 재생 중인지 확인하십시오.
- 신체 클릭 또는 터치와 같은 이벤트에서 비디오 재생을 트리거합니다.
참고 : 일부 브라우저는 사용자가 기기와 상호 작용하지 않는 한 동영상이 자동 재생되도록 허용하지 않습니다.
따라서 비디오 재생 여부를 확인하는 스크립트는 다음과 같습니다.
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});
그런 다음 본문에 이벤트 리스너를 연결하여 비디오를 자동으로 재생할 수 있습니다.
$('body').on('click touchstart', function () {
const videoElement = document.getElementById('home_video');
if (videoElement.playing) {
// video is already playing so do nothing
}
else {
// video is not playing
// so play video now
videoElement.play();
}
});
참고 : autoplay속성은이 스크립트가 아닌 다른 동영상 태그에 추가해야하는 매우 기본적인 것입니다.
이 링크에서 코드가있는 작업 예제를 볼 수 있습니다.
