아이폰이나 안드로이드에서 HTML5가 있는 네이티브 풀스크린 비디오 플레이어를 피할 수 있습니까?

아이폰이나 안드로이드에서 HTML5가 있는 네이티브 풀스크린 비디오 플레이어를 피할 수 있습니까?

저는 HTML5 태그와 실행 중인 동영상과 동기화된 다른 콘텐츠를 렌더링하는 자바스크립트 코드를 사용하는 웹 앱을 만들었습니다.데스크톱 브라우저에서 잘 작동합니다.Firefox, Chrome 및 Safari가 있습니다.iPhone 또는 DroidX에서는 기본 비디오 플레이어가 팝업되고 화면을 차지하여 비디오와 동시에 표시하려는 다른 동적 콘텐츠가 모호해집니다.

이 일을 피할 방법이 있습니까?필요하다면 두 플랫폼 모두를 위한 네이티브 앱을 작성하는 방법을 생각해 보겠지만, HTML5/JavaScript를 계속 사용할 수 있다면 많은 노력을 절약할 수 있을 것입니다.

iOS 10+에서

Apple이 속성을 사용하도록 설정했습니다.playsinlineiOS 10의 모든 브라우저에서 원활하게 작동합니다.

<video src="file.mp4" playsinline>

iOS 8 및 iOS 9에서

간단한 답변: iphone-in-line-video를 사용하여 인라인 재생을 활성화하고 오디오를 동기화합니다.

긴 답변:이 문제를 해결하려면 실제 대신 비디오를 스킴으로써 재생을 시뮬레이션할 수 있습니다..play()'ing it.'

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

또한 HTML에서 다음과 같이 이 동작을 조정할 수 있습니다.

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

...그것이 당신을 위해 해결되기를 바랍니다.당신의 안드로이드 기기에서 작동할지 모르겠습니다.웹킷 속성이니까 그럴 수도 있습니다.어쨌든 시도해 볼 가치가 있습니다.

구답(2016년까지 적용)

여기 Apple 개발자 링크가 명시적으로 다음과 같습니다.

대화면 기기인 아이폰과 아이팟 터치에서는 "웹페이지 내에서 동영상이 표시되지 않습니다."

Safari 장치별 고려 사항

옵션:

• 그webkit-playsinline속성은 iOS에서 HTML5 비디오에 대해 작동하지만 웹 페이지를 웹 앱으로 홈 스크린에 저장할 때만 작동합니다 - Safari에서 페이지를 연 경우에는 작동하지 않습니다.
• 웹뷰가 있는 네이티브 앱(또는 HTML, CSS, JS가 있는 하이브리드 앱)의 경우,UIWebView클래스 속성을 true로 설정한 경우에만 비디오를 인라인으로 재생할 수 있습니다.

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

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

webkit-playsinline< 10, iOS < 10, 그고리용입니다.playsinline 10iOS용 >= 10

자세한 내용은 https://webkit.org/blog/6784/new-video-policies-for-ios/ 을 통해 확인하십시오.

이 페이지 https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html 에 따르면 다음과 같은 경우에만 사용할 수 있습니다(가 허용되는 UIWebView에서만 활성화됨).InlineMediaPlayback 속성이 YES로 설정되었습니다.)모바일 사파리에서는 iPad에서는 YES, iPhone 및 iPod Touch에서는 NO로 표시됩니다.

안드로이드에 대해서는 잘 모르겠지만 아이폰이나 아이팟 터치의 사파리는 화면 크기가 작기 때문에 모든 동영상을 전체 화면으로 재생합니다.iPad에서는 동영상을 페이지에 재생하지만 사용자가 전체 화면으로 만들 수 있습니다.

언급URL : https://stackoverflow.com/questions/5054560/can-i-avoid-the-native-fullscreen-video-player-with-html5-on-iphone-or-android