iPhone에서 HTML5 비디오 자동 재생

iPhone에서 HTML5 비디오 자동 재생

저는 좀 이상한 문제가 있습니다.저는 루프된 배경 영상으로 웹사이트를 만들려고 노력합니다.코드는 다음과 같습니다.

<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가 자동으로 재생되지 않습니다).다른 테스트를 해봤습니다.

• 중첩 디브를 제거해도 해결되지 않습니다.
• z-index를 제거해도 해결되지 않습니다.
• 와이파이나 셀룰러는 차이가 없습니다.
• 비디오 파일 크기도 차이가 없습니다.

제가 잘못하고 있는 건가요, 아니면 아이폰이 비디오를 자동으로 재생하지 않고 항상 상호 작용이 필요한가요?저는 iOS 10에만 관심이 있습니다. iOS 9에서는 요구 사항이 달랐다는 것을 알고 있습니다.

한다playsinline속성 도움말?

제가 가진 것은 다음과 같습니다.

<video autoplay loop muted playsinline class="video-background ">
  <source src="videos/intro-video3.mp4" type="video/mp4">
</video>

다음 댓글 보기playsinline여기: https://webkit.org/blog/6784/new-video-policies-for-ios/

iOS 10+는 비디오 자동 재생을 인라인으로 허용합니다.하지만 당신은 당신의 아이폰에서 "저전력 모드"를 꺼야 합니다.

웹사이트에서 비디오 자동 재생을 위해 겪는 모든 어려움을 극복할 수 있는 작은 해킹이 있습니다.

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속성은 매우 기본적이며 이러한 스크립트 이외의 비디오 태그에 이미 추가해야 합니다.

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

장치가 저전력 모드/데이터 저장 모드/사파리 브라우저 문제일 때 비디오를 자동으로 재생하는 방법

저도 비슷한 문제가 있었고 여러 가지 해결책을 시도했습니다.저는 두 가지 고려 사항을 구현하여 해결했습니다.

1. 사용.dangerouslySetInnerHtml내장하기 위해<video>코드. 예:

<div dangerouslySetInnerHTML={{ __html: `
    <video class="video-js" playsinline autoplay loop muted>
        <source src="../video_path.mp4" type="video/mp4"/>
    </video>`}}
/>

2. 비디오 무게의 크기를 조정합니다.iPhone에서 3메가바이트 이상의 비디오를 자동으로 재생하지 않습니다.그래서 저는 온라인 압축기 도구(https://www.mp4compress.com/) 를 사용하여 4MB에서 500KB 미만으로 이동했습니다.

또한 @boltcoder의 가이드에 감사드립니다.React on mobile (Safari / iOS 10+)을 사용하여 HTML5 동영상 자동 재생

저도 같은 문제가 있었습니다. iOS에서 동영상이 재생되지 않습니다.저는 모든 코드 옵션 "라인 자동 재생 루프 음소거"를 시도했습니다.문제는 제가 받은 동영상이 잘못된 mp4 코덱에 있다는 것입니다.그래서 저희에게 도움이 된 것은 비디오를 Vimeo에 업로드하고 HD 버전을 다시 다운로드하는 것이었습니다.이제 모든 모바일 장치에서 비디오가 재생됩니다.

MPEG 스트림 클립을 사용할 수도 있습니다.여기 VLC의 스크린 클립이 있습니다. 올바른 설정입니다.누군가가 문제를 찾는데 2시간을 보내지 않기를 바랍니다. - 행복한 휴일입니다.

답변이 늦어서 죄송합니다. 오늘은 동영상 자동 재생을 위해 아이폰의 배터리 절약 기능을 해제해야 한다는 것을 알게 되었습니다.

여기 IOS에서 비디오를 자동 재생하는 간단한 솔루션이 있습니다. 이미 시도해 보았는데 IOS, Android, 다양한 플랫폼의 모든 브라우저에서 완벽하게 작동합니다.

비디오에는 (data-wf-ignore) 및 (data-object-fit) 특성을 사용하고 소스 태그에는 data-wf-ignore를 사용합니다.

코드 작업 예제는 다음 스니펫에서 확인할 수 있습니다.

<video id="myVideo" autoplay="" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" data-wf-ignore="true" />
</video>

언급URL : https://stackoverflow.com/questions/43570460/html5-video-autoplay-on-iphone