당신은 아이패드에서 HTML5 비디오를 자동 재생할 수 있습니까?
그<video>꼬리표autoplay="autoplay"속성은 Safari에서 잘 작동합니다.
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그리고 마지막으로4iPad의 경우에는 다음과 같은 수준에 도달합니다.4수동으로 "재생" 화살표를 누르면 됩니다.
다가게, 화기하전을 부르는 것.$("#periscopevideo").get(0).play() 한 onClick효과도 있습니다.
자동 재생과 관련하여 애플의 제한 사항이 있습니까?(참고로 iOS 5+를 실행하고 있습니다.)
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 기기에서 비디오 자동 재생을 비활성화하기로 결정했습니다.
사용자가 셀룰러 네트워크에 있고 데이터 단위당 과금될 수 있는 iOS(iPad를 포함한 모든 장치)의 Safari에서는 프리로드 및 자동 재생이 비활성화됩니다.사용자가 데이터를 시작할 때까지 데이터가 로드되지 않습니다." - Apple 설명서
다음은 Safari HTML5 문서 페이지에 나와 있는 iOS의 Safari에서 내장 미디어를 재생할 수 없는 이유에 대한 별도의 경고입니다.
경고:사용자 비용으로 셀룰러 네트워크를 통한 무단 다운로드를 방지하기 위해 내장 미디어는 iOS의 Safari에서 자동으로 재생할 수 없습니다. 사용자는 항상 재생을 시작합니다.재생이 시작되면 iPhone 또는 iPod touch에서 컨트롤러가 자동으로 제공되지만 iPad의 경우 컨트롤 속성을 설정하거나 JavaScript를 사용하여 컨트롤러를 제공해야 합니다.
이것이 의미하는 것은 (코드 측면에서) 자바스크립트의play()그리고.load()메서드는 사용자가 재생을 시작할 때까지 비활성화됩니다. 단,play()또는load()메서드는 사용자 작업(예: 클릭 이벤트)에 의해 트리거됩니다.
사용자 재생 작동하지만, 시작 버튼이 작동합니다.onLoad="play()"이벤트는 그렇지 않습니다.
예를 들어 동영상이 재생됩니다.
<input type="button" value="Play" onclick="document.myMovie.play()">
iOS에서는 다음과 같은 기능이 전혀 작동하지 않습니다.
<body onload="document.myMovie.play()">
저는 이 질문이 오래되었고 이미 받아들여진 답을 가지고 있다는 것을 깨닫는 것으로 시작하고 싶습니다. 하지만 이 질문을 수단으로 사용한 불행한 인터넷 사용자로서 저는 제 생각과 제안을 덧붙이고 싶습니다.
@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 인스턴스로 승격되어 표시되는 비디오 요소가 전혀 필요하지 않기 때문에 주로 작동합니다."클릭"(또는 모바일에서 "터치 종료") 핸들러에 있습니다.
$(".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에서 비디오를 재생하므로 재생하기 전에 클릭하면 비디오 크기를 조정할 수 있는 메커니즘이 필요합니다. 그렇지 않으면 오디오가 표시되고 비디오가 표시되지 않습니다.
설정하기
webView.mediaPlaybackRequiresUserAction = NO;
자동 재생은 iOS에서 작동합니다.
iOS 10부터 동영상은 자동 재생이 가능하지만 음소거 상태이거나 오디오 트랙이 없는 경우에만 재생됩니다.야!
간단히 말해서:
<video autoplay>이제 요소는 다음 조건을 충족하는 요소에 대해 자동 재생 속성을 준수합니다.<video>소스 미디어에 오디오 트랙이 없는 경우 요소는 사용자 제스처 없이 자동 재생할 수 있습니다.<video muted>요소는 사용자 제스처 없이도 자동 재생할 수 있습니다.- 만약에
<video>요소가 오디오 트랙을 얻거나 사용자 제스처 없이 음소거되지 않으면 재생이 일시 중지됩니다. <video autoplay>요소는 뷰포트로 스크롤되거나 CSS를 통해 볼 수 있게 되고 DOM에 삽입되는 것과 같이 화면에 표시될 때만 재생되기 시작합니다.<video autoplay>요소가 뷰포트 밖으로 스크롤되는 것과 같이 뷰포트가 아닌 요소가 되면 일시 중지됩니다.
자세한 내용은 https://webkit.org/blog/6784/new-video-policies-for-ios/ 에서 확인할 수 있습니다.
이 Safari HTML5 참조에서 당신은 읽을 수 있습니다.
사용자 비용으로 셀룰러 네트워크를 통한 무단 다운로드를 방지하기 위해 내장 미디어는 iOS의 Safari에서 자동으로 재생할 수 없습니다. 사용자는 항상 재생을 시작합니다.재생이 시작되면 iPhone 또는 iPod touch에서 컨트롤러가 자동으로 제공되지만 iPad의 경우 컨트롤 속성을 설정하거나 JavaScript를 사용하여 컨트롤러를 제공해야 합니다.
먼저 비디오를 음소거하여 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>
macOS 및 iOS의 Safari는 play 인라인 속성에서만 작동합니다.
따라서 ID가 videoHolder인 video inside 요소를 재생하려면 다음 코드와 같이 해야 합니다.
var vid = document.querySelector('#videoHolder');//dom with id of video container
var video = vid.querySelector('video');//the video element
video.setAttribute("playsinline",""); //add attribute playsinline
video.mute(); //mute the video
video.play(); //play the video
또는 html5 비디오 태그를 사용하는 경우 태그의 속성을 사용합니다. 예를 들어 아래 html을 참조하십시오.
<video autoplay="autoplay" loop="loop" muted="muted" playsinline="">
<source src="https://yourdomain.com/your_video.mp4" type="video/mp4">
</video>
언급URL : https://stackoverflow.com/questions/12496144/can-you-autoplay-html5-videos-on-the-ipad
'source' 카테고리의 다른 글
| jQuery ajax 성공 오류 (0) | 2023.08.30 |
|---|---|
| 헤더 서명이 잘못되었습니다. Excel 문서에 Apache POI가 있는 IO 예외 (0) | 2023.08.25 |
| 스위프트 - 코너 반경 및 드롭 섀도우 문제 (0) | 2023.08.25 |
| 우분투에서 이클립스의 루트로 애플리케이션을 디버그하는 방법은 무엇입니까? (0) | 2023.08.25 |
| 여전히 경고 메시지가 표시됨: 구성 'compile'이 더 이상 사용되지 않으며 '구현'으로 대체되었습니다. (0) | 2023.08.25 |