Удобный блоггинг для начинающих #7

3,145 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,145
On SlideShare
0
From Embeds
0
Number of Embeds
2,140
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Удобный блоггинг для начинающих #7

  1. 1. Удобный блоггинг для начинающих(Урок 7)<br />VDas.livejournal.com © 2009 presents<br />Вставляем аудио и видео<br />
  2. 2. Как вставить аудио и видео<br />Ну, во-первых, не будем заморачиваться умными словами «новые тэги html5» и прочими<br />Во-вторых, рассмотрим пару самых широко распространённых вариантов<br />В третьих, поймём, что всё просто <br />
  3. 3. Что такое видео в вашей страничке?<br />Видео – это фильм или клип. Просто сам по себе это файл. Он есть, мы можем его скачать и посмотреть у себя на компьютере через любой плейер.<br />Но для того, чтобы показать этот самый файл на вашей странице в ЖЖ (или большинстве других сетей) – тоже нужен плейер.<br />
  4. 4. Плейер на страничке<br />Мы не знаем какие плейеры установлены у других пользователей компьютеров. Поэтому пока проблема решается просто: <br />Вы свой фильм или клип или видеоролик заливаете на какой-нибудь сервис, который имеет свой собственный плейер и умеет проигрывать видео. Например youtube…<br />
  5. 5. Как самим заливать видео?<br />В принципе это очень просто, но мало кому надо. Поэтому сделаю отдельный урок по запросу. <br />Сейчас научимся вставлять в свой блог чье-то чужое, уже выложенное на сервисе видео.<br />Если непонятно – просто читайте дальше.<br />
  6. 6. Что такое видео с точки зрения html<br />Это просто указание «встроить» в страничку плейер, в который уже вложено указание какое видео ему играть. В общем случае код выглядит вот так (пример с youtube):<br />&lt;object width=&quot;560&quot; height=&quot;340&quot;&gt;&lt;paramname=&quot;movie&quot; value=&quot;http://www.youtube.com/v/VgmXrARr6aI&hl=en_US&fs=1&&quot;&gt;&lt;/param&gt;&lt;paramname=&quot;allowFullScreen&quot; value=&quot;true&quot;&gt;&lt;/param&gt;&lt;paramname=&quot;allowscriptaccess&quot; value=&quot;always&quot;&gt;&lt;/param&gt;&lt;embedsrc=&quot;http://www.youtube.com/v/VgmXrARr6aI&hl=en_US&fs=1&&quot; type=&quot;application/x-shockwave-flash&quot;allowscriptaccess=&quot;always&quot; allowfullscreen=&quot;true&quot; width=&quot;560&quot; height=&quot;340&quot;&gt;&lt;/embed&gt;&lt;/object&gt;<br />
  7. 7. Что за код? (ничего запоминать не надо!)<br />&lt;objectwidth=&quot;560&quot; height=&quot;340&quot;&gt;&lt;paramname=&quot;movie&quot; value=&quot;http://www.youtube.com/v/VgmXrARr6aI&hl=en_US&fs=1&&quot;&gt;&lt;/param&gt;&lt;paramname=&quot;allowFullScreen&quot; value=&quot;true&quot;&gt;&lt;/param&gt;&lt;paramname=&quot;allowscriptaccess&quot; value=&quot;always&quot;&gt;&lt;/param&gt;&lt;embedsrc=&quot;http://www.youtube.com/v/VgmXrARr6aI&hl=en_US&fs=1&&quot; type=&quot;application/x-shockwave-flash&quot;allowscriptaccess=&quot;always&quot; allowfullscreen=&quot;true&quot; width=&quot;560&quot; height=&quot;340&quot;&gt;&lt;/embed&gt;&lt;/object&gt;<br />Объект плейера<br />Какого размера на странице<br />Что играть (какой фильм)<br />Для … других бровзеров, копия<br />Остальное просто дополнительный параметры… Разрешить ли открывать на весь экран и т.д.<br />
  8. 8. Зачем всё это было написано<br />Да вообщем-то“низачем”. Просто чтобы вы на глаз могли легко найти ссылку на видео…<br />Т.е. около понравившегося видео ищите слова object, embed, share,link, код, ссылка<br />Большего вам знать и разбираться в этих всех кодах не потребуется. Как правило большинство сервисов (плееров) дают готовый код для вставки в блог.<br />
  9. 9. Итак смотрим ролик на youtube<br />
  10. 10. Ролик на youtube<br />Сразу видим знакомое слово embed (встроить) и код, с уже знакомыми словами &lt;object&gt; …<br />Для большинства блогов достаточно просто скопировать полностью всю эту строку в тело нового поста и мы увидим в блоге видео ролик… <br />Обратите внимание, что надо копировать ВСЮ строку… Чтобы в ней, как минимум, в конце было закрытие начального object - &lt;/object&gt;<br />
  11. 11. В жж?<br />В жж то же самое, только в начале и конце РЕКОМЕНДУЕТСЯ добавить тэги <br />&lt;lj-embed&gt;&lt;/lj-embed&gt;<br />Т.е. тот код со страницы youtubeпревратится в:<br />&lt;lj-embed&gt;&lt;object width=&quot;560&quot; height=&quot;340&quot;&gt;&lt;paramname=&quot;movie&quot; value=&quot;http://www.youtube.com/v/VgmXrARr6aI&hl=en_US&fs=1&&quot;&gt;&lt;/param&gt;&lt;paramname=&quot;allowFullScreen&quot; value=&quot;true&quot;&gt;&lt;/param&gt;&lt;paramname=&quot;allowscriptaccess&quot; value=&quot;always&quot;&gt;&lt;/param&gt;&lt;embedsrc=&quot;http://www.youtube.com/v/VgmXrARr6aI&hl=en_US&fs=1&&quot; type=&quot;application/x-shockwave-flash&quot;allowscriptaccess=&quot;always&quot; allowfullscreen=&quot;true&quot; width=&quot;560&quot; height=&quot;340&quot;&gt;&lt;/embed&gt;&lt;/object&gt;&lt;/lj-embed&gt;<br />
  12. 12. И как это в посте?<br />
  13. 13. И после опубликования<br />
  14. 14. Теперь допустим вы нашли ролик в ленте<br />Обратите внимание на вот эту кнопочку внизу ролика: <br />
  15. 15. Увидели знауомые слова? <br />Копируем эту строку ЦЕЛИКОМ! И выкладываем у себя в посте… (не забывая добавить &lt;lj-embed&gt;…&lt;/lj-embed&gt;<br />И всё…<br />
  16. 16. Попробуем то-же на rutube<br />
  17. 17. Ссылка и код<br />Заметили знакомые слова? Копируем и наслаждаемся <br />
  18. 18. Надеюсь суть ясна…<br />Теперь что с аудио… Да то же самое!<br />Нужен какой-то плейер, который позволяет вставлять себя в страницы…<br />
  19. 19. Например сервис http://audme.ru/<br />Заходим, регистрируемся…<br />
  20. 20. Нашли песню… смотрим…<br />
  21. 21. Нашли знакомые слова?<br />Вставляем и наслаждаемся…<br />&lt;lj-embed&gt;&lt;object width=&quot;290&quot; height=&quot;24&quot;&gt;&lt;paramname=&quot;movie&quot; value=&quot;http://audme.ru/sharedfiles/swf/out/player3.swf&quot; /&gt;&lt;paramname=&quot;flashVars&quot; value=&quot;soundFile=http://out2.audme.ru/mp3rm/4543/21637023/92e24755bcf7/dur:185/enct:%D0%A2%D1%80%D0%B8%20%D0%BC%D1%83%D1%88%D0%BA%D0%B5%D1%82%D0%B5%D1%80%D0%B0%20%E2%80%94%20%D0%9F%D0%BE%D1%80%D0%B0-%D0%BF%D0%BE%D1%80%D0%B0%20%D0%BF%D0%BE%D1%80%D0%B0%D0%B4%D1%83%D0%B5%D0%BC%D1%81%D1%8F%20%D0%BD%D0%B0%20%D1%81%D0%B2%D0%BE%D0%B5%D0%BC%20%D0%B2%D0%B5%D0%BA%D1%83&titles=%D0%A2%D1%80%D0%B8%20%D0%BC%D1%83%D1%88%D0%BA%D0%B5%D1%82%D0%B5%D1%80%D0%B0%20%E2%80%94%20%D0%9F%D0%BE%D1%80%D0%B0-%D0%BF%D0%BE%D1%80%D0%B0%20%D0%BF%D0%BE%D1%80%D0%B0%D0%B4%D1%83%D0%B5%D0%BC%D1%81%D1%8F%20%D0%BD%D0%B0%20%D1%81%D0%B2%D0%BE%D0%B5%D0%BC%20%D0%B2%D0%B5%D0%BA%D1%83&quot; /&gt;&lt;paramname=&quot;wmode&quot; value=&quot;transparent&quot; /&gt;&lt;embedsrc=&quot;http://audme.ru/sharedfiles/swf/out/player3.swf&quot; type=&quot;application/x-shockwave-flash&quot; width=&quot;290&quot; height=&quot;24&quot; wmode=&quot;transparent&quot; flashVars=&quot;soundFile=http://out2.audme.ru/mp3rm/4543/21637023/92e24755bcf7/dur:185/enct:%D0%A2%D1%80%D0%B8%20%D0%BC%D1%83%D1%88%D0%BA%D0%B5%D1%82%D0%B5%D1%80%D0%B0%20%E2%80%94%20%D0%9F%D0%BE%D1%80%D0%B0-%D0%BF%D0%BE%D1%80%D0%B0%20%D0%BF%D0%BE%D1%80%D0%B0%D0%B4%D1%83%D0%B5%D0%BC%D1%81%D1%8F%20%D0%BD%D0%B0%20%D1%81%D0%B2%D0%BE%D0%B5%D0%BC%20%D0%B2%D0%B5%D0%BA%D1%83&titles=%D0%A2%D1%80%D0%B8%20%D0%BC%D1%83%D1%88%D0%BA%D0%B5%D1%82%D0%B5%D1%80%D0%B0%20%E2%80%94%20%D0%9F%D0%BE%D1%80%D0%B0-%D0%BF%D0%BE%D1%80%D0%B0%20%D0%BF%D0%BE%D1%80%D0%B0%D0%B4%D1%83%D0%B5%D0%BC%D1%81%D1%8F%20%D0%BD%D0%B0%20%D1%81%D0%B2%D0%BE%D0%B5%D0%BC%20%D0%B2%D0%B5%D0%BA%D1%83&quot; /&gt;&lt;/object&gt; &lt;/lj-embed&gt;<br />
  22. 22. В следующем уроке<br />Как выложить СВОЙ видеоролик или песню…<br />Не знаю… Пишите о чём вам интересно…<br />Ваши предложения…<br />Здесь могла бы быть реклама того, кто предоставит какой- нибудь приз читателям этого блога…<br />

×