Youtube 비디오 전체 화면 브라우저에서 재생

Question

내 질문 : iOS는 기본적으로 전체 화면에서 내장 Youtube 비디오를 재생할 유일한 OS입니까? 그렇다면 안전하지 않은 장치에서 전체 화면 (또는 닫기)으로 YouTube 동영상을 안전하게 표시 할 수 있습니까?

상황에 따라 각 페이지에 YouTube 비디오가 포함 된 웹 페이지 그룹이 있습니다. 아이디어는 사용자를 웹 페이지 그룹에 속하게하여 (그룹에서 나가기 전까지) 관련 동영상을 표시하지 않으며 페이지의 다른 링크는 다른 페이지로 연결되는 링크입니다. 그룹 (및 "종료"버튼).

문제는 일관된 교차 장치 환경을 제공 할 수 없다는 것입니다. 내가 말할 수있는 한, Youtube 비디오 전체 화면을 재생하는 유일한 방법은 Youtube App을 여는 것입니다. 내 준 응용 프로그램의 경험을 망치고 싶지 않기 때문에 그렇게하고 싶지 않습니다.

나는 this thread을 찾았지만 희망이 보였지만 watch_popup url에 연결하면 Droid 기기의 Youtube App이 실행됩니다.

YouTube 동영상 API를 사용하여 동영상을 퍼간 다음 사용자가 동영상을 재생할 때 동영상을 모달로 표시 할 수 있습니다. 그러나 iOS 기기에서 동영상이 이미 기본적으로 전체 화면에서 재생되므로 iOS 기기의 사용 환경을 방해합니다.

제 생각에는 userAgent를 감지해야하고 userAgent가 iOS가 아닌 경우 비디오를 모달 창에 표시해야합니다. userAgent 감지는 2001 년으로 보입니다. 더 나은 방법이 있습니까?

Answer 1

우리는 전체 화면 경험이되고 싶었지만 단 한 번의 클릭으로 재생되기를 원했지만 IOS와 비슷한 상황이 발생했습니다.

기본적으로 IOS에 인라인 비디오가있는 경우 비디오를 클릭해야만 전체 화면으로 열리고 다시 재생하려면 다시 클릭해야합니다. 단계가 너무 많습니다.

경험을 일관되게 만들기 위해 다음을 수행했습니다.

는 이벤트로 포지션, 크기를 조절하고, 클릭에 불투명도를 조정하도록 비디오 자리 표시 자 이미지를 사용하지만, 0

설정으로 설정 불투명도를 가진 자리 표시 자 이미지를 통해 유튜브 API를 통해 비디오를로드 전체 화면 모달의 경우 1로 자동 재생됩니다.

var done = false; 
function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING && !done) { 
    $('.mobile-video-container').css('opacity', 1); 
    $('.page-container').addClass('modal-background'); 
} 
} 

function stopVideo() { 
player.stopVideo(); 
} 
$('.page-container').click(function(){ 
    $('.mobile-video-container').css('opacity', 0); 
    $('.page-container').removeClass('modal-background'); 
    player.stopVideo(); 
});