Но все эти миниатюры в формате 3:4 (или близком к нему), хотя само видео в каком-то другом формате. Затем вверху и внизу изображения видны только черные горизонтальные полосы.
Мне нужно изображение в формате 9:16 (это мой формат видео) без черных полос. Это возможно восстановить?
Обновить
Похоже, что само видео на Youtube также имеет черные полосы сверху и снизу, хотя на видео на странице Youtube нет черных полос.
Любые способы просто показать как миниатюру, так и видео в правильном формате?
Спрашивающий хочет удалить черные верхние и нижние полосы. Лучшие ответы здесь - отрегулировать высоту и "скрыть" черные полосы путем ручной коррекции. Некоторые из приведенных ниже комментариев также предполагают это. Значит ли это, что этого невозможно избежать?
Одно из решений, которое я могу придумать, это сделать миниатюры в формате 9:16 и загрузить их отдельно. Хотя это может быть непрактичной работой. tuxnani 28.03.2013
Да, конечно :) Но не самый удобный для пользователя способ добавления своего видео. Steeven 28.03.2013
Можете ли вы подумать об изменении размера изображения, чтобы оно соответствовало требованиям? Отдельный кеш изображений? tuxnani 28.03.2013
@tuxnani: я не знаю, что вы подразумеваете под кэшем изображений ... Но размер изображения нельзя просто изменить. Если бы я пошел по этому пути, то обрезка была бы необходима. Steeven 28.03.2013
@Steeven Вы упомянули удобство для пользователя, вы делаете что-то для многопользовательского сайта? Сайт-блог? Не могли бы вы уточнить, что вам нужно сделать, я могу придумать один или два способа сделать это. Adam Brown 28.03.2013
@АдамБраун. Пользователь вставляет URL-адрес видео на YouTube в текстовое поле и сохраняет его в базе данных. Из этого URL-адреса я получаю идентификатор видео. Затем я использую этот идентификатор для ссылки типа http://img.youtube.com/vi/<video-id>/hqdefault.jpg, чтобы показать начальное изображение для видео. Моя точка зрения выше заключается в том, что я не хочу, чтобы пользователь создавал и загружал начальное изображение. Steeven 30.03.2013
Тег со значением атрибута yt:name, равным mqdefault, идентифицирует миниатюру изображения размером 320x180 (16:9). Это изображение также не имеет метки времени и может быть взято из любой точки видео.
Таким образом, есть изображение, доступное для каждого разрешения видео (по крайней мере, которое я тестировал) в формате 16:9. Конечно, это не самое большое изображение на планете...
Если размер является проблемой, и вам нужно что-то большее, то лучший вариант - выбрать один из доступных вариантов, который всегда в соотношении 4:3, и скрыть лишнее с помощью CSS. YouTube уже давно делает это . Теперь они используют несколько размеров эскизов на своем сайте, включая mqdefault.jpg.
Очень легко скрыть лишнюю ширину и/или высоту изображения, когда известны все размеры. Вот пример использования изображения 4:3 с YouTube со скрытыми черными полосами, что дает результат 16:9. CSS прокомментирован для вашего удовольствия.
Ответ 2 · рейтинг 17 · TheCarver
YouTube предлагает изображения без черных полос с соотношением сторон 4:3. Чтобы получить миниатюру видео 16:9 без черных полос, попробуйте один из следующих способов:
Первый mqdefault представляет собой изображение размером 320x180 пикселей.
Второй maxresdefault представляет собой изображение размером 1500x900 пикселей, поэтому его размер необходимо изменить для использования в качестве эскиза. Это красивое изображение, но оно не всегда доступно. Если видео имеет низкое качество (менее 720p, я думаю, не совсем уверен), то это "maxresdefault" становится недоступным. Так что никогда не полагайтесь на это.
Ответ 3 · рейтинг 1 · dekiss
После некоторого поиска в сети решения этой проблемы я ничего не нашел, я думаю, что перепробовал все, и ничто не решило мою проблему. Затем, руководствуясь своей логикой, я просто обернул iframe встроенного видео YouTube в один набор div overflow: hidden; к этому div и сделал его высоту на 2 пикселя меньше, чем высота iframe (на моем видео внизу была черная рамка). Таким образом, div-оболочка меньше, чем iframe, и, расположив его над видео, вы можете скрыть ненужные черные границы. Я думаю, что это лучшее решение из всего, что я пробовал до сих пор.
В этом примере ниже попробуйте встроить только iframe, и вы увидите маленькую черную рамку внизу, а когда вы поместите iframe в div, граница исчезнет, потому что div перекрывает iframe и меньше, чем видео, и это имеет переполнение: скрыто, поэтому все, что выходит за пределы размеров div, скрыто.
В моем случае граница была высотой около 2 пикселей, поэтому я сделал оболочку div на 2 пикселя меньше по высоте, чтобы скрыть границу, в вашем сценарии, если граница находится вверху видео или по бокам и/или с разными размерами, вы нужно сделать разные размеры для div-оболочки и расположить его так, чтобы он перекрывал видео там, где есть границы, и с переполнением: скрыто; границы скрыты.
