다른 콘텐츠를 실행중인 비디오와 동기화하는 HTML5 태그 및 JavaScript 코드를 사용하는 웹앱을 만들었습니다. Firefox, Chrome 및 Safari와 같은 데스크탑 브라우저에서 잘 작동합니다. iPhone 또는 DroidX에서 기본 비디오 플레이어가 팝업되어 화면을 차지하므로 비디오와 동시에 표시하려는 다른 동적 컨텐츠가 가려집니다.

이 주위에 어떤 방법이 있습니까? 필요한 경우 두 플랫폼 모두에 기본 앱을 작성하는 방법을 알아낼 것이지만 HTML5 / JavaScript 만 사용하면 많은 노력을 절약 할 수 있습니다.

iOS 10 이상에서

Apple playsinline은 iOS 10의 모든 브라우저에서 속성 을 사용하도록 설정 했기 때문에 원활하게 작동합니다.

<video src="file.mp4" playsinline>

iOS 8 및 iOS 9에서

짧은 답변 : 사용 아이폰 인라인 비디오는 , 그것은 인라인 재생 및 동기화 오디오를 할 수 있습니다.

긴 대답 : 비디오를 실제로 표시하지 않고 감추어 재생을 시뮬레이션하여이 문제를 해결할 수 있습니다 .play().

iOS 웹 브라우저에서 라인 미디어 재생을 활성화 / 비활성화하는 속성이 있습니다 (기본 앱을 작성하는 경우 allowsInlineMediaPlaybackUIWebView 의 속성 임). iPhone에서는 기본적으로 이로 설정되어 NO있지만 iPad에서는로 설정되어 YES있습니다.

다행히도 다음과 같이 HTML에서이 동작을 조정할 수 있습니다.

<video id="myVideo" width="280" height="140" webkit-playsinline>

희망적으로 당신을 위해 그것을 정리해야합니다. Android 기기에서 작동하는지 모르겠습니다. 웹킷 속성이므로 그렇게 할 수 있습니다. 어쨌든 갈만한 가치가 있습니다.

기존 답변 (2016 년까지 해당)

여기에 애플 개발자 링크는 것을의 명시는 것을 말한다 -

작은 화면 장치 인 iPhone 및 iPod touch에서 " 웹 페이지에 비디오가 표시 되지 않습니다 "

Safari 장치 별 고려 사항

귀하의 옵션 :

• 이 webkit-playsinline속성은 iOS의 HTML5 비디오에서 작동하지만 웹 페이지를 웹앱으로 웹앱으로 저장하는 경우에만 작동합니다 -Safari에서 페이지를 열지 않은 경우
• 웹뷰 네이티브 응용 프로그램 (또는 HTML, CSS, JS와 하이브리드 응용 프로그램)의 경우는 UIWebView만하면되지만, 비디오 인라인을 재생할 수 설정된 allowsInlineMediaPlayback속성을 에 대해 UIWebViewtrue로 클래스

iOS 10 베타 4에서 HTML5의 올바른 코드는

<video src="file.mp4" webkit-playsinline="true" playsinline="true">

webkit-playsinlineiOS <10이고 playsinlineiOS> = 10

https://webkit.org/blog/6784/new-video-policies-for-ios/ 를 통해 세부 사항을보십시오

이 페이지 ( https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html) 에 따르면 (allowInlineMediaPlayback 속성이 YES로 설정된 UIWebView에서만 활성화 됨)에만 사용할 수 있습니다. ) Mobile Safari에서는 iPad에서는 YES이고 iPhone 및 iPod Touch에서는 NO입니다.

안드로이드에 대해서는 모르겠지만 작은 화면 크기 때문에 iPhone 또는 iPod touch의 Safari가 모든 비디오를 전체 화면으로 재생합니다. iPad에서는 비디오를 페이지에서 재생하지만 사용자가 전체 화면으로 만들 수 있습니다.