Програвання відео з допомогою технічної магії

[ukurainajin]

Інколи у людей виникають труднощі із вбудовуванням відео до своїх дописів. Щось не клеїться із редактором, щось є незрозумілим… Ця пам'ятка розповість, як це зробити у жорсткий спосіб, тобто використовуючи HTML-форматування.
Спочатку в редакторі треба перемкнутися на панель, де можна вводити код (теґи) HTML. На малюнку цю вкладку позначено цифрою 1.
Будь-який вбудований програвач відео з таких сайтів, як YouTube, FB, Vimeo є теґом <iframe> з певними параметрами: джерело програвача, розміри тощо. Зразки таких теґів для YouTube і FB позначено на малюнку цифрами 2 і 3 відповідно. Зазвичай на самих сайтах через меню програвача можна отримати код для вбудовування (embed) відповідного ролика. І той текст із теґом <iframe>, що воно надає, треба скопіювати і вставити в панелі HTML-редактора, як показано на малюнку. Але не всім і не завжди зручно саме так. Отримувати код для програвача FB, наприклад, ще те задоволення! Тому заради полегшення життя можна зберегти собі відповідні заготовки і використовувати їх, змінюючи в них лише вказівник на відеоролик.


З YouTube усе досить просто. Ось заготовка для нього:

<iframe src="//www.youtube.com/embed/ID_HERE" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen" data-link="//youtube.com/watch?v=ID_HERE" target="_blank"></iframe>

У ній у двох місцях замість ID_HERE треба вставити унікальний ідентифікатор ролика. Ідентифікатор зазначено на самому сайті в адресному рядку.

На цьому малюнку його виділено, він починається після символів v= і йде до кінця адреси, якщо там більше нема параметрів, або до наступного символу &, як у цьому прикладі. Отже, потрібний нам звідти ідентифікатор — WEP0imLkBl4. Вставляємо його в заготовку у відповідних місцях і отримуємо програвач для цього відео.

"xxxHolic - Ending 2 - Kagerou" (Watch on YouTube)

Чесно кажучи, у разі YouTube можна й не заморочуватися із заготовкою без особливої потреби, бо там досить легко взяти готовий код: відкрити правою кнопкою меню і обрати пункт «Скопіювати код вставки» (він одразу потрапляє до буфера обміну). Хоч і відрізнятиметься трохи від мого, але щастю не завадить.

З FB майже те саме, але трохи мудруватіше. Заготовка для програвача отака:

<iframe src="//www.facebook.com/plugins/video.php?href=VIDEO_URL_HERE&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true"></iframe>

Утім, тут використовується не самий лише ідентифікатор відео, а повна адреса (з назвою журналу тощо), яку треба вставити замість VIDEO_URL_HERE і дещо в ній змінити. Зі сторінки FB, де показують це відео, копіюємо повну адресу, як на малюнку:

Таке саме посилання можна скопіювати, якщо відкрити меню на програвачі правою кнопкою миші і обрати пункт «Показати посилання на відео».
Клопіт полягає у тому, що для використання у вбудованому програвачі у цій адресі треба замінити усі слеші / на шістнадцяткову комбінацію %2F, а двокрапку : на комбінацію %3A, щоби в результаті ця адреса виглядала якось так: https%3A%2F%2Fwww.facebook.com%2FFaunOfficial%2Fvideos%2F10153765946501546%2F
Тепер її можна вставити в заготовку замість VIDEO_URL_HERE, і програвач готовий:

Параметри width="560" height="315" у заготовках мають бути зрозумілими. Це ширина і висота програвача в пікселях. Інколи їх треба змінювати, наприклад, щоби широкоформатне відео виглядало краще або просто щоби отримати програвач іншого розміру. Та зазвичай вказані значення для мене є оптимальними.
Як копіюватимете заготовки та вставлятимете в них потрібні значення, будьте уважні, щоби нічого не пропустити і нічого зайвого не видалити, бо через брак будь-яких лапок або інших службових символів не працюватиме, це типова помилка.

Comments

[tranquiler]

Уй... "xxxHolic" я колись дивився. Але вже забув, про що там. Кліп від FAUN классний. Щодо самого поста, він потрібний, але я ембедом користатись вмію)) Це згодиться меньш технічно-освіченим френдам. А я музику слухаю))

[ukurainajin]

«забув, про що там»
Хлопець, Ватанукі, якого переслідували духи, раптом потрапив до маленької крамнички, яку ніхто не бачить. То крамничка, де виконують бажання за відповідну платню… яка має бути сумірною з бажаним. Іноді це навіть виходить боком клієнтам, які не розуміють, чого прагнуть. За те, щоби позбавитися духів, Ватанукі у якості платні погоджуєтся поратися по хазяйству у крамничці і допомагати у справах. Ось так він влився у дружній колектив на чолі з хазяйкою Юкі — Відьмою вимірів, отими загадковими дівчатками, що, начебто, не мають душі, і кроликоподібною істотою Моконою. А далі комедія, драма, пригоди, містика і філософія у одному флаконі. Одна з найулюбленіших речей для нас із дружиною.

[ukurainajin]

«Кліп від FAUN»
Я так розумію, що це звичний для них формат короткого кліпа-тізера зі скороченою версією пісні для промоції альбому.

wbem

[toplinden]

A osj tak wemb stawyty:

<video width="{tcyslo}" height="{tcyslo}" controls="" name="media">
  <source src="{link}.webm" type="video/webm">
</video>

W widpysax jyx ne stawyty, bo obmegenje, a tak pryklad tut:

<video width="560" height="315" controls="" name="media">
  <source 
    src="https://files.catbox.moe/vp330n.webm" 
    type="video/webm">
</video>

Re: wbem

[ukurainajin]

То це вже фішки html5, стандартний html-програвач відео. У джерелі, певно, треба вказувати посилання безпосередньо на відеофайл/потік. Я не бачу теґа video серед підтримуваних DW. Ви пробували, це працює?

UPD: А, вже побачив, що працює. Просто не оновили доку. iframe теж не задокументовано.

Re: wbem

[ukurainajin]

«Рухавкою» ви називаєте movie? А «відпис» — це коментар?

Re: wbem

[toplinden]

Tak, xotca <ruxawka> ctce oznatcala <anime> (latynjsjkyj korinj oznatcaje desj te same), ctco zaraz se <ruxrys>. Koly ctco, dlja fizytcnyx spraw – <ruxanka>.

Widpys — se pysjmowyj komentar, tak.

[hors_bor]

О, якраз коли робив свій останній допис в мене була виникла проблема з вставлянням відео. Але мені допомогла кнопочка "розмістити допис в ЖЖ" я скопіював код і вставив його в свій блог.

[ukurainajin]

Супер! Це значить, що ви собі уявляєте сам механізм і потребуєте лише деталей.