2011-03-25 10 views
14

iPhone 및 iPod에서 웹 페이지에 YouTube 동영상이 포함되어 있으면 사용자가 동영상을 터치하고 동영상 재생이 시작됩니다. iOS 미디어 플레이어가 슬라이드됩니다 비디오가 가로 방향으로 전체 화면으로 재생됩니다. 동영상 재생이 끝나면 iOS 미디어 플레이어가 슬라이드 아웃되어 동영상이 삽입 된 웹 페이지가 표시됩니다.iPhone 및 iPod에서 사파리 웹 앱의 HTML5 동영상 플레이어 동작

HTML5 <video> 태그를 사용하면 사용자는 동영상을 터치 ​​할 수 있으며 동영상은 현재 화면 방향으로 무엇이든간에 전체 화면으로 "확대/축소"하여 재생을 시작합니다. 동영상 재생이 끝나면 한 번 탭하여 플레이어 컨트롤을 불러 와서 '완료'를 탭하여 웹 페이지로 돌아갑니다.

유감스럽게도 내 동영상을 YouTube에 업로드하는 것은이 애플리케이션의 옵션이 아니며 동영상 재생이 완료된 후 웹 사이트로 돌아 오는 HTML5 동영상 플레이어를 찾지 못했습니다. 동영상 플레이어가 YouTube 퍼간 동영상과 동일한 동작을 보이거나 동영상이 인라인으로 재생되는 것을 선호합니다. 사용자 정의 된 UIWebView에서 강제로 인라인 비디오를 만들 수는 있지만, 불행히도 이는 옵션이 아닙니다 (기본 앱이 아닌 웹 앱이어야 함). 또한 <video> 속성 webkit-playsinline이 작동하지 않습니다.

삽입 된 YouTube 동영상 비헤이비어를 복제 할 수있는 HTML5 동영상 플레이어가 있습니까? 내가 명백한 자바 스크립트 해결 방법을 놓치고 있습니까? 비디오가 사용자 상호 작용없이 재생 완료되었음을 알리는 방법이 있습니까?

편집 :

Jan 덕분에이 문제가 해결되었습니다. 실수/메모 목록과 함께 작업 코드가 이어집니다.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>scratchpad</title> 
</head> 
<body> 
<video id="video"> 
    <source src="movie.mp4" type="video/mp4" /> 
</video> 
<script type="text/javascript"> 
document.getElementById('video').addEventListener('ended',function(){document.getElementById('video').webkitExitFullScreen();},false); 
</script> 
</body> 
</html> 

실수는 내가 만든 :
1. <video> 태그에 ID를 추가 잊으.
2. webkitSupportsFullscreen에 대한 테스트 - 테스트 할 속성을 "true"로 설정할 수 없었습니다. this forum post 코드의 주석은 말한다

// note: .webkitSupportsFullscreen is false while the video is loading 

그러나 나는 그것이 사실 반환하는 조건을 생성 할 수 없습니다.
3. 완전히 누락 된 this stackoverflow post.

답변

9

흠, 나 자신을 시도 할 수는 없지만 ... 이걸 본적이 확실한가요?

http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html#//apple_ref/doc/uid/TP40009356

그래서, "webkitEnterFullScreen()"(사이먼이 읽기 전용라고하지만) 당신의 친구가 될 수 있습니다

http://nathanbuskirk.com/?p=1

인라인 비디오는 옆에있는 iOS 장비에 수 없습니다 iPad (지금까지).

어쨌든, 당신은 이벤트 리스너를 사용하여 자바 스크립트에서 비디오의 끝을 감지 할 수 있습니다

document.getElementById('video').addEventListener('ended',videoEndListener,false); 

건배,

+0

아니요, 찾을 수 없었습니다. 링크를 가져 주셔서 감사합니다. 이 코드를 얻을 수 있는지 알아보기 위해 몇 가지 코드를 작성한 다음 답변을 수락하고 내 질문을 코드로 업데이트합니다. – whlteXbread

+0

굉장합니다. 도와 줘서 고마워! – whlteXbread

+1

"완료"버튼 푸시 이벤트를 처리하려고하지만 '종료 된'이벤트가 더 이상 IOS> 4.3에서 시작되지 않는다는 경고가 표시됩니다. 이제는 해고되는 유일한 이벤트는 '일시 중지'입니다.이 이벤트는 재생 및 일시 중지 버튼을 누를 때 발생하는 동일한 이벤트이기 때문에 전혀 도움이되지 않습니다. – simianarmy

1

을 사파리 문서에서 :

" 중요 : webkitEnterFullscreen() 메서드는 버튼을 클릭하는 등의 사용자 작업에 대한 응답으로 만 호출 할 수 있으며, webkitEnterFullscreen()은 예를 들어 onload() 이벤트에 대한 응답입니다. "

왜 webkitEnterFullscreen이 항상 false인지 설명 할 수 있습니다. '종료'이벤트를 처리

http://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW13

월의 솔루션은 귀하의 경우 최고입니다.

관련 문제