iPad에서 HTML5 비디오를 자동 재생할 수 있습니까?

123

<video>태그의 autoplay="autoplay"속성은 사파리에서 잘 작동합니다.

iPad에서 테스트 할 때는 비디오를 수동으로 활성화해야합니다.

로드 문제라고 생각했기 때문에 미디어 상태를 확인하는 루프를 실행했습니다.

videoPlay: function(){
    var me = this;
    console.log('STATE: ' + $("#periscopevideo").get(0).readyState);
    if ($("#periscopevideo").get(0).readyState != 4){
      setTimeout(function(){me.videoPlay();}, 300);
    }
    else {
      $("#periscopevideo").get(0).play();
    }
}

상태는 0iPad에 남아 있습니다 . 내 데스크톱 사파리 0에서는 1, 마지막으로 4. iPad에서는 4"재생"화살표를 수동으로 탭 해야만 도달 합니다.

또한 $("#periscopevideo").get(0).play()클릭을 통한 호출 onClick도 작동합니다.

자동 재생과 관련하여 Apple의 제한 사항이 있습니까? (나는 iOS 5 이상을 실행하고 있습니다).

jquery  ios  objective-c  html  cocoa-touch 
— 젬
소스
— apsillers
브라우저 감지를 살펴보고 playVideo ()를 호출해야하는지 여부 : stackoverflow.com/questions/26895492/…
— Redtopia
이 작업은 나를 위해 github.com/Stanko/html-canvas-video-player
— dimitar
이 주제에 대한 유용한 블로그 게시물 webkit.org/blog/6784/new-video-policies-for-ios
— 마티아스 M
iOS의 오페라 미니는 기본적으로 자동 재생을 지원하지만 크롬, 파이어 폭스 및 사파리는 켜는 옵션을 제공하지 않으며 제공하지 않습니다.
— 익명의

답변:

156

iOS 10 업데이트

자동 재생 금지는 iOS 10부터 해제되었지만 일부 제한 사항이 있습니다 (예 : 오디오 트랙이없는 경우 A가 자동 재생 될 수 있음).

이러한 제한 사항의 전체 목록을 보려면 공식 문서 ( https://webkit.org/blog/6784/new-video-policies-for-ios/)를 참조하십시오.

iOS 9 이하

iOS 6.1 부터는 더 이상 iPad에서 비디오를 자동 재생하는 것이 불가능합니다.

자동 재생 기능을 비활성화 한 이유에 대한 나의 가정은 무엇입니까?

글쎄요, 많은 기기 소유자가 기기에 데이터 사용량 / 대역폭 제한을 가지고 있기 때문에 Apple은 사용자가 대역폭 사용량을 시작할 때 결정해야한다고 생각했습니다.

약간의 연구 끝에 iOS 장치의 자동 재생과 관련하여 Apple 문서에서 내 가정을 확인하기 위해 다음 발췌 내용을 발견했습니다.

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

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

다음은 iOS의 Safari에서 임베디드 미디어를 재생할 수없는 이유 에 대한 Safari HTML5 참조 페이지 에 표시된 별도의 경고입니다 .

경고 : 사용자 비용으로 셀룰러 네트워크를 통한 원치 않는 다운로드를 방지하기 위해 iOS의 Safari에서 포함 된 미디어를 자동으로 재생할 수 없습니다. 사용자는 항상 재생을 시작합니다. 재생이 시작되면 iPhone 또는 iPod touch에 컨트롤러가 자동으로 제공되지만 iPad의 경우 controls 속성을 설정하거나 JavaScript를 사용하여 컨트롤러를 제공해야합니다.

무엇 (코드의 관점에서)이 의미하는 것은 자바 스크립트의 것입니다 play()및 load()사용자 동수가 재생 될 때까지 방법, 비활성 않는play() 또는 load()방법은 사용자 조치 (예 : 클릭 이벤트)에 의해 트리거됩니다.

기본적으로 사용자 시작 재생 버튼은 작동하지만 onLoad="play()"이벤트는 작동 하지 않습니다.

예를 들어 다음은 영화를 재생합니다. 

<input type="button" value="Play" onclick="document.myMovie.play()">

다음은 iOS에서 아무 작업도 수행하지 않습니다. 

<body onload="document.myMovie.play()">
— dsgriffin
소스
1
iPhone Safari 용 온라인 알람 시계를 만든 지 3 개월이 지났습니다! 우리 (sleep.fm)는 앱이 열려있는 동안 전화기를 깨우는 방법을 찾았지만 이제 iOS 6.1에서는 알람 오디오가 재생되지 않습니다. iOS 6.0에서 잘 작동했습니다. 해결 방법이 있습니까?
— chaser7016 2013 년
1
오, 잠시만 기다려주세요. iPhone Safari 용 모바일 웹 알람 시계 (sleep.fm)가 다시 실행되고 있으므로 html5 자동 재생 지원 부족에 대한 해결 방법이 있습니다.
— chaser7016 2013
1
@ Jonah1289 Sleep.fm의 블로그 게시물에 따르면 Brian Cavalier 는 오디오 태그 대신 webkitaudiocontext를 사용하여 ipad 또는 iphone에서 자동 재생 오디오 라는 제목의 github 링크 를 트윗했습니다 . 시작하기에 좋은 곳일 수 있습니다.
— Francisco
1
자세한 내용은 자동 실행 지원이 부족한 경우 어떤 구체적인 해결 방법이 있습니까?
— Umopepisdn
11
그들이해야 할 일은 Wi-Fi에서 자동 재생을 허용하고 수동 재생을하거나 모바일 네트워크에서 동영상이 자동 재생되기를 원한다는 메시지를 사용자에게 표시하는 것입니다.
— Ric
16

나는이 질문이 오래되었고 이미 받아 들여진 대답이 있다는 것을 알고 있다고 말하면서 시작하고 싶습니다. 그러나이 질문을 끝내기위한 수단으로 사용했던 불행한 인터넷 사용자로서, 내 생각과 제안을 추가하고 싶습니다.

@DSG와 @Giona가 정확하고 그들의 대답에는 아무런 문제가 없지만,이 제한을 "회피"하는 데 사용할 수있는 창의적인 메커니즘이 있습니다. 이것은 내가이 기능의 우회를 용인한다는 말이 아니라 오히려 사용자가 비디오 나 오디오 파일이 "자동 재생"인 것처럼 "느낌"을주는 몇 가지 메커니즘 일뿐입니다.

빠른 해결 방법은 모바일 페이지의 어딘가에 비디오 태그를 숨기는 것입니다. 반응 형 사이트를 만들었으므로이 작업은 작은 화면에서만 수행합니다. 비디오 태그 (HTML 및 jQuery 예제) :

HTML

<video id="dummyVideo" src="" preload="none" width="1" height="2"></video>

jQuery

var $dummyVideo = $("<video />", {
  id: "dummyVideo",
  src: "",
  preload: "none",
  width: "1",
  height: "2"
});

페이지에 숨겨져있는 상태에서 사용자가 영화를보기 위해 '클릭'하면 (여전히 사용자 상호 작용이 있지만 해당 요구 사항을 우회 할 방법이 없음) 보조보기 페이지로 이동하는 대신 숨겨진 동영상을로드합니다. 이것은 미디어 태그가 실제로 사용되지 않고 대신 Quicktime 인스턴스로 승격되기 때문에 주로 작동하므로 보이는 비디오 요소가 전혀 필요하지 않습니다. "click"(또는 모바일의 "touchend")에 대한 핸들러에서.

$(".movie-container").on("click", function() {
  var url = $(this).data("stream-url");
  $dummyVideo.attr("src", url);
  $dummyVideo.get(0).load(); // required if src changed after page load
  $dummyVideo.get(0).play();
});

그리고 비올라. UX가 진행되는 한 사용자는 재생할 비디오를 클릭하고 Quicktime은 선택한 비디오를 재생합니다. 이것은 비디오가 사용자 작업을 통해서만 재생 될 수 있다는 제한 내에 남아 있으므로이 서비스로 비디오를보기로 결정하지 않은 사람에게 데이터를 강요하지 않습니다. 나는 유튜브가 모바일로 이것을 어떻게했는지 알아 내려고 할 때 이것을 발견했다. 이것은 본질적으로 정말 멋진 자바 스크립트 페이지 구축이고 비디오 태그의 경우처럼 숨어있는 멋진 요소이다.

tl; dr 다음은 Apple의 한계를 넘어서서도 사용자가 비디오 (또는 오디오와 가장 유사한 오디오)를 볼 것인지 결정하지 않고 iOS 장치에서 "자동 재생"UX 기능을 만들려고 시도하는 "해결 방법"입니다. 자신의 허가없이로드하지 않고 스스로 테스트하지 않았습니다.

또한 sleep.fm에서 나온 사람에게 이것은 불행히도 시간 기반 오디오 재생 문제에 대한 해결책이 아니었을 것입니다.

누군가이 정보를 유용하게 사용했으면 좋겠습니다.이 기능이 있다는 단호한 고객에게 나쁜 소식을 전달하는 데 일주일을 절약 할 수 있었을 것이며 결국 전달하는 방법을 찾게되어 기뻤습니다.

편집하다

추가 결과는 위의 해결 방법이 iPhone / iPod 장치에만 해당됨을 나타냅니다. iPad는 전체 화면이되기 전에 Safari에서 비디오를 재생하므로 재생하기 전에 클릭 할 때 비디오 크기를 조정하는 메커니즘이 필요합니다. 그렇지 않으면 오디오 만 나오고 비디오는 나오지 않습니다.

— 브랜든 벅
소스
2
$dummyVideo.get(0)대괄호 대신 사용 하는 것이 더 좋으므로 선택 항목이 비어 있으면 jQuery가 정상적으로 실패 할 수 있습니다.
— Micros
12

그냥 설정

webView.mediaPlaybackRequiresUserAction = NO;

자동 재생은 iOS에서 작동합니다.

— 리 얼
소스
29
이것은 웹 사이트에서 작동하지 않으며 네이티브 애플리케이션으로 래핑 한 사이트에서만 작동합니다.
— Brandon Buck
5
내 말은, (질문이 묻는 것처럼) 웹 페이지에서 이것은 완전히 액세스 할 수없는 것입니다-예, 브라우저의 Javascript는 이것을 할 수 없습니다. 이것은 제어 할 수있는 응용 프로그램에서 WebView 내에서 사이트를 실행하는 경우에만 작동하므로 실제로 질문에 대한 솔루션을 제공하지 않습니다.
— 브랜든 벅
6
그가 웹보기를 사용하고 가정 것을 억지하지 그래서 공정하게 @izuriel, 그는 태그 "를 목표 - C"와 "코코아 터치"와 같은 질문을했다
— Kloar
3
@Kloar 태그는 일반적으로 해결하려는 문제에 대해 더 많은주의를 기울이거나 일반적인 오해를 얻기위한 수단으로 추가됩니다. 질문을하는 사람은 Objective-c를 언급하는 것이 "iOS"(코코아 터치의 경우도 유사 함)를 말하는 것과 동일하다고 생각했을 수 있습니다. "uiwebview"태그는 나열되어 있지 않으므로 실행 가능한 옵션으로 제외하겠습니다. 이 질문은 데스크탑 및 iPad에서 Safari 사용에 대해 언급하고 (앱에 대한 내용 없음) Javascript 데모 코드를 사용하여 상황을 디버깅합니다. 대체로 나는이 질문이 실제로 네이티브 솔루션이 아닌 웹을 찾고 있다는 것이 더 안전한 내기라고 말하고 싶습니다.
— Brandon Buck
— cottonBallPaws
11

아이폰 OS (10)로, 영상은 지금 수 있습니다 자동 재생,하지만 그들 중 어느 음소거 또는 오디오 트랙이 없습니다. 예이!

요컨대 :

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

자세한 정보 : https://webkit.org/blog/6784/new-video-policies-for-ios/

— JackKalish
소스
4
autoplay 속성은 PC에서만 작동하며 모바일에서는 작동하지 않습니다. 나는 여러 번 시도했다.
— huykon225
7

이 Safari HTML5 참조 에서 읽을 수 있습니다.

사용자의 비용으로 셀룰러 네트워크를 통한 원치 않는 다운로드를 방지하기 위해 iOS의 Safari에서 내장 미디어를 자동으로 재생할 수 없습니다. 사용자는 항상 재생을 시작합니다. 재생이 시작되면 iPhone 또는 iPod touch에 컨트롤러가 자동으로 제공되지만 iPad의 경우 controls 속성을 설정하거나 JavaScript를 사용하여 컨트롤러를 제공해야합니다.

— Giona
소스
38
"여러 MB가 될 수 있고 사람들이 깨닫지 못하는 사이에 대역폭을 사용할 수있는 GIF 파일을 제외하고"
— Simon_Weaver
@Simon_Weaver x12 번은 대부분 정확합니다.
— Burak Tokak
2

iOS에서 자동 재생되도록 먼저 비디오를 음소거 한 다음 원하는 경우 음소거를 해제하십시오.

<video autoplay loop muted playsinline>
  <source src="video.mp4?123" type="video/mp4">
</video>

<script type="text/javascript">
$(function () {
  if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $("video").prop('muted', false);
  }
});
</script>
— 모하마드 알리 악바리
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.