JPlayer - 오디오 플레이어를 반응시키는 방법?

jplayer를 반응 적으로 만들 수있는 방법이 있습니까? 이 피부입니다. http://jplayer.org/latest/demo-01-supplied-mp3/?theme=0 JPlayer - 오디오 플레이어를 반응시키는 방법?

너비에 백분율을 사용하여 전체 플레이어의 크기를 조정하고 싶습니다. 나는 포장지로 시도했다 :

.wrapper { 

max-width: 100%; 
height: auto; 
width: 100%\0/; /* IE8 hack for max-width */ 
}

그러나 작동하지 않는다.

아무도 도와 줄 수 있습니까?

감사합니다.

데모 : http://www.beyondhyper.com/jplayer/

GitHub의 : https://github.com/BeyondHyper/responsive-jPlayer

출처

2013-12-11 mauc

내가 올바른 방향을 가리킬 수있는이 jplayer 반응 디자인 오늘 우연히 만났다 컨테이너에 div.jp-audio를 설정합니다. 420px로 설정되었습니다. 해당 값을 변경하거나 주석 처리하십시오. 나는 그것이 당신이 찾고있는 것이라고 생각합니다. 그렇지 않다면 알려주세요.

출처

2013-12-15 20:27:51 phrend

지정한 플레이어가 정적 폭

출처

2013-12-15 23:40:18 Derick

사람이 내가 래퍼하지만 기쁨으로 위의 제안을하려고이 작업은, 나는 플레이어 80 %로 폭을 설정 한 취득했다 만에 찾을 때 320 전화 진행 상황 및 일부 컨트롤이 상자 밖에 있습니다 –

래퍼의 너비를 100 %로하고 최대 너비를 원하는대로 지정해야합니다.

.wrapper { 
max-width: 420px; 
width:100%; 
}

일반적으로 요소를 반응 적으로 만들 때 높이를 지정하지 않습니다. 이게 도움이 되었으면 좋겠다

출처

2014-03-14 15:13:10

아니요, 작동하지 않습니다. Derick은 플레이어에 정적 인 너비가 있다고 말했다. 정적 요소를 유연하게 만드는 것 (% 값을 부여하는 것) 이외에는 다른 방법이 없습니다.나는 모든 정적 요소가있는 전체 플레이어의 크기를 조정하는 "래퍼"솔루션을 찾고 있었지만 그런 솔루션은 없다고 생각합니다. ... – mauc

질문은 당신이 완전히 반응하는 jplayer를 만들고 있다는 것을 의미합니다. 래퍼 내의 나머지 요소는 그에 따라 스타일이 지정됩니다. 물론 내부의 모든 것을 조정해야합니다. –

저는 실제로 반응 형 jplayer를 만들고 있습니다. 완료되면 어딘가에 게시하겠습니다. 확실히 가능합니다. jplayer는 단지 지루한 CSS입니다. –

나는 다음을 사용하여 jplayer를 반응 적으로 만든다. Jplayer는 스타일 태그를 HTML에 직접 추가하므로! important를 사용해야합니다.

jquery가 재생하기 전에 비디오 높이와 너비를 0으로 설정했기 때문에 응답하는 비디오에 문제가 있습니다. CSS에서 비디오의 자동 높이로 높이를 설정하면 비디오 상단에 포스터가 표시됩니다. 첫 번째 하중시.

@media screen and (max-width: 500px) { 

    /* jplayer */ 
    .jp-video video, .jp-audio, .jp-controls-holder { 
     width: 100% !important; 
    } 

    .jp-video, .jp-video > div, .jp-video img { 
     height: auto !important; 
     width: 100% !important; 
    } 

    .jp-video-360p { 
     max-width: 570px !important; 
    } 

    .jp-video-270p { 
     max-width: 480px !important; 
    } 

    .jp-progress { 
     width: 130px; 
    } 
}

출처

2014-04-30 11:36:20 Dave

-1

여기 JWplayer 5 응답 할 수있는 방법입니다하지만 이것은 오디오를 위해 잘 작동합니다, 그것은 동영상에 대한 의미하지만, 그것은뿐만 아니라 오디오와 함께 작동한다.

<div style='position:relative;width:100%;height:100%;padding-bottom:56.25%;'> 
    <div style='position:absolute;width:100%;height:100%;'> 
embedding code... 
    </div> 
    </div>

그런 다음 당신이 볼, 폭과 첫 번째 줄에서 100 % 에 플레이어의 코드를 삽입하는 높이를 설정합니다 http://www.miracletutorials.com/how-to-make-jw-player-5-10-responsive/

기본적으로, 당신이해야 할 것은이 개 래퍼 된 div를 설정하는 것입니다 padding-bottom : 56.25 %, 이것은 HD 비디오의 높이 값입니다. 오디오의 경우 포스터 이미지를 표시하고 싶지 않으면 훨씬 작게 만들 수 있습니다. 도움이 되었기를 바랍니다.

출처

2015-08-21 14:25:54

JWPlayer는 JPlayer가 아닙니다. –

지적 해 주셔서 고맙습니다. 나는 이것이 실제로 JWplayer에 관한 것이라고 생각했다. 그러나 시도하는 것은 여전히 가치가 있으며 알아 내기 위해 수 분 밖에 걸리지 않습니다. –

이 무엇 당신이 찾고있는

@media screen and (min-width: 1024px) 
#wrapper { 
width: 65%; 
float: left; 
margin: 30px auto auto;

출처

2016-10-14 09:29:07

JPlayer - 오디오 플레이어를 반응시키는 방법?

답변

관련 문제