Safari 및 Chrome 데스크톱 브라우저에서 동영상 자동 재생이 작동하지 않습니다.

비디오가 여기에 포함 된 이유를 알아 내기 위해 많은 시간을 보냈습니다.

<video height="256" loop autoplay muted controls id="vid">
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

페이지가 FireFox에로드되면 자동으로 재생을 시작하지만 Webkit 기반 브라우저에서는 자동 재생을 수행 할 수 없습니다. 이것은 일부 무작위 페이지에서만 발생했습니다. 지금까지 원인을 찾을 수 없었습니다. 닫히지 않은 태그 또는 CMS 편집기가 만든 광범위한 JS가 의심됩니다.

내가 얻을 수있는 가장 좋은 해결책은이 코드를 </video>

<script>
    document.getElementById('vid').play();
</script>

... 예쁘지는 않지만 어떻게 든 작동합니다.

업데이트 최근 많은 브라우저에서 사운드가 꺼진 상태에서만 비디오를 자동 재생할 수 있으므로 muted비디오 태그에도 속성을 추가해야합니다.

<video autoplay muted>
...
</video>

play()다른 답변에서 제안한대로 jQuery 또는 DOM 조작을 사용한 후에도 Android 용 Chrome (버전 56.0)에서 여전히 작동하지 않았습니다 (동영상이 자동 재생되지 않음).

developers.google.com 의이 게시물 에 따라 Chrome 53 에서 동영상이 음소거 된 경우 브라우저에서 자동 재생 옵션 이 적용됩니다 .

따라서 autoplay muted동영상 태그에 속성을 사용 하면 버전 53부터 Chrome 브라우저에서 동영상이 자동 재생 될 수 있습니다.

위 링크에서 발췌 :

두 경우 비디오 음소거 자동 재생은보기에 와서 한 번 재생 비디오 요소에 대해 자동으로 시작됩니다 버전 (53)의 안드로이드에 대한 크롬에서 지원 autoplay하고이 muted설정되어 [...]

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

• 음소거 된 자동 재생은 iOS 10 이상의 Safari에서 지원됩니다.
• 음소거 여부에 관계없이 자동 재생은 Firefox 및 UC 브라우저에 의해 Android에서 이미 지원됩니다. 자동 재생을 차단하지 않습니다.

데스크톱의 Safari 및 Chrome은 비디오 태그 주변의 DOM 조작을 좋아하지 않습니다. 초기 페이지로드 후 동영상 태그 주변의 DOM이 변경된 경우 canplaythrough 이벤트가 실행 된 경우 에도 autoplay 속성이 설정된 경우 재생 순서를 실행하지 않습니다 . 기본적으로 비디오 태그 주변에서 .wrap () jQuery를 삭제하고 그 후 예상대로 자동 재생 될 때까지 동일한 문제가 발생했습니다.

Google은 자동 재생 동영상에 대한 정책을 변경했습니다. muted

여기에서 확인할 수 있습니다 .

그래서 그냥 음소거 추가

<video height="256" loop="true" autoplay="autoplay" controls="controls" id="vid" muted>
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

나에게 문제는 태그 muted내에 속성을 추가해야한다는 것이 었습니다 video. 즉 :

<video width="1920" height="1980" src="video/Night.mp4"
type="video/mp4" frameborder="0" allowfullscreen autoplay loop
muted></video>`

Chrome은 사운드가 켜진 상태에서 동영상 자동 재생을 허용하지 않으므로 다음 과 같이 태그 에 muted속성을 추가해야 video합니다.

<video width="320" height="240"  autoplay muted>
  <source src="video.mp4" type="video/mp4">
</video>

이제 비디오에서 같은 문제가 발생했습니다.

<video preload="none" autoplay="autoplay" loop="loop">
  <source src="Home_Teaser.mp4" type="video/mp4">
  <source src="Home_Teaser" type="video/webm">
  <source src="Home_Teaser.ogv" type="video/ogg">
</video>

검색 후 해결책을 찾았습니다.

"preload"속성을 "true"로 설정하면 비디오가 정상적으로 시작됩니다.

페이지 하단에 아래 코드를 추가하면 저에게 효과적이었습니다. 왜 작동하는지 모르겠습니다.

 setTimeout(function(){
     document.getElementById('vid').play();
 },1000);

이 시도:

  <video width="320" height="240"  autoplay muted>
            <source src="video.mp4" type="video/mp4">
  </video>

var video = document.querySelector('video'); video.muted = true; video.play()

이 솔루션만이 도움이되었지만 <video autoplay muted ...>...</video>작동하지 않았습니다.

다른 답변 중 어느 것도 나를 위해 일하지 않았습니다. 내 해결 방법은 비디오 자체에 대한 클릭을 트리거하는 것이 었습니다. hacky (필요한 시간 초과로 인해)하지만 잘 작동합니다.

function startVideoIfNotStarted () {
    $(".id_of_video_tag").ready(function () {
        window.setTimeout(function(){
            videojs("id_of_video_tag").play()
        }, 1000);
    });
}
$(startVideoIfNotStarted);

최근에 삽입 된 동영상에서 유사한 문제를 해결했으며 자동 재생 및 음소거 속성이 구현에 충분하지 않다는 것을 발견했습니다.

세 번째 "playsinline"속성을 코드에 추가하여 iOS 사용자의 문제를 해결했습니다.

이 수정 사항은 인라인으로 재생할 비디오에만 적용됩니다. 에서 https://webkit.org/blog/6784/new-video-policies-for-ios/ :

이제 iPhone에서 요소가 인라인으로 재생 될 수 있으며 재생이 시작될 때 자동으로 전체 화면 모드로 전환되지 않습니다. playsinline 속성이없는 요소는 iPhone에서 재생하려면 계속 전체 화면 모드가 필요합니다. 핀치 제스처로 전체 화면을 종료 할 때 playsinline이없는 요소는 계속해서 인라인으로 재생됩니다.

Google은 자동 재생 정책을 업데이트했습니다. 자동 재생은 음소거 모드에서만 작동합니다. https://developers.google.com/web/updates/2017/09/autoplay-policy-changes 링크를 확인하십시오.

이 시도:

    <video height="256" loop autoplay controls id="vid">
     <source type="video/mp4" src="video_file.mp4"></source>
     <source type="video/ogg" src="video_file.ogg"></source>

이것은 내가 일반적으로하는 방법입니다. 루프, 컨트롤 및 자동 재생에는 부울 속성 인 값이 필요하지 않습니다.

이것은 이제 크롬이 html5 비디오에서 자동 재생을 차단하기 때문에 기본적으로 자동 재생을 허용하지 않습니다. 크롬 플래그 설정을 사용하여이 설정을 변경할 수 있습니다. 이것은 정상적인 경우에는 불가능하므로 다른 해결책을 찾았습니다. 이것은 완벽하게 작동합니다 ... (add preload = "auto")

<video autoplay preload="auto" loop="loop" muted="muted" id="videoBanner" class="videoBanner">
<source src="banner-video.webm" type="video/webm">
<source src="banner-video.mp4" type="video/mp4">
<source src="banner-video.ogg" type="video/ogg">

var herovide = document.getElementById('videoBanner');
       herovide.autoplay=true;
       herovide.load();  

위에서 언급 한 모든 솔루션을 시도하는 데 2 ​​시간이 걸렸습니다.

이것이 마침내 나를 위해 일한 것입니다.

var vid = document.getElementById("myVideo");
vid.muted = true;

버터가 부족하고 iphone이 저전력 모드 에있을 때 safari Iphone 에서는 동영상 html 태그에 autoplay, loop, muted, playsinline 속성이 설정되어 있어도 자동 재생되지 않습니다 .

내가 찾은 주변 산책은 비디오 재생을 트리거하는 사용자 제스처 이벤트를 갖는 것입니다 .

document.body.addEventListener("touchstart", function () {
    var allVideos = document.querySelectorAll('video');
    for (var i = 0; i < allVideos.length; i++) {
        allVideos[i].play();
    }
},{ once: true });

웹킷 사이트에서 iOS 용 사용자 제스처 및 비디오 정책에 대해 자세히 읽을 수 있습니다.

https://webkit.org/blog/6784/new-video-policies-for-ios/

다른 파일 형식의 순서와 관련이있는 경우가있었습니다. 그것을 변경하고 도움이되는지 확인하십시오.

눈에 보이는 모든 비디오를 재생하기 시작했지만 오래된 휴대폰은 제대로 작동하지 않았습니다. 그래서 지금은 창 중앙에 가장 가까운 비디오를 재생하고 나머지는 일시 중지합니다. 바닐라 JS. 선호하는 알고리즘을 선택할 수 있습니다.

//slowLooper(playAllVisibleVideos);
slowLooper(playVideoClosestToCenter);

function isVideoPlaying(elem) {
    if (elem.paused || elem.ended || elem.readyState < 2) {
        return false;
    } else {
        return true;
    }
}
function isScrolledIntoView(el) {
    var elementTop = el.getBoundingClientRect().top;
    var elementBottom = el.getBoundingClientRect().bottom;
    var isVisible = elementTop < window.innerHeight && elementBottom >= 0;
    return isVisible;
}
function playVideoClosestToCenter() {
    var vids = document.querySelectorAll('video');
    var smallestDistance = null;
    var smallestDistanceI = null;
    for (var i = 0; i < vids.length; i++) {
        var el = vids[i];
        var elementTop = el.getBoundingClientRect().top;
        var elementBottom = el.getBoundingClientRect().bottom;
        var elementCenter = (elementBottom + elementTop) / 2.0;
        var windowCenter = window.innerHeight / 2.0;
        var distance = Math.abs(windowCenter - elementCenter);
        if (smallestDistance === null || distance < smallestDistance) {
            smallestDistance = distance;
            smallestDistanceI = i;
        }
    }
    if (smallestDistanceI !== null) {
        vids[smallestDistanceI].play();
        for (var i = 0; i < vids.length; i++) {
            if (i !== smallestDistanceI) {
                vids[i].pause();
            }
        }
    }
}
function playAllVisibleVideos(timestamp) {
    // This fixes autoplay for safari
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length; i++) {
        if (isVideoPlaying(vids[i]) && !isScrolledIntoView(vids[i])) {
            vids[i].pause();
        }
        if (!isVideoPlaying(vids[i]) && isScrolledIntoView(vids[i])) {
            vids[i].play();
        }
    }
}
function slowLooper(cb) {
    // Throttling requestAnimationFrame to a few fps so we don't waste cpu on this
    // We could have listened to scroll+resize+load events which move elements
    // but that would have been more complicated.
    function repeats() {
        cb();
        setTimeout(function() {
            window.requestAnimationFrame(repeats);
        }, 200);
    }
    repeats();
}

나는 같은 문제를 해결했습니다.

$(window).on('pageshow',function(){
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length;){
        vids[i].play();
    }
})

페이지가 표시된 후 비디오를 시작해야합니다.

스와핑 시도 autoPlay에 대한 autoplay.

때때로 대소 문자를 구분하는 것 같습니다. autoplay나를 위해 일했기 때문에 매우 기괴 하지만 내가 포함해야만controls