아이폰의 VideoJS 커스텀 플레이어 테마

iPhone에서 VideoJS (v.5) HTML5 플레이어를 커스터마이즈 할 수있는 방법이 있습니까?아이폰의 VideoJS 커스텀 플레이어 테마

createEl() 메서드를 사용하여 플레이어 및 사용자 지정 컨트롤 위에 맞춤 요소를 만들었습니다. 데스크탑, 모바일 (안드로이드) 및 태블릿 (안드로이드 및 ipad)에서는 모든 것이 잘 보이지만 iPhone의 경우 플레이어는 HTML 기본 컨트롤로 떨어지고 사용자 정의 요소는 표시되지 않습니다 (아래 이미지 참조).

안드로이드 플레이어 : iOS에서

The player on Android

플레이어 : 우리에게 뭔가를 알려줍니다에는 Video.js에서 createEl() 방법 코드의 일부는

The player on iOS

있다 iPhone을 깨는 것에 대해.

// insert the tag as the first child of the player element 
 
// then manually add it to the children array so that this.addChild 
 
// will work properly for other components 
 
// 
 
// Breaks iPhone, fixed in HTML5 setup. 
 
Dom.insertElFirst(tag, el); 
 
this.children_.unshift(tag); 
 

 
this.el_ = el; 
 

 
return el;

이 문제에 대한 모든 솔루션?

출처

2017-02-01 Adrian MIHALACHE

그 스크린 샷은 iOS가 아닙니다. iOS의 기본 동영상 요소는 그렇게 보이지 않습니다. – misterben

예, 알고 있습니다. 크롬 인스펙터를 사용하여 Android 기기와 iPhone을 시뮬레이트하여 이러한 인쇄 화면을 가져 왔습니다. 실제 기기에서도 테스트했는데 그 결과는 같습니다. 앞서 언급 한 것처럼 iOS의 기본 HTML5 플레이어가 다르게 보입니다. 결론은 브라우저 헤더를 기반으로 플레이어가 다르게 렌더링된다는 것입니다. –

대답은 간단합니다. iPhone에서 Safari 브라우저를 사용하여 동영상을 재생하는 경우 (현재, 미래에는 가능하지 않습니다) 할 수 없습니다.

iPhone의 Safari 모바일 동영상이 인라인으로 재생되는 것을 허용하지 않으므로 항상 전체 화면으로 이동해야합니다. iPad는 겹쳐진 콘텐츠를 가질 수는 없지만 인라인으로 재생합니다.

인라인으로 재생하려면 UIWebView가있는 iOS 응용 프로그램을 직접 만들어야합니다. UIWebView에는 allowsInlineMediaPlayback 속성이 있습니다.이 속성은 YES로 설정할 수 있습니다. iPhone에서이 기능을 사용할 때 webkit-playsinline 속성을 설정하는 비디오 태그에 사용자 정의 HTML을 사용할 수 있습니다. 여기

확인 : https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW20

아이폰 OS 참고 : iOS의 경우 전체 화면 비디오는 기본 컨트롤를 표시 할 수 있습니다.

출처

2017-02-04 16:09:45

프로젝트를 시작할 때 iOS에서 재생되는 인라인 비디오는 지원되지 않지만 iOS 10부터는 희망이 있다는 것을 알고 있습니다. [iOS 10부터 WebKit은 인라인 및 자동 재생 정책을 완화합니다] (https://webkit.org/blog/6784/new-video-policies-for-ios/) 또한 고객은 " 워싱턴 포스트 "비디오가 포함 된 기사에는 사용자 정의 컨트롤 및 기타 요소가 있습니다 (여기 [https://www.washingtonpost.com/news/the-switch/wp/2017/02/05/uber-twitter-netflix] 참조). - 기타 - 기술 - 거인 - 여행 - 금지 - 불법 - 희귀 - 조정 - 법적 - 행동/utm_term = .5750df2664ff) –

@ 애드리안. 좋은 기능. 그러나 전체 화면이 아닌 인라인으로 비디오를 재생할 수 있다는 것을 알고 있었지만 컨트롤이 거기에있을 것이고 사용자가 "오버레이"할 수 있다고 생각하지 않습니다. 소스를 확인하면 비디오 요소를 만들고 재생할 수 있지만 본문에 추가되지는 않았 음을 알 수 있습니다.이 코드는 캔버스 요소를 만들고 비디오 프레임을 그립니다. 따라서 비디오 플레이어를 시뮬레이션 할 수 있습니다. 왜냐하면 몸에 첨부 된 캔버스를 오버레이하여 자신의 컨트롤을 추가 할 수 있기 때문입니다. –

@Adrian. 나는 당신을 도울 코드를 찾았습니다. 이렇게하면 iOS 8 및 iOS 9 (거의 폴리 폴리)에서 iOS 10의 playsinline 속성을 사용할 수 있지만 컨트롤이없고 사용자 상호 작용이 없습니다. 여기에서 확인하십시오 : https://github.com/bfred-it/iphone-inline-video –

아이폰의 VideoJS 커스텀 플레이어 테마

답변

관련 문제