CSS에서 %를 사용하여 HTML5 오디오 플레이어의 크기를 설정할 수 있습니까?

Question

HTML5 width의 스타일을 에 쓸 수 있습니까? audioplayer? 해봤지만 해결책을 찾지 못했습니다.

Answer 1

<audio controls id="player" style="width: 80%;"> 
    <source src="" type="audio/mpeg"><br> 
</audio> 

또는 스타일 시트에서 너는 "player"ID에 너비를 줄 수 있습니다.

<style> 
    #player { width: 80%;} 
</style> 

Answer 2

아니요, 적어도 브라우저와 운영체제에서는 신뢰할 수 없습니다. 모든 브라우저 (또는 모바일 OS)는 HTML5 오디오 플레이어/audio 태그에 대한 자체 디자인을 가지고 있으며 대부분은 CSS를 통해 변경하려는 시도에 전혀 반응하지 않습니다.

가능한 한 HTML5 오디오를 사용하고 플래시 폴백 옵션이 있으며 자체 기본 "스킨"이있는 jQuery 플러그인 "jPlayer"(http://jplayer.org/)를 사용하는 것이 좋습니다. 그러나 그것은 또한 당신이 그것에 대한 자신의 피부를 구축 할 수 있습니다. 이를 위해서는 실제로 구조에 들어가야합니다 (예 : 시도하여 학습). 일단 이해하면 자신 만의 오디오 플레이어 디자인을 만들 수 있습니다.

제대로 이해했다면 HTML5 오디오 플레이어의 기본 인터페이스를 숨기고 오디오 재생을 제어하는 ​​사용 가능한 JS 이벤트에 액세스하는 HTML/JS 구조를 설정합니다. 이러한 html 요소에는 CSS 규칙을 통해 직접 스타일을 지정할 수있는 클래스가 있습니다. 2016 년

Answer 3

대부분의 브라우저는 단순히 적용 지원 CSS 폭 % : 파이어 폭스 & 크롬에

audio { 
 
    width: 80% 
 
}

<audio controls id="player" src="https://ia801009.us.archive.org/4/items/BeatlesGreatestHits/02%20With%20a%20Little%20Help%20From%20My%20Friends.mp3"> 
 
    <source src="" type="audio/mpeg"><br> 
 
</audio>

을 테스트