[ios] iPhone에서 HTML5 비디오 자동 재생

Program / 글쓴이

이상한 문제가 있습니다. 반복되는 배경 비디오로 웹 사이트를 만들려고합니다. 코드는 다음과 같습니다.

<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에서 “저전력 모드”를 꺼야합니다.

답변

다음은 웹 사이트에서 동영상 자동 재생에 대한 모든 어려움을 극복 할 수있는 작은 방법입니다.

  1. 비디오가 재생 중인지 확인하십시오.
  2. 신체 클릭 또는 터치와 같은 이벤트에서 비디오 재생을 트리거합니다.

참고 : 일부 브라우저는 사용자가 기기와 상호 작용하지 않는 한 동영상이 자동 재생되도록 허용하지 않습니다.

따라서 비디오 재생 여부를 확인하는 스크립트는 다음과 같습니다. 

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속성은이 스크립트가 아닌 다른 동영상 태그에 추가해야하는 매우 기본적인 것입니다.

이 링크에서 코드가있는 작업 예제를 볼 수 있습니다.

장치가 저전력 모드 / 데이터 절약 모드 / Safari 브라우저 문제 일 때 비디오를 자동 재생하는 방법

답변