Safari, iPhone 및 iPad에서 HTML5 비디오 태그가 작동하지 않음

나는 13s와 같은 작은 비디오가있는 html5 웹 페이지를 만들려고합니다.이 비디오의 플래시 버전을 3 형식으로 변환했습니다 .fireFogg를 사용하는 .ogv, firefogg를 사용하는 .webm 및 HandBrake 응용 프로그램을 사용하는 .mp4 html 스크립트 내 페이지에서 사용했습니다.

<video  width="800" height="640" loop preload="false" autoplay  controls tabindex="0">
  <source src="xmasvideo/video.mp4" type="video/mp4" />
  <source src="xmasvideo/M&P-Xmas 2.ogv" type="video/ogv" />
  <source type="video/webm" src="xmasvideo/M&P-Xmas.webm" />
</video>

동영상이 Chrome 및 FireFox에서 제대로 작동하지만 데스크톱의 Safari 나 iPhone 또는 iPad에서 전혀 작동하지 않습니다. 출력은 단순히 동영상 태그의 컨트롤을 표시하는 빈 페이지이지만 아무것도로드되지 않습니다.

내가 가지고있는 Safari 버전은 HTML5 비디오를 지원합니다.

iPhone 및 iPad와 같은 사과 장치에서 동일한 문제가 발생하여 저전력 모드를 끄고 작동했으며 다음과 playsinline같이 비디오 태그에 속성을 포함해야 합니다.

<video class="video-background" autoplay loop muted playsinline>

를 포함하는 경우에만했다 playsinline.

미래의 검색자를위한 또 다른 가능한 해결책 : (문제가 MIME 유형 문제가 아닌 경우)

어떤 이유로 controls = "true"플래그를 설정하지 않으면 iPad에서 비디오가 재생되지 않습니다.

예 : 이것은 iPhone에서는 작동했지만 iPad에서는 작동하지 않았습니다.

<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

그리고 이것은 이제 iPad와 iPhone 모두에서 작동합니다.

<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

웹 서버가 HTTP 바이트 범위 요청을 지원하지 않을 수 있습니다. 이것은 제가 사용중인 웹 서버의 경우이며 그 결과 비디오 위젯이로드되고 재생 버튼이 나타나지만 버튼을 클릭해도 효과가 없습니다. — 동영상은 FF 및 Chrome에서 작동하지만 iPhone 또는 iPad에서는 작동하지 않습니다.

mobiforge.com에서 바이트 범위 요청에 대한 자세한 내용 은 부록 A : Apple iPhone 용 스트리밍을 참조하십시오 .

먼저 Safari 웹 브라우저가 콘텐츠를 요청하고 오디오 또는 비디오 파일 인 경우 미디어 플레이어를 엽니 다. 그런 다음 미디어 플레이어는 웹 서버가 바이트 범위 요청을 지원하는지 확인하기 위해 콘텐츠의 처음 2 바이트를 요청합니다. 그런 다음 지원하는 경우 iPhone의 미디어 플레이어는 나머지 콘텐츠를 바이트 범위로 요청하고 재생합니다.

웹에서 "iphone mp4 byte-range"를 검색 할 수 있습니다.

비디오가 세션 기반 로그인 시스템으로 보호되는 경우 Safari는 비디오를로드하지 못합니다. 이는 Safari가 비디오에 대한 초기 요청을 한 다음 작업을 QuickTime에 넘겨 다른 요청을하기 때문입니다. Safari는 세션 정보를 보유하고 있으므로 인증을 통과하지만 QuickTime은 그렇지 않습니다.

서버 접근 로그를 보면 처음에는 Safari에서 요청한 다음 QuickTime에서 요청한 것을 볼 수 있습니다. 다른 브라우저는 브라우저 자체에서 단일 요청을합니다.

이것이 문제인 경우 임시 토큰을 사용하거나 원래 요청의 제한된 시간 액세스를 사용하기 위해 비디오 액세스를 재 작업해야 할 수 있습니다. 좀 더 직접적인 해결책을 찾으면이 답변을 업데이트하겠습니다.

미래 검색의 경우뿐만 아니라, 내가 사용하는 핸드 브레이크로 다운 스케일 있다는 MP4 파일이 있었다 handbrake-gtk에서 apt-get예를 sudo apt-get install handbrake-gtk. Ubuntu 14.04에서 handbrake저장소는 기본적 으로 MP4에 대한 지원을 포함하지 않습니다. 기본 설정을 그대로두고 오디오 트랙을 제거하면 * .M4V 파일이 생성됩니다. 궁금한 사람들을 위해 동일한 컨테이너이지만 M4V는 주로 iOS에서 iTunes에서 열 때 사용됩니다.

이것은 Safari를 제외한 모든 브라우저에서 작동했습니다.

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
            <source src="//cdn.foo.com/bar-video.m4v" type="video/mp4">
            <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

나는 사이의 마임 타입을 변경 video/mp4하고 video/m4v영향을 미치지 않고. 나는 또한 control속성 추가를 테스트했지만 다시 효과가 없었습니다.

이것은 Mavericks의 Safari 7과 Yosemite의 Safari 8을 포함하여 테스트 된 모든 브라우저에서 작동했습니다. 동일한 m4v 파일 (HTML뿐 아니라 실제 파일)의 이름을 mp4로 변경하고 CDN에 다시 업로드했습니다.

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
            <source src="//cdn.foo.com/bar-video.mp4" type="video/mp4">
            <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

Safari는 실제로 MP4라는 이름을 완전히 기대하고 있다고 생각합니다. 파일과 MIME 유형의 다른 조합은 나를 위해 일하지 않았습니다. 소스 목록이 기술적으로 지원되는 첫 번째 소스를 선택해야한다고 확신하지만 다른 브라우저, 특히 Chrome을 먼저 선택한다고 생각합니다.

그러나 이것은 iOS 장치의 비디오 문제를 해결하지 못했습니다 (iPad 3 "새로운 iPad"및 iPhone 6 테스트 됨).

muted속성을 추가하면 모든 것이 잘 작동합니다.

이 답변의 출처는 https://webkit.org/blog/6784/new-video-policies-for-ios/입니다.

기본적으로 WebKit에는 다음 정책이 있습니다.

<video autoplay> 이제 요소는 다음 조건을 충족하는 요소에 대해 autoplay 속성을 따릅니다.

• <video> 소스 미디어에 오디오 트랙이없는 경우 요소는 사용자 제스처없이 자동 재생되도록 허용됩니다.
• <video muted> 요소는 사용자 제스처없이 자동 재생 될 수도 있습니다.
• 경우 <video>요소는 오디오 트랙을 얻거나 음소거가 사용자의 제스처없이되고, 재생이 일시 중지됩니다.
• <video autoplay> 요소는 뷰포트로 스크롤되고 CSS를 통해 표시되고 DOM에 삽입 될 때와 같이 화면에 표시 될 때만 재생을 시작합니다.
• <video autoplay> 요소가 표시되지 않는 경우 (예 : 뷰포트 밖으로 스크롤되는 등) 일시 중지됩니다.

<video> 요소는 이제 다음 조건을 충족하는 요소에 대해 play () 메서드를 따릅니다.

• <video> 소스 미디어에 오디오 트랙이 없거나 muted 속성이 true로 설정된 경우 요소는 사용자 제스처없이 play () 할 수 있습니다.
• 경우 <video>요소는 오디오 트랙을 얻거나 음소거가 사용자의 제스처없이되고, 재생이 일시 중지됩니다.
• <video> 요소는 화면에 표시되지 않거나 뷰포트를 벗어날 때 play () 할 수 있습니다.
• video.play ()는 이러한 조건 중 하나라도 충족되지 않으면 거부되는 Promise를 반환합니다.

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

Safari는 HTML5 비디오를 지원하지만이 기능을 사용하려면 Quicktime Player를 설치해야합니다. HTML5 비디오를 사용하는 사이트에서 사용자는 Safari를 사용할 때 Quicktime을 설치해야한다는 경고를받습니다. 그렇지 않으면 비디오 대본 만 볼 수 있습니다. 도움이 되었기를 바랍니다.

신뢰할 수없는 '개발'SSL 인증서와 관련하여 이상한 문제를 보았습니다. 모바일 Safari는 페이지를 만족스럽게 제공하지만 인증서를 수락 했더라도 '가짜'SSL 인증서에 동영상을 제공하지 않습니다.

테스트하려면 비디오를 다른 곳에 배포하거나 http (전체 페이지)로 전환하면 재생됩니다.

동영상이 음소거 되어도 괜찮다면 'playsinline'을 추가하면 Iphone과 Ipa에서 작동합니다.

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

비디오 음소거를 원하지 않지만 여전히 자동 재생을 원하는 경우 js : 음소거 된 소품으로 html5 비디오 음소거 해제 방법을 사용하여 음소거 된 속성을 제거해보십시오.

iOS 6.1부터는 더 이상 iPad에서 비디오를 자동 재생하는 것이 불가능합니다. Apple 설명서에 따르면 iPad를 포함한 모든 iOS 기기의 Safari에서 자동 실행 기능이 작동하지 않습니다.

"Apple은 스크립트 및 속성 구현을 통해 iOS 장치에서 비디오 자동 재생을 비활성화하기로 결정했습니다.

Safari, iOS (iPad를 포함한 모든 기기)에서 사용자가 셀룰러 네트워크에 있고 데이터 단위당 요금이 부과 될 수있는 경우 사전로드 및 자동 재생이 비활성화됩니다. 사용자가 시작할 때까지 데이터가로드되지 않습니다."

이 Apple 문서 에서 더 많은 것을 읽을 수 있습니다.

.mp4의 경우 작동합니다 (사파리 모바일 및 데스크톱).

<video height="250" width="250" controls>
    <source src="video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

그만큼 controls=”true”애플은 그 자체 만 사용 컨트롤을 말한다 같은 위의 포스트에서 언급 한 나에게 아무 sence하지 않습니다.

참조 : “HTML5 오디오 또는 비디오를 사용하려면 먼저 또는 요소를 만들고 미디어에 대한 소스 URL을 지정하고 controls 속성을 포함합니다. <video src="http://example.com/path/mymovie.mp4" controls></video>”

출처 : https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html

내 거래에서 (작은 여담) : iPhone에서 비디오를 업로드하면 .quicktime으로 서버에 전송된다는 것을 발견했습니다. 아이러니하게도 이것은 사파리의 서버에서 비디오를 재생하려고 할 때의 문제입니다. (모바일 및 데스크톱).

그래서 (나와 같은) safari에서 .quicktime (또는 .mp4 이외의 다른 것) 문제가 발생하는 경우 다음은 apple에서 제공하는 해결 방법입니다. 아직 직접 테스트하지 않았으며 한 눈에보기에 만족스럽지 않고 더 많은 정보를 제공 할뿐입니다.

참조 : “QuickTime 플러그인으로 대체 거의 모든 브라우저에서 작동하는 QuickTime 플러그인으로 대체 할 수있는 간단한 방법이 있습니다. HTML Video Example 및 HTML 헤드에 다음 코드 줄을 삽입하여 웹 페이지에 포함하세요. <script src="ac_quicktime.js" type="text/javascript"></script>”

출처 : https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6

업데이트 : .quicktime 이름을 .mov서버 에 이전 업로드로 바꾸려면 (base64 파일 형식 "data : video / mov;") ac_quicktime.js를 건너 뜁니다. . . 그런 다음 html 비디오 태그에서 작동합니다. 해커 디 해킹.

이 코드를 사용하면 ios 장치와 함께 safari의 모든 브라우저에서 비디오가 재생됩니다 ... 모두를 위해 이동하십시오 (나는 이것을 사용하고 잘 작동합니다)

`

<video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
    	<source src="video/video.mp4" type="video/mp4"></source>
		<source src="video/video.webm" type="video/webm"></source>
		<source src="video/video.mov" type="video/mov"></source>
</video>

`

비슷한 문제가 있었는데 <video>태그 가 Chrome 및 Firefox에서만 재생되고 Safari에서는 재생되지 않는 . 내가 그것을 고치기 위해 한 일은 다음과 같습니다 ...

내가 찾은 이상한 속임수는 비디오에 대한 두 개의 다른 참조를 갖는 것입니다. 하나는 <video>Chrome 및 Firefox 용 태그에 다른 하나는 <img>Safari 용 태그에 있습니다. 재미있는 사실은 비디오가 실제로 <img>Safari 에서 태그로 재생된다는 것 입니다. 그런 다음 특정 브라우저가 사용 중일 때 둘 중 하나를 숨기는 간단한 스크립트를 작성하십시오. 예를 들면 다음과 같습니다.

<video id="video-tag" autoplay muted loop playsinline> 
    <source src="video.mp4" type="video/mp4" />  
</video>
<img id="img-tag" src="video.mp4">

<script type="text/javascript">
    function BrowserDetection() {

    //Check if browser is Safari, if it is, hide the <video> tag, otherwise hide the <img> tag
    if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
        document.getElementById('video-tag').style.display= "none";
    } else {
        document.getElementById('img-tag').style.display= "none";
    }               

    //And run the script. Note that the script tag needs to be run after HTML so where you place it is important. 
    BrowserDetection();
</script>

또한 특정 브라우저에서 잘못 렌더링되는 일부 동영상의 얇은 검은 색 프레임 / 테두리 문제를 해결하는 데 도움이됩니다.

Safari에서 .mp4 재생이 작동하지 않는 문제가 있었지만 다른 브라우저에서는 문제가 없었습니다. 콘솔에서 본 오류는 다음과 같습니다. error media src not supported. 필자의 경우 이것은 MIME 유형 문제로 판명되었지만 IIS에서 MIME 유형으로 선언되지 않았기 때문이 아니라 두 번 (IIS에서 한 번 및 web.config 파일에서도) 선언 되었기 때문입니다. 서버에서 로컬로 .mp4 파일을 다운로드하려고 시도하여 이것을 발견했습니다. 재생하려는 콘텐츠 위치에서 구성 파일을 제거하고 문제를 해결했습니다. web.config 파일에서 MIME 유형을 삭제했을 수도 있지만이 경우에는 web.config 파일이 필요하지 않았습니다.

IOS의 경우 mp4 소스 파일 만 사용하십시오. 최신 safari 브라우저에서 safari 브라우저가 소스 파일을 올바르게 감지 할 수없는 한 가지 문제를 발견했으며 이로 인해 비디오 자동 재생이 작동하지 않습니다.

아래 예를 확인하십시오-

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
        <source src="video/video.webm" type="video/webm"></source>
     </video>

내가 mp4, webm을 소스 파일에 사용 했으므로. Safari deosnt는 webm을 지원하지만 여전히 최신 safari 버전에서는 webm을 선택하고 비디오 자동 재생에 실패합니다.

따라서 지원되는 브라우저에서 자동 재생을 작동하려면 먼저 브라우저를 확인하고 HTML을 생성해야합니다.

따라서 사파리의 경우 아래 html을 사용하십시오.

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

사파리 이외의 경우

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.webm" type="video/webm"></source>
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

나는 같은 문제가 있었다-비디오 자산의 URL이 보안 도메인에서 오는지 확인하십시오. 우리의 개발 환경은 http이며 프로덕션은 안전합니다. 상대 경로를 통해 참조되는 비디오로 인해 개발 작업이 진행되지 않았습니다. 애플이 비디오 보안을 요구하는 문제인 것 같습니다 ...

작동하지만 MacOs는 최근 사용자에 대한 자동 재생 정책을 가지고 있습니다 : https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/ , 버튼을 사용하여 사운드를 활성화하는 동일한 문제를 해결했습니다.

ejm :

<video autoplay loop muted id="myVideo">
  <source src="amazon.mp4" type="video/mp4">
  Sorry, your browser doesn't support embedded videos...
</video>

<button class="pausee" onclick="disableMute()" type="button">Enable sound</button>

<script>
var vid = document.getElementById("myVideo");
function disableMute() { 
  vid.muted = false;
}
</script>

나는 같은 문제에 직면했습니다. 내 비디오 프레임 크기가 너무 커서. ie. 2248 px apple은 H.264 Baseline Profile Level 3.0 비디오, 30fps에서 최대 640 x 480을 지원합니다. B 프레임은 Baseline 프로파일에서 지원되지 않습니다. 자세한 정보는 이것을 확인하십시오

제 경우에 도움이 된 것은 오디오 트랙을 삭제하는 것입니다. 전에는 침묵했지만 완전히 사라져야했습니다.

우분투에서 :

ffmpeg -i input.mp4 -vcodec copy -an output.mp4

그리고 사파리 / 데스크톱에서 비디오 재생을 시작합니다.

내 사용 사례에는 두 가지가 있습니다 .

1. 새 속성 / 웹킷의 정책을 사용하지 않았습니다. playsinline .
2. 나의 비디오 / 마임 유형 또는 뭐가 제대로 인코딩되지 않았는지이 사이트를 사용하여 필요한 모든 형식 으로 변환했습니다 : https://pt.converterpoint.com/

영형/

나는 정확히 똑같은 문제가 있었고, HTML 비디오 태그는 Chrome 및 Mozilla, Safari에서 잘 재생되었습니다. 컨트롤이 나타나지만 비디오가 비어 있습니다. 위의 모든 속성을 가지고 놀고, 음소거 제거 / 추가, playsInline 등을 시도했지만 아무것도 작동하지 않았습니다. 여기에 설명 된 서버에도 문제가있었습니다. 나는 이것을 가지고 있었다-작동하지 않았다 :

<video 
  muted
  playsInline
  controls
  style={{ width: `100%` }}>
  <source src={MfMfVideo} type="video/mp4" />
  <source src={MfMfVideoWebM} type="video/webm" />
</video>

방금 비디오를 외부 라이브러리로 옮겼는데 이제 Safari에서 괜찮습니다. 잘 작동합니다.

<video 
  muted
  playsInline
  controls 
  style={{ width: `100%` }}>
  <source src={"https://blabla.com/video/dixneuf-video_r8xuvc.mp4"} type="video/mp4" />
  <source src={"https://blabla.com/videodixneuf-video_gyquuu.webm"} type="video/webm" />
  Sorry, your browser doesn't support embedded videos.
</video>

비디오를 30MB 미만으로 압축하는 것 외에는 아무것도 작동하지 않았습니다. 그것은 트릭을했지만 압축이 매우 나빴습니다.

누군가 같은 문제가 있으면 내 서버에서 Byte-Range 지원을 활성화하여 문제를 해결했습니다. Safari에는 Byte 범위 요청이 필요한 것 같습니다. 제 경우에는 NGINX를 사용하고 proxy_force_ranges on;구성 파일 에 추가 해야했습니다. 이 답변에 감사드립니다 !

REACT에서 사용하는 경우 playsInline모든 IOS 장치에서 작동합니다.