IT박스

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

itboxs 2020. 7. 10. 08:11
반응형

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


<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 이상을 실행하고 있습니다).


iOS 10 업데이트

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

이러한 제한 사항의 전체 목록을 보려면 공식 문서를 참조하십시오 : 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()">

나는이 질문이 오래되었고 이미 받아 들여진 대답을 가지고 있다는 것을 말함으로써 시작하고 싶다. 그러나 불행히도 인터넷 사용자는이 질문을 직후에 잘못 입증 된 수단으로 사용했지만 (고객을 조금 화나게하기 전에는 안됨) 내 생각과 제안을 추가하고 싶습니다.

While @DSG and @Giona are correct, and there is nothing wrong with their answers, there is a creative mechanism you can employ to "get around," so to speak, this limitation. That is not say that I'm condoning circumvention of this feature, quite the contrary, but just some mechanisms so that a user still "feels" as if a video or audio file is "auto playing."

The quick work around is hide a video tag somewhere on the mobile page, since I built a responsive site I only do this for smaller screens. The video tag (HTML and jQuery examples):

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"
});

With that hidden on the page, when a user "clicks" to watch a movie (still user interaction, there is no way to get around that requirement) instead of navigating to a secondary watch page I load the hidden video. This mainly works because the media tag isn't really used but instead promoted to a Quicktime instance so having a visible video element isn't necessary at all. In the handler for "click" (or "touchend" on mobile).

$(".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();
});

And viola. As far as UX goes, a user clicks on a video to play and Quicktime opens playing the video they chose. This remains within the limitation that videos can only be played via user action so I'm not forcing data on anyone who isn't deciding to watch a video with this service. I discovered this when trying to figure out how exactly Youtube pulled this off with their mobile which is essentially some really nice Javascript page building and fancy element hiding like in the case of the video tag.

tl;dr Here is a somewhat "workaround" to try and create an "autoplay" UX feature on iOS devices without going above and beyond Apple's limitations and still having users decide if they want to watch a video (or audio most likey, though I've not tested) themselves without having one just loaded without their permission.

Also, to the person who commented that is from sleep.fm, this still unfortunately would not have been a solution to your issues which is time based audio play back.

I hope someone finds this information useful, it would have saved me a week of bad news delivery to a client that was adamant that they have this feature and I was glad to find a way to deliver it in the end.

EDIT

Further finding indicate the above workaround is for iPhone/iPod devices only. The iPad plays video in Safari before it's been full screened so you'll need some mechanism to resize the video on click before playing or else you'll end up with audio and no video.


Just set

webView.mediaPlaybackRequiresUserAction = NO;

The autoplay works for me on iOS.


As of iOS 10, videos now can autoplay, but only of they are either muted, or have no audio track. Yay!

In short:

  • <video autoplay> elements will now honor the autoplay attribute, for elements which meet the following conditions:
    • <video> elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
    • <video muted> elements will also be allowed to autoplay without a user gesture.
    • If a <video> element gains an audio track or becomes un-muted without a user gesture, playback will pause.
    • <video autoplay> elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.
    • <video autoplay> elements will pause if they become non-visible, such as by being scrolled out of the viewport.

More info here: https://webkit.org/blog/6784/new-video-policies-for-ios/


In this Safari HTML5 reference, you can read

To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS—the user always initiates playback. A controller is automatically supplied on iPhone or iPod touch once playback in initiated, but for iPad you must either set the controls attribute or provide a controller using JavaScript.


Let video muted first to ensure autoplay in ios, then unmute it if you want.

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

참고URL : https://stackoverflow.com/questions/12496144/can-you-autoplay-html5-videos-on-the-ipad

반응형