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


Пользователь месяца
Андрей WPMasterKZ Андрей WPMasterKZ 1-й за Ноябрь
Очков активности: 888 1 тема, 71 сообщение, 8 баллов репутации
Сайт: wpmaster.kz
ТОП самых активных за этот месяц
  • Фотография OlgaGetman
    #1

    OlgaGetman
    Очков активности: 666 5 тем, 96 сообщений, 4 балла репутации

  • Фотография Mandarin
    #2

    Mandarin
    Очков активности: 552 3 темы, 83 сообщения, 4 балла репутации

  • Фотография TimurR
    #3

    TimurR
    Очков активности: 150 Вне конкурса за определение пользователя месяца

  • Фотография Андрей WPMasterKZ
    #4

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 117 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #5

    BLIK
    Очков активности: 102 0 тем, 17 сообщений, 4 балла репутации

  • Фотография Rodiola
    #6

    Rodiola
    Очков активности: 48 1 тема, 13 сообщений, 2 балла репутации

  • Фотография WGN
    #7

    WGN (worldgamenews.com)
    Очков активности: 36 Вне конкурса за определение пользователя месяца

  • Фотография thisismyname
    #8

    thisismyname
    Очков активности: 27 4 темы, 6 сообщений, 1 балл репутации

  • Фотография pozitron123
    #9

    pozitron123
    Очков активности: 24 2 темы, 10 сообщений, 1 балл репутации

  • Фотография m3Re
    #10

    m3Re
    Очков активности: 22.5 2 темы, 9 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 29.11.2018
  • Яндекс выдача: 11.12.2018
Топ 5 участников по репутации


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

#1 master-vek

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

Отправлено 31 October 2017 - 14:03

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

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

 

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

 

 


 

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

 

  • 0

#2 master-vek

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

Отправлено 31 October 2017 - 22:05

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


  • 0

#3 BLIK

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

Отправлено 31 October 2017 - 22:06

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

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

 

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


  • 1


#4 master-vek

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

Отправлено 01 November 2017 - 00:20

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

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

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


  • 0

#5 ShowPrint

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

Отправлено 01 November 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
  • Пользователь
  • 245 сообщений
  • Репутация: 13

Отправлено 01 November 2017 - 11:56

@ShowPrint,

 

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

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

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

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

 

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

 

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

 

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


  • 0

#7 ShowPrint

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

Отправлено 01 November 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
  • Пользователь
  • 245 сообщений
  • Репутация: 13

Отправлено 01 November 2017 - 19:48

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

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

 

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

 

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

 

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


  • 0

#9 ShowPrint

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

Отправлено 01 November 2017 - 20:22

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

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

 

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

 

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


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


#10 master-vek

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

Отправлено 01 November 2017 - 21:01

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


  • 0

#11 master-vek

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

Отправлено 04 November 2017 - 19:04

Докладываю. В первом приближении все ваши рекомендации претворил в жизнь, за исключением с вложенностью  не до конца.

Ещё раз благодарю.


  • 0

#12 ShowPrint

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

Отправлено 06 November 2017 - 21:50

@master-vek, а зачем два списка в двух разных div-ах? Они все шесть "просятся" в один список - более органично будут выглядеть. Попробую по свободе накидать код (пришлю)


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


#13 master-vek

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

Отправлено 06 November 2017 - 23:07

@ShowPrint,  Моя абстрактная фантазия не позволяет понять вашу мысль.  У них же разные условия размещения, фон и т.д. Список в самом верху и в подвале по одному стилю, а аудио в другом.    Очень интересно как с реализацией  Просто скажите на пальцах, а я постараюсь понять.   У Вас  и так забот хватает.

 

Но, ваше решение по отсечению части аудио в невидимку меня привело в восторг. Я думаю, что Вы точно помните на память все теги и атрибуты по всем HTML i CSS, причём  можете их назвать в обратном порядке не напрягая память.    


  • 0

#14 ShowPrint

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

Отправлено 06 November 2017 - 23:30

@master-vek, я только про список с аудио отзывами. У вас сейчас так:

<div>
  <ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
</div>
<div>
  <ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
</div>

а я бы сделал:

<div>
  <ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
</div>

Я думаю, что Вы точно помните на память все теги и атрибуты
Не утруждаю себя этим - это не моя профессия, поэтому мне достаточно иметь понимание сути вопроса, и умения внимательно читать справочники, коих в сети достаточное количество.

Когда выдаётся время для более-менее регулярного коддинга, то большее количество инфы в голове, когда редко получается шкодить - инфа подзабывается потихоньку.


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


#15 master-vek

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

Отправлено 06 November 2017 - 23:48

Переделал как советуете, Действительно ничего не изменилось.    Век живи, и век учись. Спасибо.

Сейчас под аудио или сверху короткую аннотацию пристраиваю.


  • 0

#16 master-vek

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

Отправлено 07 November 2017 - 02:35

Сделал аннотацию к каждому аудио в черновике и пришлось по высоте <li> раздвинуть, Тогда при таком едином списке нет просветов  между панелями аудио и аннотациями.   Что к чему относиться не понятно посетителю. Поэтому завтра перезагружу  страницу , может что подскажете. Плиз.


  • 0

#17 ShowPrint

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

Отправлено 07 November 2017 - 11:14

@master-vek, на скорую руку накидал вот здесь.

Это для понимания принципа, далее можно развивать как хочется - от "раскраски" стилями до внедрения media стилей.


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


#18 master-vek

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

Отправлено 07 November 2017 - 12:09

@ShowPrint, Ещё раз Вас благодарю.  Я примерно также сделал, но у Вас конечно красивее. Вот про это я и спрашивал.

 

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

С уважением Андрей Попов.

Кстати, приблизительно лет 55 назад, я часто гостил у своей Тётушки -  Ленинский Проспект, Метро Сокол ул. Алабяна 3 и дом 3. Мне кажется дом 68 не очень далеко от того метро. Всё помню как сейчас.


  • 0

#19 ShowPrint

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

Отправлено 07 November 2017 - 12:19

Пора материализовать свою добровольную благодарность
Это лишнее - я зарабатываю в оффлайне, направьте эти WMR на развитие своего сайта, а ещё лучше в семью  :)

Что до благодарности: "довольный форумчанин" - уже благодарность!

В форумной семье мы всегда помогаем друг-другу когда есть возможность, почему-то мне кажется что и вы не будете исключением.

Добро пожаловать!


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


#20 master-vek

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

Отправлено 07 November 2017 - 13:07

Чем могу, буду делиться Спасибо.


  • 0

robot

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


Похожие темы

  Название темы Автор Статистика Последнее сообщение

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