Embed code что это
Как встроить видео
Загруженные видео можно разместить на любом сайте или в блоге. Для этого нужно получить код вставки в интерфейсе Видеохостинга или через API.
Код вставки можно получить с помощью такого запроса:
Код вставки содержит iframe-контейнер, в котором отображается плеер с указанным видео. Разместите код вставки на нужной веб-странице. Вы можете настроить размер видео и параметры запуска плеера. Встроенное видео заработает в течение 30 минут.
Как настроить размер видео
Параметры запуска плеера
Список параметров и их значений приведен в таблице ниже. Если параметры не указаны, плеер загрузится с параметрами по умолчанию.
Значение по умолчанию — 0.
Громкость звука в процентах при загрузке плеера.
Может принимать значения от 0 до 100 включительно.
Значение по умолчанию — 0.
При autoplay=1 параметр preload игнорируется.
Останавливать воспроизведение видео при уходе из зоны видимости и начинать воспроизведение при нахождении в ней. Параметр влияет на показ как видеоконтента, так и рекламных роликов. Он может принимать значения:
Префикс для postMessage-сообщений от плеера.
Значение по умолчанию — 0.
Громкость звука в процентах при загрузке плеера.
Может принимать значения от 0 до 100 включительно.
Значение по умолчанию — 0.
При autoplay=1 параметр preload игнорируется.
Останавливать воспроизведение видео при уходе из зоны видимости и начинать воспроизведение при нахождении в ней. Параметр влияет на показ как видеоконтента, так и рекламных роликов. Он может принимать значения:
Префикс для postMessage-сообщений от плеера.
HTML5 Video — от А до Я
Пишем код
video >
source src =»movie.mp4″ type =’video/mp4; codecs=»avc1.42E01E, mp4a.40.2″‘ />
source src =»movie.webm» type =’video/webm; codecs=»vp8, vorbis»‘ />
video > >
Само собой есть и более простой вариант вставки видео:
Остается надеется, что в ближайшем будущем для всех браузеров будет достаточно именно такого варианта.
Если же вы работает с Google App Engine, то для каждого видео формата в файл app.yaml вам надо добавить запись вида:
— url: /(.*\.ogv)
static_files: videos_folder/\1
mime_type: video/ogg
upload: videos_folder/(.*\.ogv)
И еще одна очень важная вещь, о которой стоит упомянуть. Надо указывать значения параметра type в тэге source, для того чтобы браузер автоматически смог распознать нужный формат и подгрузить именно его, что позволит увеличить производительность.
Форматы видео
На момент написания статьи (август 2010) наиболее правильным и полным кодом, для вставки видео является следующий:
Буря восторга пронеслась по интернету, когда вышел новый IE 9. Однако пока есть счастливые обладатели IE 6, приходиться изощряться. Пара возможных решений.
Chrome Frame
Преимущество использования плагина Chrome Frame состоит в том, что его можно поставить один раз, а все новые фишки HTML, JavaScript и CSS будут обязательно поддерживаться без какого-либо обновления. Этот плагин является спасением для веб-разработчиков, которые не будут заморачиваться и тратить время на написание IE-совместимой версии сайта. (Немного спорное заявление, особенно если вспомнить какой шум был в сети, когда вышел этот плагин.)
Назад к Flash
Шифруемся, или надо перекодировать видео
Плюшки
Так как видео мы встраиваем полноценным html способом, то значит мы можем использовать всю мощь веба для наших целей. Ниже опишу в чем это мощь состоит. (К сожалению опять без наглядных примеров, так что идем на сайт оригинала)
Video + HTML
Для начала, мы можем использовать различные HTML атрибуты. К примеру, параметр tabindex позволит задать положение. Есть пара параметров, которые есть и в аудио, это loop и autoplay. В параметре poster можно указать картинку, которая будет отображаться во время загрузки видео. Указав controls мы скажем браузеру — «Используй нативные контролы, мы тут ничего не придумали». Ну и еще есть preload, который позволяет подгружать видео фоном. В итоге получаем нечто подобное:
video poster =»star.png» autoplay loop controls tabindex =»0″ >
source src =»movie.webm» type =’video/webm; codecs=»vp8, vorbis»‘ />
source src =»movie.ogv» type =’video/ogg; codecs=»theora, vorbis»‘ />
video >
video poster =»star.png» autoplay =»autoplay» loop =»loop» controls =»controls» tabindex =»0″ >
source src =»movie.webm» type =’video/webm; codecs=»vp8, vorbis»‘ />
source src =»movie.ogv» type =’video/ogg; codecs=»theora, vorbis»‘ />
video >
Video + JS
Тэг video обладает рядом параметров, управлять которыми можно с помощью яваскрипта. Пример можно увидеть на сайте W3.
Для начала, как и любой html компонент, видео реагирует на все стандартные события, как например наведение мыши, перетаскивание и так далее. Но помимо них оно обладает рядом собственных, позволяющих определить, когда видео было запущено, остановлено и прочее. Уже с момента загрузки видео мы можем использовать целый ряд событий, связанных как с работой по сети (loadstart, progress, suspend, abort, error, emptied, stalled), так и с буферизацией (loadedmetadata, loadeddata, waiting, playing, canplay, canplaythrough). Простой пример, показывающий как можно настроить воспроизведение видео в тот момент, когда оно готово к проигрыванию:
В сети выложена уже появились уже и кастомные настройки, позволяющие управлять например скоростью воспроизведения или добавлять взаимодействие между 2 видео.
Video + CSS
Тут практически без комментариев — видео как элемент веб-страницы воспринимает всевозможные css штуки — начиная от border, opacity и заканчивая masks, gradients, transforms, transitions и animations. Тут все уже зависит исключительно от вашей фантазии.
Video + canvas
HTML5 принес в этом мир еще одну мощную вещь — canvas. И что же мешает нам использовать два этих нововведения вместе? Правильно — ничего.
Пример совместного использования canvas и video может быть следующим — получение скриншотов из проигрываемого видео. У canvas есть метод drawImage, позволяющий получать видео из 3х источников: из изображения как такового, из другого canvas и из video! А с помощью другого метода — toDataURL мы уже экспортируем изображение в нужно нам формате. Следующий листинг показывает как снимать скриншоты из видео каждые 1,5 секунды:
Я думаю люди с богатой фантазией уже представили, что можно тут придумать. Для них и все кого интересует возможность получения фреймов видео есть интересная вещь — WebGL.
Video + SVG
SVG предоставляет нам возможность программного управления отображения векторной графики. Но помимо этого есть такая замечательная штука как SVG filter effects. С помощью этих фильтров можно накладывать определенные эффекты на отдельные элементы веб-страницы. Выглядит это примерно таким образом:
svg id =’image’ version =»1.1″ xmlns =»http://www.w3.org/2000/svg» >
defs >
filter id =»myblur» >
feGaussianBlur stdDeviation =»1″ />
filter >
defs >
svg >
style >
video < filter:url(#myblur); border: 2px solid red; >
style >
Подобный inline-вариант обработки работает в Firefox 4 и IE9, для остальных браузеров уже необходим яваскрипт и css.
Заключение
Без сомнения уже многие сумели оценить плюсы от нового html компонента. В интернете (и на хабре — прим. пер.) выложена уже масса примеров (1, 2, 3, 4, 5, 6)
Радует то, что на достигнутом никто не собирается останавливаться и возможно в будущем нас ждет возможность работы с микрофоном и камерой и поддержка вещания.
oEmbed. Делаешь веб-сервис? — Делай и oEmbed
Конечно вы видели этот эффект, когда вставляешь в фейсбуке или вконтакте ссылку, и в посте тут же начинает подгружаться какой-то контент с сайта, на который ведет ссылка. И я видел, но даже не представлял, насколько это легко можно сделать с oEmbed’ом.
oEmbed.com — впринципе, на этом можно было бы и закончить читать тем, кто хочет провести самостоятельное мини-исследование.
Немного теории
oEmbed — открытый формат, созданный с целью упрощения внедрения содержимого одной веб-страницы в другую. В роли контента могут выступать фотографии, видеоролики, ссылки или другие типы данных. Проще говоря, использование oembed позволяет получить embeded-контент (например, видео с ютуба), когда пользователь постит обычную ссылку на него на вашем ресурсе.
Обмен информацией, с точки зрения oEmbed, происходит между поставщиком и потребителем. Потребитель желает показать встроенное представление стороннего ресурса на своем собственном сайте, например, это может быть фото с flickr или видео c youtube/vimeo. Поставщик реализует oEmbed API для обеспечения доставки этого контента потребителю.
Запрос пользователя — обычный GET запрос, должен включать url и несколько необязательных параметров, например максимальную ширину, высоту, формат (JSON, XML, etc.)
Например, чтобы заембедить видео с ютуба, мы его будем запрашивать следующим образом:
В ответе, который мы получим JSON, который содержит информацию о видео, а также embed-html.
А ведь с таким же успехом мы могли получать API ключи, авторизоваться, делать запрос на поиск ролика, получать данные и самостоятельно формировать object и вставлять его.
Дальше больше. Первый же запрос в гугле о jquery-плагине привел меня на http://code.google.com/p/jquery-oembed/. Причем доступные примеры объясняют, как использовать плагин по полной. Написан он достаточно просто, и если случилось так, что вы не обнаружили там нужный вам ресурс, дописать его реализацию будет совсем не сложно.
Немного практики
На сайте Best Youtube Lyrics, который cделали ребята из Zengile, можно добавлять клипы с ютуба, дополняя их словами песен, или же например искать клип по словам песни. Т.е. главная бизнес-логическая штука — добавление видео. Я просто решил применить oEmbed, чтобы показывать видео, которое будет прикреплено.
В haml-вьюхе я дописал одну строчку с дивом, в котором будет отображаться видео
В подключаемый js-файл дописал одну функцию. Вот и все:
Вот такой вот результат:
Посмотреть как это работает и добавить свой клип и слова можно здесь.
Мораль
Вы потребитель: вы делаете какой-то социальный ресурс, так почему бы вам не позаботиться о ваших пользователях и не заставлять их копировать html-embed-код для того, чтобы их видео/фото опубликовалось на вашем ресурсе. Тем более что часто html-теги отсекаются, а вставлять iframe’ы пользователям не разрешается, мотивируя безопасностью.
Вы поставщик: вы создали ресурс, на котором есть интересный контент (какая-нибудь имедж-борда или просто ресурс-паразит поверх социальной сети, как instagram). Реализуйте у себя oembed API, и тогда вас будет проще интегрировать в другие сайты, количество обращений к вашему ресурсу увеличится. Инвестиционные деньги потекут рекой.
UPD Материал подготовлен для группы Code-n-coffee, которая проводит IT мероприятия в С-Пб. Цель этих встреч не только обменяться знаниями, но и познакомить разработчиков друг с другом, сформировать коммьюнити и developer culture. Мы хорошие. Это бесплатно. Присоединяйтесь.
| Предпосылки: | Базовая компьютерная грамотность, установка базового программного обеспечения, базовые знания работы с файлами, знакомство с основами HTML (как описано в разделе Начало работы с HTML) и предыдущими статьями в этом модуле. |
|---|---|
| Задача: | Узнать, как встраивать элементы в веб-страницы, используя (en-US), и (en-US), например, флеш-ролики и другие веб-страницы |
Краткая история внедрения
Урок истории закончен, давайте двигаться дальше и посмотрим, как использовать некоторые из них.
Активное обучение: использование классического внедрения
В этой статье мы собираемся перейти прямо в раздел активного обучения, чтобы сразу дать вам реальное представление о том, для чего используются технологии внедрения. Нам очень хорошо знаком Youtube, но многие не знают о некоторых доступных для него средствах совместного доступа. Давайте посмотрим, как Youtube позволяет нам встраивать видео на любую страницу, которая нам нравится, используя (en-US).
Дополнительно вы также можете попробовать внедрить карту Google следующим образом:
Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки «Сброс». Если вы действительно застряли, нажмите кнопку «Показать решение», чтобы увидеть ответ.
Подробно об Iframes
Этот пример включает основы, необходимые для использования :
Примечание: Чтобы повысить скорость загрузки, рекомендуется установить атрибут src в элементе iframe с помощью JavaScript после того, как основное содержимое будет загружено. Это ускорит вашу страницу и уменьшит время загрузки официальной страницы (важный показатель SEO.)
Проблемы безопасности
Clickjacking – это один из видов обычной атаки iframe, когда хакеры внедряют невидимый iframe в ваш документ (или внедряют ваш документ на свой собственный вредоносный веб-сайт) и используют его для захвата взаимодействия пользователей. Это обычный способ ввести пользователей в заблуждение или украсть конфиденциальные данные.
Используйте только при необходимости
Если контент лицензирован, вы должны соблюдать условия лицензии. Например, контент на MDN лицензирован на licensed under CC-BY-SA. Это означает, что вы должны относиться к нам с уважением, когда цитируете наш контент, даже если внесли в него существенные изменения.
Используйте HTTPS
HTTPS это зашифрованная версия HTTP. Вы должны обслуживать свои веб-сайты, используя HTTPS, всегда, когда это возможно :
Примечание: Github pages позволяют предоставлять контент через HTTPS по умолчанию, поэтому это полезно для размещения контента. Если вы используете другой хостинг и не уверены, спросите хостинг-провайдера об этом.
Всегда используйте атрибут sandbox
Вы хотите дать хакерам как можно меньше возможностей, чтобы делать плохие вещи на вашем веб-сайте, поэтому вы должны позволять копипастить встроенный контент только с разрешений, необходимых для выполнения этого действия. Конечно, это относится и к вашему собственному контенту. Контейнер для кода, в котором он может использоваться надлежащим образом или для тестирования, но не может нанести вред остальной части кодовой базы (случайной или злонамеренной), называется sandbox.
Контент, не ограниченный sandbox, может сделать слишком многое (выполнение JavaScript, отправка форм, всплывающие окна и т. д.). По умолчанию включайте все возможные ограничения, используя атрибут sandbox без параметров, как показано в предыдущем примере.
Примечание. «Песочница» не обеспечивает защиту, если злоумышленники могут обманывать людей через прямое посещение вредоносного контента (вне iframe). Если есть вероятность, что определённый контент может быть вредоносным (например, созданный пользователями контент), пожалуйста, используйте его из другого domain на ваш основной сайт.
Настройка директив CSP
Примечание: вы можете прочитать пост Фредерика Брауна On the X-Frame-Options Security Header для более детальной информации по теме. Разумеется, объяснение в этой статье далеко не полное.
_и_ «>_и_ » title=»Permalink to Элементы и «>Элементы и
Если вам нужно внедрить контент плагина, ниже исчерпывающая информация, которая вам понадобится: