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

Program / 글쓴이

나는 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을 설치해야한다는 경고를받습니다. 그렇지 않으면 비디오 대본 만 볼 수 있습니다. 도움이 되었기를 바랍니다.