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

@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에서 비디오를 재생하므로 재생하기 전에 클릭 할 때 비디오 크기를 조정하는 메커니즘이 필요합니다. 그렇지 않으면 오디오 만 나오고 비디오는 나오지 않습니다.

답변

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