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

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에 로드되면 자동으로 재생이 시작되지만 웹킷 기반 브라우저에서는 자동 재생을 수행할 수 없습니다.이 문제는 임의의 페이지에서만 발생합니다.아직까지는 원인을 찾을 수 없었습니다.CMS 에디터에 의해 작성된 미닫힘 태그나 광범위한 JS가 의심됩니다.

수 은 바로 에 이 를 추가하는 이었다.</video>

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

...예쁘지는 않지만 어떻게든 된다.

업데이트 최근 많은 브라우저는 사운드가 꺼진 상태에서만 동영상을 자동 재생할 수 있으므로 추가가 필요합니다.muted이기도 합니다.

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

jQuery 후play()또는 다른 답변에서 제시된 바와 같이 DOM 조작은 Android용 Chrome(버전 56.0)에서 아직 작동하지 않았습니다(비디오가 자동으로 재생되지 않았습니다).

developers.google.com의 이 게시물인 Chrome 53에 따르면 동영상이 음소거되면 브라우저는 자동 재생 옵션을 사용합니다.

이렇게 쓰면서autoplay muted비디오 태그의 속성을 사용하면 비디오가 버전 53부터 Chrome 브라우저에서 자동으로 재생됩니다.

위 링크에서 발췌:

Android Chrome chrome에에에 。 요소가 됩니다.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 Browser에 의해 Android에서 이미 지원되고 있습니다.자동 재생은 차단되지 않습니다.

구글은 비디오 자동 재생 정책을 바꿨습니다.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>

Safari와 Chrome on Desktop은 비디오 태그 주위의 DOM 조작을 좋아하지 않습니다.초기 페이지 로드 후 비디오 태그 주변의 DOM이 변경되었을 때 canplaythrough 이벤트가 발생하더라도 자동 재생 속성이 설정된 경우 재생 순서가 실행되지 않습니다.기본적으로 비디오 태그 주위에 있는 .wrap() jQuery를 삭제한 후 예상대로 자동으로 재생될 때까지 같은 문제가 있었습니다.

에게 는 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.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>

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

만이 나에게이 되었다.<video autoplay muted ...>...</video>~하다

with with with 하면 효과가 .muted

방금 내 비디오에 같은 문제가 생겼어

<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"로 설정하면 비디오가 정상적으로 시작됩니다.

이것을 시험해 보세요.

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

Safari iPhone에서는 배터리가 부족하고 iPhone이 Low Power Mode일 때 비디오 html 태그에 autopplay, loop, mute, 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/

페이지 하부에 아래 코드를 추가해도 효과가 있었습니다.왜 동작하는지 모르겠습니다.

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

아이폰 사파리의 추가playsinline의 video태그는 이 문제를 해결할 수 있고, 효과가 있습니다!

<video autoplay muted loop playsinline class="someClass">
  <source src="source.mp4" type="video/mp4">
</video>

이은 OSX Safari입니다.혹시 이 속성에 대해 헷갈릴 수 있습니다.playsinline, 이것이 설명입니다.

브라우저, 「」, 「」,playsinline 는 비디오를 재생하는 동안 전체 화면을 여는 기본값 대신 그대로 재생합니다.

웹 사이트 의 Safari입니다.Auto-Play은 「」입니다.Stop Media with Sound할 수

때문에 는 그 자산이 합니다.muted.

최근 임베디드 비디오에 관한 유사한 문제에 대처하여 자동 재생 및 음소거 속성이 구현에 충분하지 않다는 것을 알게 되었습니다.

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

이 수정은 인라인으로 재생되는 비디오에 한정됩니다.https://webkit.org/blog/6784/new-video-policies-for-ios/ 에서 :

iPhone 에서는, 요소의 인라인 재생이 허가되어 재생 개시시에 자동적으로 풀 스크린 모드가 되지 않게 됩니다.playsinline 속성이 없는 요소는 iPhone에서 재생하려면 풀스크린 모드가 계속 모드가 필요합니다.핀치 제스처로 전체 화면을 종료할 때 재생되지 않은 요소는 계속 인라인으로 재생됩니다.

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

스왑을 시도하다autoPlay위해서autoplay.

대소문자를 구분하는 경우도 있는 것 같습니다.매우 이상합니다. 왜냐하면 그게 효과가 있었기 때문입니다.autoplay저에겐요, 하지만 만약 제가controls

• 사용하세요muted키워드 전autoplayword, 2018년 4월에 사생활이 변경되었습니다.
• 여기서 정책을 읽을 수 있습니다.

이것을 시험해 보세요.

    <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>

원래 이렇게 하고 있어요.루프, 컨트롤 및 자동 재생에는 부울 속성 값이 필요하지 않습니다.

나는 음소거로 자동 재생을 시켰다.구글 규칙은 음소거가 되지 않는 한 크롬 자동 재생을 허용하지 않을 것 같아.

<video id="video" controls autoplay muted
        border:0px solid black;"
        width="300"
        height="300">
    <source src="~/Videos/Lumen5_CTAS_Home2.mp4"
            type="video/mp4" />
    Your browser does not support the video tag.
    Please download the mp4 plugin to see the CTAS Intro.
</video>

앵글의 경우 음소거하고 음소거로 재생해야 합니다.ngAfterViewInit()다음과 같이

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

 ​@ViewChild('videoRef', { static: true }) videoRef!: ElementRef

​ngAfterViewInit(): void {
  ​const media = this.videoRef.nativeElement
  ​media.muted = true 
  ​media.play() 
​ } 

다른 답변은 하나도 통하지 않았다.회피책은 비디오 자체를 클릭하는 것이었습니다.시간 초과로 인해 해킹이 발생했지만 정상적으로 동작합니다.

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

상기의 모든 솔루션을 2시간 동안 시험했다.

이것이 나에게 마침내 효과가 있었던 것이다.

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

각도 10:

<video [muted]="true" [autoplay]="true" [loop]="true">
    <source src="/assets/video.mp4" type="video/mp4"/>
</video>

이는 Chrome이 html5 비디오의 자동 재생을 방해하고 있기 때문에 기본적으로는 자동 재생을 허용하지 않기 때문입니다.크롬 플래그 설정을 사용하여 이 설정을 변경할 수 있습니다.이것은 일반적인 경우에는 가능하지 않기 때문에 나는 다른 해결책을 찾아야 한다.이건 완벽하게 작동하는데...(프리로드 추가="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();  

<video onload='this.play()' src='the source' autoplay controls></video>

이건 나한테 효과가 있었어.

다른 파일 타입의 순서와 관계가 있는 경우가 있었습니다.변경해 보고 도움이 되는지 확인해 보세요.

보이는 영상을 다 재생하는 걸로 시작했는데 오래된 핸드폰이 잘 안 되더라고요.그래서 지금은 윈도우 중앙에 가장 가까운 비디오를 재생하고 나머지를 일시 정지합니다.바닐라 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();
    }
})

페이지가 표시된 후 동영상을 실행해야 합니다.

심플하고 짧고 내 코드로 동작하는 반면, 비디오는 풀스크린이고 다른 요소 뒤에는 z-index-1을 사용합니다.

    <video autoplay loop id="myVideo">

React + Chrome에서는 비디오를 src로 주는 것보다 Import하는 것이 좋습니다.

import React from 'react';
import styled from 'styled-components';
import video from './videos.mp4';
const StyledVideo = styled.video`
width: 100%;
height: 100vh;
object-fit: cover;
`
const BackgroundVideo = () => {
return (
    <StyledVideo autoPlay loop muted>
        <source src={video} type="video/mp4" />
    </StyledVideo>
);
}

기억하세요.

• 비디오를 Import하기 위해서, 같은 디렉토리에 있습니다.
• 자동 재생하려면 , 백그라운드에서 비디오를 자동 재생하고, 자동 재생을 사용하고, 음소거 소품도 있습니다.

언급URL : https://stackoverflow.com/questions/17994666/video-auto-play-is-not-working-in-safari-and-chrome-desktop-browser