2013-07-11 1 views
0

2 개의 동영상에 자바 스크립트를 사용하여 조건부를 작성하는 데 도움이 필요합니다. 나는 주변을 수색했으나 내 변수를 설정하는 방법에 대해 혼란 스럽다. 데스크톱 브라우저의 사이트에 게재하고 싶은 동영상 1 개 (플래시 iframe)가 있지만 휴대 기기에서 사이트를 볼 때 다른 동영상 (플래시가 아닌)을 표시하고 싶습니다. 자바 스크립트 조건부 사용자 에이전트 변수

는 두 개의 동영상입니다

#mobile_video { 
    display: none; 
} 

#desktop_video { 
    display: block; 
} 

@media only screen and (max-width: 480px) { 
    #desktop_video { display: none; } 
    #mobile_video { display: block; } 
} 

비록 :

<html> 
    <div id="desktop_video"> 
     <iframe src="url-here" height="650" width="600" frameborder="no" scrolling="no" marginwidth="0px" marginheight="0px"></iframe> 
    </div> 

    <div id="mobile_video"> 
     <script type="text/javascript" src="http://url-here"></script> 
    </div> 
</html> 

답변

0

말, 당신이 480 픽셀의 최소 브라우저 폭의 바탕 화면을 보여주기 위해 노력하고,이 당신의 CSS 것 바탕 화면이 이미 차단되어 있어야합니다. 코드가 필요하다는 것이 분명해졌습니다. 이것은 이것을 수행하는 간단한 방법 일뿐입니다.

+0

나는이 방법을 좋아 ... 심지어 SO에이 솔루션을 도움. 그러나 그것은 내 iPad에서 작동하지 않습니다. 모바일 비디오가 표시되지 않고 플래시 오류 메시지가 계속 표시됩니다. 어떤 통찰력? – user2574654

+0

나머지 설정이 있다고 생각했습니다. 헤더에 다음을 추가해보세요. 당신은 당신의 iPad의 크기를 css max-width : 768px에 꽂습니다 (나는 믿습니다). 자세한 내용은 여기를 참조하십시오. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ – Mikel

+0

이제 iPad에서 데스크톱 비디오를 호출하지 않으므로 플래시 오류가 발생하지 않습니다. 어느 것이 좋니. 하지만 여전히 모바일 비디오를 불러오는 중입니다. 단지 비어 있습니다. 나는이 아침에 다시 와야 할 것이다. 당신의 도움을 주셔서 감사합니다! – user2574654

0

Navigator.useragent을 사용하여 클라이언트의 브라우저를 검색 할 수 있습니다. (많은 자원 당신이 그것을 검색하면 거기에있다.)

나는 사용자가 모바일 장치를 사용하고 있는지 확인합니다 javascriptkit에서 다음 줄을했다 ...

//returns true if user is using one of the following mobile browsers 
var ismobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) 

당신이 할 수있는 ismobiletrue을 반환하면 모바일 비디오 (플래시 없음)를 표시하십시오. 아니면 그냥 iframe 동영상을 표시 할 수 있습니다.

희망이 있으면 시작하는 데 도움이됩니다. 내가 언급 한 바와 같이, 거기에 자원이 많이있다

How to detect a mobile device with javascript