Перейти к содержимому



Как уменньшить ширину аудиоплеера на HTML5

#1 master-vek

master-vek
  • Пользователь
  • 198 сообщений
  • Репутация: 9
0

Отправлено 31 Октябрь 2017 - 14:03

При создании странички уже в конце работы решил вставить аудио отзывы от клиентов на плеерах html5.  В Мозилее всё крректно, а в Google  3 плеера не вмещаются по ширине.страницы.

манипуляции с полями, отступами не помогают - никакой реакции.  Посмотрел что пишут люди, оказывается, плеер в разных браузерах отображается по своему.  И советов по изменению размеров изображения нет, кроме одного упоминания о перенастройке скрипта браузера. в двух словах.  Со скриптами не дружу.  

 

В связи с этим вопрос, Как уменьшить ширину изображения аудиоплеера на HTML5  Посоветуйте, пож. кто что может.  Лучше без скриптов.  Только ширину!

 

 


 

Идеальный случай, убрать часть картинки с плеера кнопку со значком "СКАЧАТЬ" и всё.Тем более, что она даже вредит уникальности.  Получается классно. Как такая мысль?.

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Как подключить таблицу стилей в HTML 5
  2. Как уменьшить уровень предупреждений на форуме
  3. Изменение размера картинки при уменьшении окна браузера
  4. Сайт не оптимизирован для мобильных устройств в новом Вебмастере Яндекса
  5. Как в слайдере уменьшить размер слайдов?

#2 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 198 сообщений
  • Репутация: 9

Отправлено 31 Октябрь 2017 - 22:05

Проблему решил, тему желательно удалить в связи с не актуальностью. Спасибо.


  • 0

#3 BLIK

BLIK
  • Супермодератор
  • 4 020 сообщений
  • Репутация: 890

Отправлено 31 Октябрь 2017 - 22:06

Проблему решил, тему желательно удалить

Зачем удалять тему?

 

Может вы решение напишите, вдруг кому тоже пригодится. 


  • 1

Качественный хостинг   Тут может быть ваша ссылка?



#4 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 198 сообщений
  • Репутация: 9

Отправлено 01 Ноябрь 2017 - 00:20

Поясню. Дело в том, что во всех браузерах отображение плеера выглядит  по разному.    Просто подобрал отступ, который удовлетворяет два основных браузера, конечно выравнивание приблизительное. Можно раздвинуть ширину  страницы немного, лишь  бы плеера стали в ряд по горизонту. Потом они съезжают под низ при адаптации.

Главное, изначально выстроить в ряд по горизонту. Вот результат на странице: https://servis.kharkov.ua/

 В Мозилле отступы мне не нравятся, а в Гугле пойдёт.  Придётся поискать как подстроить боковые  отступы. Ауто и % не получается.


  • 0

#5 ShowPrint

ShowPrint
  • Пользователь PRO
  • 2 903 сообщений
  • Репутация: 770

Отправлено 01 Ноябрь 2017 - 11:26

@master-vek, заглянул в код ваших плееров, заодно и всего сайта.

Я бы блок плееров сверстал в виде списка, в виде:

<ul>
  <li>
    <audio>
  </li
  <li>
    <audio>
  </li
  <li>
    <audio>
  </li
</ul>

При этом просто css-стилями можно обеспечить и адаптивность, и кроссбраузерность, и даже

убрать часть картинки с плеера кнопку со значком "СКАЧАТЬ"

 

Попробуйте разобраться. Если не получится, то как у меня будет немного свободного времени (сейчас запара) попробую набросать кусочек кода в песочнице...

 

И по коду в целом...

1. У вас творится некоторая "вакханалия" с заголовками: h1-h5-h3-h2 - такой порядок не обеспечивает ожидаемой от них пользы, так как идёт вразрез с тем назначением для которого они были созданы.

2. В продолжение темы заголовков мне абсолютно не понятен смысл конструкции

<h5>
  <img>
</h5>

Заголовок в который обёрнута только картинка является абсолютно лишним и неоправданным

3. Абсолютно точно, на 200%, вы очень сильно переборщили с количеством тегов <strong>

4. Выделите отдельным цветом/стилями внутренние ссылки - о том что между картинками вверху находятся 4 ссылки догадаться может только экстрасенс.

5. Попробуйте поменять в своём сознании понимание блочной вёрстки. Понимаю что это происходит не сразу - сам это проходил. Переход с табличной на блочную вёрстку это не просто замена tr/td на div, скорее это принципиально иное формирование структуры всего кода в целом. То есть просто другой подход.

Схематично, для Вашего кода, при блочной вёрстке более уместна конструкция в следующем виде:

<div class="robo">
  <p>...</p>
  <p>...</p>
  <div class="ssilka">
    ...
  </div>
  <p>...</p>
  <p>...</p>
  <img class="???">
  <p>...</p>
  <p>...</p>
  <div class="ssilka">
    ...
  </div>
  <p>...</p>
  <p>...</p>
</div>

Более активно используйте вложенность, нет необходимости в целом ряде открытия/закрытия "горизонтальных" областей:

  • открыли блок с основным стилем страницы
  • написали что нужно
  • внутри блока с основным стилем открыли дополнительный стилевой блок/элемент
  • написали что нужно
  • закрыли дополнительный и все стили вернулись к основным

Внутри дополнительных стилевых классов также можно вкладывать ещё и ещё другие вложенности, со своими стилями.

Безумно глубокой вложенность конечно не стоит делать, но именно когда начинаешь правильно использовать вложенность при блочной вёрстке начинаешь испытывать кайф о её применения. Именно в этот момент приходит понимание того, что табличная вёрстка - прошлый век. Сам через это прошёл  :)

 

ЗЫ. Прошу воспринять не как "критику", а как "подсказку" - каждый дро коддит, как хочет, и это его право.  :)


  • 2
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#6 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 198 сообщений
  • Репутация: 9

Отправлено 01 Ноябрь 2017 - 11:56

@ShowPrint,

 

Все ваши рекомендации очень интересны и  несут пользу этой страничке.  Моя недоработка связана с тем, что я самоучка и кроме того давненько не занимался  этой тематикой. А тут под вашим влиянием в комментариях пришлось волей неволей вникнуть в простейшую адаптивность.  У меня 2 года сайт на WORDPRESS и я забросил  вёрстку на HTML и CSS.

Про вложенность буду потихоньку исправляться.  Ваш пример и пояснения как пендель  для дальнейшей работы.     Благодарен за доходчивое  аргументирование и примеры.

У меня ещё должны быть странички аналогичные этой, так что тренировка неизбежна. 

Как  наработаю по вашим критериям, доложу на Ваш разбор. 

 

По всем вашим пунктам  проведу на странице корректировку.

 

Но, с тегом <strong>  что то не знаю.  как же мне показать посетителю ключевые слова.  Ведь, человек не будет читать  про все модели, ему нужна конкретная модель или неисправность. Вот здесь прошу подробнее.

 

В целом спасибо, сейчас скопирую весь ваш текст и  за работу.


  • 0

#7 ShowPrint

ShowPrint
  • Пользователь PRO
  • 2 903 сообщений
  • Репутация: 770

Отправлено 01 Ноябрь 2017 - 12:33

@master-vek, я тоже самоучка - книжки, справочники и личный опыт.

 

Как пример вёрстки аудиоплееров посредством списка можете посмотреть (и проверить адаптивность) у меня здесь, с той только разницей что вместо audio у меня video =)

 

Вот здесь прошу подробнее.

Помимо тега "стронг" есть ещё тег <b>, правда его обильное использование я также не стал бы рекомендовать. Почитайте про оба и поймите разницу. Можно загуглить например "разница между strong и b в html"

В целом есть два варианта решения:

Первый, на мой взгляд более правильный, отойти от "простыни" и сделать отдельные страницы по конкретным моделям/неисправностям и упор сделать на грамотную навигацию для того чтоб пользователь мог удобно найти то, что ему нужно.

Второй, более простой, оставляя "многабукафф" на одной странице: вместо strong ( или B) для выделения использовать тег span с определенными стилями. Например:

<head>
  <style>
    .boldText{font-weight:bold}
  </style>
</head>
<body>
  <p>Бла-бла-бла <span class="boldText">выделение</span> бла-бла-бла</p>
</body>

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#8 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 198 сообщений
  • Репутация: 9

Отправлено 01 Ноябрь 2017 - 19:48

Рассматривал ваш сайт с большим интересом.   Если думать, что это сделано на базе самостоятельной подготовки, то это предел возможностей в моём понимании..

Функционал очень высок.  Придётся скопировать, с вашего разрешения,  часть кода применительно CSS  по видео.   Особенно понравилась строка         <video controls width='98%' poster='/video/small/BrotherEmbroidery.jpg' preload='none' id='video'>  Если я поменяю видео на аудио 98%.

 

Относительно жирности текста буду углубленно изучать.   По <span>  интересно - попробую.

 

Делать много страничник не в планах.  Соберу разные страницы по тематике воедино.

 

Спасибо за конкретные примеры.


  • 0

#9 ShowPrint

ShowPrint
  • Пользователь PRO
  • 2 903 сообщений
  • Репутация: 770

Отправлено 01 Ноябрь 2017 - 20:22

это сделано на базе самостоятельной подготовки
Так и есть

это предел возможностей
А это ошибка - благодаря подсказкам профи я надолго обеспечен работой по улучшению и модернизации. До совершенства ещё ох как далеко.

 

Придётся скопировать, с вашего разрешения,  часть кода
На здоровье, если бы прятал - не давал бы ссылку

 

Если будете делать вывод аудио плееров через список, то можно подобрать такую ширину элементов списка, чтоб кнопка "скачать" выходила за её пределы. Соответственно если этим элементам списка присвоить css-свойство overflow-x:hidden, то кнопки скачать не будет видно  ;)


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#10 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 198 сообщений
  • Репутация: 9

Отправлено 01 Ноябрь 2017 - 21:01

Спасибо на добром слове и совете. Учту обязательно. 


  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85

Оформление форума – IPBSkins.ru