есть ли способ сделать jplayer отзывчивым? Это кожа: http://jplayer.org/latest/demo-01-supplied-mp3/?theme=0JPlayer - Как сделать аудиоплеер отзывчивым?
Я хотел бы масштабировать весь плеер, используя процент по ширине. Я попытался с оберткой:
.wrapper {
max-width: 100%;
height: auto;
width: 100%\0/; /* IE8 hack for max-width */
}
но это не работает.
Может ли кто-нибудь помочь?
Спасибо!
я наткнулся на этот jplayer адаптивный дизайн сегодня, который может направить вас в правильном направлении:
Игрок, указанный имеет статическую ширину установлен на его контейнере, div.jp-audio. Он установлен на 420 пикселей. Попробуйте изменить это значение или прокомментировать его. Я думаю, это то, что вы ищете. Если нет, дайте мне знать.
Вам необходимо сделать ширину обертки 100% и максимальную ширину, которую вы хотите ограничить.
.wrapper {
max-width: 420px;
width:100%;
}
Обычно я не указываю высоту при реагировании элементов. Надеюсь, это поможет
Нет, это не сработает. Как сказал Дерик, в игре есть статическая ширина. Я боюсь, что нет другого пути, кроме как сделать все статические элементы гибкими (давая им значения%).Я искал решение «обертки», которое масштабирует весь плеер со всеми статическими элементами в нем, но я думаю, что такого решения нет ... – mauc
Вопрос подразумевает, что вы создаете полностью отзывчивый jplayer, поэтому я просто предположил остальные элементы внутри обертки будут соответствующим образом оформлены. Конечно, все внутри нужно будет скорректировать. –
Я на самом деле создаю отзывчивый jplayer на данный момент. Я отправлю куда-нибудь, когда закончим. Определенно возможно, jplayer просто очень утомительный css. –
Я использую следующее, чтобы сделать jplayer отзывчивым. Jplayer добавляет теги стиля непосредственно в HTML, поэтому вам нужно использовать! Important.
У меня возникли проблемы с отзывчивым видео еще, но поскольку jquery устанавливает высоту и ширину видеоролика до нуля, прежде чем воспроизведение будет нажато, если вы установите высоту в auto на видео в 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;
}
}
Вот способ сделать JWplayer 5 отзывчивым, она предназначена для видео, но он работает с аудио, а также. http://www.miracletutorials.com/how-to-make-jw-player-5-10-responsive/
В принципе, то, что вам нужно сделать, это установить 2-оболочки дивы:
<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% В первой строке вы видите padding-bottom: 56.25%, это значение для высоты HD-видео. Для аудио вы захотите сделать это намного меньше, если вы не хотите показывать изображение плаката. Надеюсь, это поможет?
JWPlayer не является JPlayer. –
Спасибо, что указали это. Я действительно думал, что это касается JWplayer. Однако, все же стоит попробовать, требуется всего лишь минутку, чтобы узнать. –
Это то, что вы ищете
@media screen and (min-width: 1024px)
#wrapper {
width: 65%;
float: left;
margin: 30px auto auto;
сделал кто-нибудь получить эту работу я попробовал выше предложение с оберткой, но без радости, я установил ширину до 80% для игрока, но при взгляде на 320 продвигается вперед, а некоторые элементы управления находятся за пределами коробки. –