Вбудований видивоплеєр
Вбудований видивоплеєр
Table of Contents
- Крок за кроком
- Вбудоване відео плеєр конфигуратор
- Повний Приклад коду
- настройки
- Отримання вашого коду з відео повідомлення
- Додати код вручну
- Отримання URL відеоточкі Пошти
- Макет на робочому столі
- Макет на Mobile Web
- регулювання Мова
- Wordpress
- часто задаються
- Крок за кроком
- Вбудоване відео плеєр конфигуратор
- Повний Приклад коду
- настройки
- Отримання вашого коду з відео повідомлення
- Додати код вручну
- Отримання URL відеоточкі Пошти
- Макет на робочому столі
- Макет на Mobile Web
- регулювання Мова
- Wordpress
- часто задаються
- Крок за кроком
- Вбудоване відео плеєр конфигуратор
- Повний Приклад коду
- настройки
- Отримання вашого коду з відео повідомлення
- Додати код вручну
- Отримання URL відеоточкі Пошти
- Макет на робочому столі
- Макет на Mobile Web
- регулювання Мова
- Wordpress
- часто задаються
З вбудованим програвачем можна легко додати Facebook відео на ваш сайт. Ви можете використовувати будь-яку посаду громадського відео по сторінці або особи в якості джерела відеосигналу.
Вбудований відео-плеєр Конфігураторприклад кодуНалаштуваннядодавати його вручнуКрок за кроком
1. Виберіть URL або сторінка
Підберіть URL відеоролика, Facebook ви хочете впровадити.
2. Код конфигуратор
Вставити URL до Code Configurator і натисніть код Отримати кнопку для створення своїх вбудованого коду відеоплеєр.
3. Копія & Paste HTML фрагмент
Копіювання і повз фрагменті в HTML на веб-сайті призначення.
Повний Приклад коду
Скопіюйте та вставте приклад коду на ваш сайт. Налаштуйте даних-HREF до вашого відео URL.Контроль розміру програвача за допомогою атрибута даних ширини .
<HTML>
<HEAD>
<TITLE> Ваш сайт Назва </ назва>
</ HEAD>
<тіло>
<! - Навантаження Facebook SDK для JavaScript -->
<div id = "fb-root" ></div>
<script> ( function ( d , s , id ) {
var js , fjs = d . getElementsByTagName ( s )[ 0 ];
if ( d . getElementById ( id )) return ;
js = d . createElement ( s ); js . id = id ;
js . src = "//connect.facebook.net/en_US/sdk.js#xfbml=1" ;
fjs . parentNode . insertBefore ( js , fjs );
}( document , 'script' , 'facebook-jssdk' )); </script>
<! - Код кнопку відправки
поділитися з Just Friends </a>
<p> Як і діліться з друзями. </ P>
Повідомлення від <a HREF = "https://www.facebook.com/facebook/"> Facebook </a> на Фрайтаг, 5. Dezember 2014
</ BLOCKQUOTE>
</ DIV>
</ DIV>
</ Тіло>
</ HTML>
настройки
Конфігуратор вище, не включають в себе всі можливі настройки для вбудованого відео програвача. Ви також можете змінити наступні параметри:
| настройка | опис | дефолт |
|---|---|---|
|
даних HREF |
Абсолютна URL відео. |
н / д |
|
даних allowfullscreen |
Дайте відео для відтворення в повноекранному режимі.Може бути помилковим або істинним . |
помилковий |
|
даних автозапуску |
Автоматично відтворювати відео при завантаженні сторінки. Відео буде відтворюватися без звуку(відключений). Люди можуть включити звук за допомогою елементів управління відеоплеєр. Цей параметр не застосовується до мобільних пристроїв.Може бути помилковим або істинним . |
помилковий |
|
дані ширини |
Ширина відео контейнера. Мінімальна. 220px . |
автоматичний |
приклад конфігурації
<div class = "fb-video"
data-href = "https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
data-width = "500"
data-allowfullscreen = "true"
data-autoplay = "true" ></div>
Отримання вашого коду з відео повідомлення
1. Перейдіть до відео повідомлення
Якщо ви опублікувати громадськості відео, ви можете отримати код безпосередньо з самого відео пост.
Виберіть Вставити відео в меню параметрів:
Або при перегляді відео в повноекранному режимі виберіть Вставити відео кнопку в правому нижньому кутку:
Для сторінок тільки
При написанні загальнодоступного відео на сторінці ви можете отримати код безпосередньо з тимчасової шкалою. Натисніть на іконку, яка з'являється у верхньому правому куті записи на Facebook.
Виберіть Вставити відео з меню, що випадає: (тільки для сторінок)
2. Копіювання і вставка кодексу
Ви побачите діалогове з'являються з кодом для вбудовування відео запис в нього. Скопіюйте та вставте цей код в веб-сторінку в тому місці, де ви хочете його бачити.
Технічні подробиці див в розділі додавати його вручну
Додати код вручну
Крім кодогенератор , ви можете також вбудовувати код вручну.
1. Отримати Video Post URL
Перш за все, необхідно отримати URL з відео пост , який ви хочете поділитися. Відео запис повиннабути публічною, про що свідчить світовий сірим значком, поруч часу видавничої Пошти: 
Для тестування ви можете використовувати цю приклад URL :
"Https://www.facebook.com/FacebookDevelopers/videos/10152454700553553/"
2. Завантажте JavaScript SDK
Щоб використовувати вбудований відео-плеєр плагін, або будь-який інший соціальної плагін, необхідно додати Facebook JavaScript SDK на ваш сайт. Ви повинні завантажити SDK тільки один раз на сторінці, в ідеалі відразу після відкриття <тіло> тег:
<div id = "fb-root" ></div>
<script> ( function ( d , s , id ) {
var js , fjs = d . getElementsByTagName ( s )[ 0 ];
if ( d . getElementById ( id )) return ;
js = d . createElement ( s ); js . id = id ;
js . src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3" ;
fjs . parentNode . insertBefore ( js , fjs );
}( document , 'script' , 'facebook-jssdk' )); </script>
Ви можете знайти більш детальну довідку по реалізації JavaScript SDK в JavaScript SDK - швидкий старт .
3. Помістіть Embedded Тег Video Player
Потім помістіть вбудованого тега Video Player в будь-якому місці вашого сайту. Замінити {ваш-відео-пост-URL} з URL свої повідомлення.
<div class = "fb-video" data-href = "{your-video-post-url}"
data-allowfullscreen = "true" data-width = "500" ></div>
4. Тестування
Після того як ви виконали ці дії ви зможете перевірити свої вбудований відео-плеєр. Заповнена інтеграція буде виглядати на зразок цього:
<HTML>
<назва> Мої
відео
Результатом нашої тестової прикладу показаний на скріншоті нижче.
5. Налаштування
Слідуйте інструкціям нижче на цій сторінці, щоб відрегулювати розмір, мова та інші параметри.
Отримання URL відеоточкі Пошти
Там можуть бути ситуації, в яких ваш код для вставки створюється CMS і вам просто потрібно сирої повідомленням URL. Є два способи отримати URL поста в:
- Скопіюйте URL з постійне посилання з вашого адресному рядку браузера .
- Клацніть правою кнопкою миші Пошти час публікації і скопіювати адресу посилання.
Обидва методи, виділені червоним кольором на скріншоті нижче.
Через Graph API
Якщо ви хочете, щоб автоматично інтегрувати вбудовані відеопрогравачі на вашому сайті, ви, ймовірно, використовувати графік API агрегувати відео. Наприклад, ви можете використовуватисторінку Відео API кінцеву , який буде відправляти вам відповідь за запит до / {сторінка ідентифікатором} / відео в форматі (shortend):
{
"Дані" : [
{
"ID" : "1234567890" ,
"created_time" : "2015-02-25T23: 22: 06 + 0000" ,
"опис" : "My Video Підпис" ,
"embed_html" : "<IFRAME SRC = \ "HTTPS :? //www.facebook.com/video/embed video_id = 1234567890 \" ширина = \ "1280 \" висотою = \ "720 \" frameborder = \ "0 \"> </ IFRAME> " ,
"формат" : []
}
]
}
Щоб отримати URL даного відео:
Використовуйте ID значення для створення URL відповідно до структури:
"Https://www.facebook.com/video.php?v={id}"
Не застосовувати препарат властивість embed_html для вбудовування відео. Для отримання додаткової інформації по цій темі, будь ласка, зверніться до розділу Довідка
Макет на робочому столі
Ви можете регулювати ширину вбудований відео-плеєр на столі через даних ширини атрибута в Embedded тега Video Player, як показано в прикладі нижче. Значення має по крайней мере, 220 . Там немає меж на верхньому кінці, поки гравець ніколи не стане більше, ніж його батьківського елементу.
Не використовуйте теги стилів CSS, щоб регулювати розмір плагіна. Це може привести до помилок в індикації.
<! - НЕПРАВИЛЬНО! -->
<style type = "text/css" >
. fb - video {
width : 500px ;
}
</style>
<div class = "fb-post" data-href = "{your-video-post-url}" ></div>
<! - ПРАВИЛЬНО -->
<div class = "fb-video" data-href = "{your-video-post-url}"
data-allowfullscreen = "true" data-width = "500" ></div>
Повноекранний
Ви можете додати властивість даних allowfullscreen = "істина" , щоб дозволити відео для відтворення в повноекранному режимі.
Zurück nach obenМакет на Mobile Web
На мобільному Інтернеті, вбудоване відео плеєр автоматично масштабується для внутрішньої ширині батьківського елемента.
регулювання Мова
Можна налаштувати мови вбудованого плагіна Video Player, завантаживши локалізовану версію Facebook JavaScript SDK. При завантаженні SDK відрегулювати значення js.src використовувати локаль: Просто замінити en_US по вашій місцевості, наприклад fr_FR для французького (Франція):
JS . SRC = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.3" ;
Мови згадуються в файлі XML Facebook Locales . Ви, можливо, буде потрібно відрегулювати ширину соціальної Plugin для розміщення на різних мовах. Ви можете знайти більш детальну інформацію про нашу локалізації та перекладу сторінки.
Wordpress
Якщо ви вже використовуєте Facebook SDK для JavaScript у вашому Wordpress сайту ви можете використовувати вбудований плагін відеоплеєром, просто додавши FB-відео тег на пост:
<div class = "fb-video" data-href = "https://www.facebook.com/video.php?v=10152795258318553"
data-width = "500" data-allowfullscreen = "true" ></div>
Якщо ви не використовуєте Facebook SDK для JavaScript і вбудувати відео через копією & пасти фрагменті, який ви можете отримати від кожного відео пост, вбудованого плагін Video Player найбільш likly не зробить, як Wordpress буде перетворювати все & символів в # 038; і зламати гравця.
Замість цього використовуйте наступний код для додавання плагіна:
<script> window . fbAsyncInit = function () {
FB . init ({
xfbml : true ,
version : 'v2.3'
});
}; ( function ( d , s , id ){
var js , fjs = d . getElementsByTagName ( s )[ 0 ];
if ( d . getElementById ( id )) { return ;}
js = d . createElement ( s ); js . id = id ;
js . src = "//connect.facebook.net/en_US/sdk.js" ;
fjs . parentNode . insertBefore ( js , fjs );
}( document , 'script' , 'facebook-jssdk' )); </script>
<div class = "fb-video" data-href = "https://www.facebook.com/video.php?v=10152795258318553" data-width = "500" data-allowfullscreen = "true" ></div>
Нова, проста Wordpress інтеграція буде випущений найближчим часом.
часто задаються
Чи можу я використовувати графік API відео власності embed_html ?
Ні, ви не повинні використовувати властивість embed_html . Використання вбудованого модуля Відео гравця замість цього!
Про embed_html власності:
API Endpoint Графік відео буде служити властивість з ім'ям embed_html . Його значення буде містити HTML елемент, який може бути вбудований в веб-сторінку, щоб грати необхідний відео.
Це значення не слід плутати з Embedded плагін Video Player. Ми рекомендуємо не використовуватице властивість більше - використовувати вбудований плагін Video гравця замість цього!
Якщо ви використовуєте embed_html вартості нерухомості, ваш відеоплеєр:
- Не працює на мобільних пристроях і планшетах
- Не містять ніякої додаткової інформації, як видом, назва відео і т.д.
Приклад embed_html майна (не рекомендується):
{
"Embed_html" :
"<IFRAME
SRC = \ "HTTPS: //www.facebook.com/video/embed video_id = 1234567890 \"
Ширина = \ "1280 \"
Висота = \ "720 \"
frameborder = \ "0 \">
</ IFRAME> "
}
З вбудованим програвачем можна легко додати Facebook відео на ваш сайт. Ви можете використовувати будь-яку посаду громадського відео по сторінці або особи в якості джерела відеосигналу.
Вбудований відео-плеєр Конфігураторприклад кодуНалаштуваннядодавати його вручнуКрок за кроком
1. Виберіть URL або сторінка
Підберіть URL відеоролика, Facebook ви хочете впровадити.
2. Код конфигуратор
Вставити URL до Code Configurator і натисніть код Отримати кнопку для створення своїх вбудованого коду відеоплеєр.
3. Копія & Paste HTML фрагмент
Копіювання і повз фрагменті в HTML на веб-сайті призначення.
Повний Приклад коду
Скопіюйте та вставте приклад коду на ваш сайт. Налаштуйте даних-HREF до вашого відео URL.Контроль розміру програвача за допомогою атрибута даних ширини .
<HTML>
<HEAD>
<TITLE> Ваш сайт Назва </ назва>
</ HEAD>
<тіло>
<! - Навантаження Facebook SDK для JavaScript -->
<div id = "fb-root" ></div>
<script> ( function ( d , s , id ) {
var js , fjs = d . getElementsByTagName ( s )[ 0 ];
if ( d . getElementById ( id )) return ;
js = d . createElement ( s ); js . id = id ;
js . src = "//connect.facebook.net/en_US/sdk.js#xfbml=1" ;
fjs . parentNode . insertBefore ( js , fjs );
}( document , 'script' , 'facebook-jssdk' )); </script>
<! - Код кнопку відправки
поділитися з Just Friends </a>
<p> Як і діліться з друзями. </ P>
Повідомлення від <a HREF = "https://www.facebook.com/facebook/"> Facebook </a> на Фрайтаг, 5. Dezember 2014
</ BLOCKQUOTE>
</ DIV>
</ DIV>
</ Тіло>
</ HTML>
настройки
Конфігуратор вище, не включають в себе всі можливі настройки для вбудованого відео програвача. Ви також можете змінити наступні параметри:
| настройка | опис | дефолт |
|---|---|---|
|
даних HREF |
Абсолютна URL відео. |
н / д |
|
даних allowfullscreen |
Дайте відео для відтворення в повноекранному режимі.Може бути помилковим або істинним . |
помилковий |
|
даних автозапуску |
Автоматично відтворювати відео при завантаженні сторінки. Відео буде відтворюватися без звуку(відключений). Люди можуть включити звук за допомогою елементів управління відеоплеєр. Цей параметр не застосовується до мобільних пристроїв.Може бути помилковим або істинним . |
помилковий |
|
дані ширини |
Ширина відео контейнера. Мінімальна. 220px . |
автоматичний |
приклад конфігурації
<div class = "fb-video"
data-href = "https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
data-width = "500"
data-allowfullscreen = "true"
data-autoplay = "true" ></div>
Отримання вашого коду з відео повідомлення
1. Перейдіть до відео повідомлення
Якщо ви опублікувати громадськості відео, ви можете отримати код безпосередньо з самого відео пост.
Виберіть Вставити відео в меню параметрів:
Або при перегляді відео в повноекранному режимі виберіть Вставити відео кнопку в правому нижньому кутку:
Для сторінок тільки
При написанні загальнодоступного відео на сторінці ви можете отримати код безпосередньо з тимчасової шкалою. Натисніть на іконку, яка з'являється у верхньому правому куті записи на Facebook.
Виберіть Вставити відео з меню, що випадає: (тільки для сторінок)
2. Копіювання і вставка кодексу
Ви побачите діалогове з'являються з кодом для вбудовування відео запис в нього. Скопіюйте та вставте цей код в веб-сторінку в тому місці, де ви хочете його бачити.
Технічні подробиці див в розділі додавати його вручну
Додати код вручну
Крім кодогенератор , ви можете також вбудовувати код вручну.
1. Отримати Video Post URL
Перш за все, необхідно отримати URL з відео пост , який ви хочете поділитися. Відео запис повиннабути публічною, про що свідчить світовий сірим значком, поруч часу видавничої Пошти:
Для тестування ви можете використовувати цю приклад URL :
"Https://www.facebook.com/FacebookDevelopers/videos/10152454700553553/"
2. Завантажте JavaScript SDK
Щоб використовувати вбудований відео-плеєр плагін, або будь-який інший соціальної плагін, необхідно додати Facebook JavaScript SDK на ваш сайт. Ви повинні завантажити SDK тільки один раз на сторінці, в ідеалі відразу після відкриття <тіло> тег:
<div id = "fb-root" ></div>
<script> ( function ( d , s , id ) {
var js , fjs = d . getElementsByTagName ( s )[ 0 ];
if ( d . getElementById ( id )) return ;
js = d . createElement ( s ); js . id = id ;
js . src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3" ;
fjs . parentNode . insertBefore ( js , fjs );
}( document , 'script' , 'facebook-jssdk' )); </script>
Ви можете знайти більш детальну довідку по реалізації JavaScript SDK в JavaScript SDK - швидкий старт .
3. Помістіть Embedded Тег Video Player
Потім помістіть вбудованого тега Video Player в будь-якому місці вашого сайту. Замінити {ваш-відео-пост-URL} з URL свої повідомлення.
<div class = "fb-video" data-href = "{your-video-post-url}"
data-allowfullscreen = "true" data-width = "500" ></div>
4. Тестування
Після того як ви виконали ці дії ви зможете перевірити свої вбудований відео-плеєр. Заповнена інтеграція буде виглядати на зразок цього:
<HTML>
<назва> Мої
відео
Результатом нашої тестової прикладу показаний на скріншоті нижче.
5. Налаштування
Слідуйте інструкціям нижче на цій сторінці, щоб відрегулювати розмір, мова та інші параметри.
Отримання URL відеоточкі Пошти
Там можуть бути ситуації, в яких ваш код для вставки створюється CMS і вам просто потрібно сирої повідомленням URL. Є два способи отримати URL поста в:
- Скопіюйте URL з постійне посилання з вашого адресному рядку браузера .
- Клацніть правою кнопкою миші Пошти час публікації і скопіювати адресу посилання.
Обидва методи, виділені червоним кольором на скріншоті нижче.
Через Graph API
Якщо ви хочете, щоб автоматично інтегрувати вбудовані відеопрогравачі на вашому сайті, ви, ймовірно, використовувати графік API агрегувати відео. Наприклад, ви можете використовуватисторінку Відео API кінцеву , який буде відправляти вам відповідь за запит до / {сторінка ідентифікатором} / відео в форматі (shortend):
{
"Дані" : [
{
"ID" : "1234567890" ,
"created_time" : "2015-02-25T23: 22: 06 + 0000" ,
"опис" : "My Video Підпис" ,
"embed_html" : "<IFRAME SRC = \ "HTTPS :? //www.facebook.com/video/embed video_id = 1234567890 \" ширина = \ "1280 \" висотою = \ "720 \" frameborder = \ "0 \"> </ IFRAME> " ,
"формат" : []
}
]
}
Щоб отримати URL даного відео:
Використовуйте ID значення для створення URL відповідно до структури:
"Https://www.facebook.com/video.php?v={id}"
Не застосовувати препарат властивість embed_html для вбудовування відео. Для отримання додаткової інформації по цій темі, будь ласка, зверніться до розділу Довідка
Макет на робочому столі
Ви можете регулювати ширину вбудований відео-плеєр на столі через даних ширини атрибута в Embedded тега Video Player, як показано в прикладі нижче. Значення має по крайней мере, 220 . Там немає меж на верхньому кінці, поки гравець ніколи не стане більше, ніж його батьківського елементу.
Не використовуйте теги стилів CSS, щоб регулювати розмір плагіна. Це може привести до помилок в індикації.
<! - НЕПРАВИЛЬНО! -->
<style type = "text/css" >
. fb - video {
width : 500px ;
}
</style>
<div class = "fb-post" data-href = "{your-video-post-url}" ></div>
<! - ПРАВИЛЬНО -->
<div class = "fb-video" data-href = "{your-video-post-url}"
data-allowfullscreen = "true" data-width = "500" ></div>
Повноекранний
Ви можете додати властивість даних allowfullscreen = "істина" , щоб дозволити відео для відтворення в повноекранному режимі.
Zurück nach obenМакет на Mobile Web
На мобільному Інтернеті, вбудоване відео плеєр автоматично масштабується для внутрішньої ширині батьківського елемента.
регулювання Мова
Можна налаштувати мови вбудованого плагіна Video Player, завантаживши локалізовану версію Facebook JavaScript SDK. При завантаженні SDK відрегулювати значення js.src використовувати локаль: Просто замінити en_US по вашій місцевості, наприклад fr_FR для французького (Франція):
JS . SRC = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.3" ;
Мови згадуються в файлі XML Facebook Locales . Ви, можливо, буде потрібно відрегулювати ширину соціальної Plugin для розміщення на різних мовах. Ви можете знайти більш детальну інформацію про нашу локалізації та перекладу сторінки.
Wordpress
Якщо ви вже використовуєте Facebook SDK для JavaScript у вашому Wordpress сайту ви можете використовувати вбудований плагін відеоплеєром, просто додавши FB-відео тег на пост:
<div class = "fb-video" data-href = "https://www.facebook.com/video.php?v=10152795258318553"
data-width = "500" data-allowfullscreen = "true" ></div>
Якщо ви не використовуєте Facebook SDK для JavaScript і вбудувати відео через копією & пасти фрагменті, який ви можете отримати від кожного відео пост, вбудованого плагін Video Player найбільш likly не зробить, як Wordpress буде перетворювати все & символів в # 038; і зламати гравця.
Замість цього використовуйте наступний код для додавання плагіна:
<script> window . fbAsyncInit = function () {
FB . init ({
xfbml : true ,
version : 'v2.3'
});
}; ( function ( d , s , id ){
var js , fjs = d . getElementsByTagName ( s )[ 0 ];
if ( d . getElementById ( id )) { return ;}
js = d . createElement ( s ); js . id = id ;
js . src = "//connect.facebook.net/en_US/sdk.js" ;
fjs . parentNode . insertBefore ( js , fjs );
}( document , 'script' , 'facebook-jssdk' )); </script>
<div class = "fb-video" data-href = "https://www.facebook.com/video.php?v=10152795258318553" data-width = "500" data-allowfullscreen = "true" ></div>
Нова, проста Wordpress інтеграція буде випущений найближчим часом.
часто задаються
Чи можу я використовувати графік API відео власності embed_html ?
Ні, ви не повинні використовувати властивість embed_html . Використання вбудованого модуля Відео гравця замість цього!
Про embed_html власності:
API Endpoint Графік відео буде служити властивість з ім'ям embed_html . Його значення буде містити HTML елемент, який може бути вбудований в веб-сторінку, щоб грати необхідний відео.
Це значення не слід плутати з Embedded плагін Video Player. Ми рекомендуємо не використовуватице властивість більше - використовувати вбудований плагін Video гравця замість цього!
Якщо ви використовуєте embed_html вартості нерухомості, ваш відеоплеєр:
- Не працює на мобільних пристроях і планшетах
- Не містять ніякої додаткової інформації, як видом, назва відео і т.д.
Приклад embed_html майна (не рекомендується):
{
"Embed_html" :
"<IFRAME
SRC = \ "HTTPS: //www.facebook.com/video/embed video_id = 1234567890 \"
Ширина = \ "1280 \"
Висота = \ "720 \"
frameborder = \ "0 \">
</ IFRAME> "
}
З вбудованим програвачем можна легко додати Facebook відео на ваш сайт. Ви можете використовувати будь-яку посаду громадського відео по сторінці або особи в якості джерела відеосигналу.
Вбудований відео-плеєр Конфігураторприклад кодуНалаштуваннядодавати його вручнуКрок за кроком
1. Виберіть URL або сторінка
Підберіть URL відеоролика, Facebook ви хочете впровадити.
2. Код конфигуратор
Вставити URL до Code Configurator і натисніть код Отримати кнопку для створення своїх вбудованого коду відеоплеєр.
3. Копія & Paste HTML фрагмент
Копіювання і повз фрагменті в HTML на веб-сайті призначення.
Повний Приклад коду
Скопіюйте та вставте приклад коду на ваш сайт. Налаштуйте даних-HREF до вашого відео URL.Контроль розміру програвача за допомогою атрибута даних ширини .
<HTML>
<HEAD>
<TITLE> Ваш сайт Назва </ назва>
</ HEAD>
<тіло>
<! - Навантаження Facebook SDK для JavaScript -->
<div id = "fb-root" ></div>
<script> ( function ( d , s , id ) {
var js , fjs = d . getElementsByTagName ( s )[ 0 ];
if ( d . getElementById ( id )) return ;
js = d . createElement ( s ); js . id = id ;
js . src = "//connect.facebook.net/en_US/sdk.js#xfbml=1" ;
fjs . parentNode . insertBefore ( js , fjs );
}( document , 'script' , 'facebook-jssdk' )); </script>
<! - Код кнопку відправки
поділитися з Just Friends </a>
<p> Як і діліться з друзями. </ P>
Повідомлення від <a HREF = "https://www.facebook.com/facebook/"> Facebook </a> на Фрайтаг, 5. Dezember 2014
</ BLOCKQUOTE>
</ DIV>
</ DIV>
</ Тіло>
</ HTML>
настройки
Конфігуратор вище, не включають в себе всі можливі настройки для вбудованого відео програвача. Ви також можете змінити наступні параметри:
| настройка | опис | дефолт |
|---|---|---|
|
даних HREF |
Абсолютна URL відео. |
н / д |
|
даних allowfullscreen |
Дайте відео для відтворення в повноекранному режимі.Може бути помилковим або істинним . |
помилковий |
|
даних автозапуску |
Автоматично відтворювати відео при завантаженні сторінки. Відео буде відтворюватися без звуку(відключений). Люди можуть включити звук за допомогою елементів управління відеоплеєр. Цей параметр не застосовується до мобільних пристроїв.Може бути помилковим або істинним . |
помилковий |
|
дані ширини |
Ширина відео контейнера. Мінімальна. 220px . |
автоматичний |
приклад конфігурації
<div class = "fb-video"
data-href = "https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
data-width = "500"
data-allowfullscreen = "true"
data-autoplay = "true" ></div>
Отримання вашого коду з відео повідомлення
1. Перейдіть до відео повідомлення
Якщо ви опублікувати громадськості відео, ви можете отримати код безпосередньо з самого відео пост.
Виберіть Вставити відео в меню параметрів:
Або при перегляді відео в повноекранному режимі виберіть Вставити відео кнопку в правому нижньому кутку:
Для сторінок тільки
При написанні загальнодоступного відео на сторінці ви можете отримати код безпосередньо з тимчасової шкалою. Натисніть на іконку, яка з'являється у верхньому правому куті записи на Facebook.
Виберіть Вставити відео з меню, що випадає: (тільки для сторінок)
2. Копіювання і вставка кодексу
Ви побачите діалогове з'являються з кодом для вбудовування відео запис в нього. Скопіюйте та вставте цей код в веб-сторінку в тому місці, де ви хочете його бачити.
Технічні подробиці див в розділі додавати його вручну
Додати код вручну
Крім кодогенератор , ви можете також вбудовувати код вручну.
1. Отримати Video Post URL
Перш за все, необхідно отримати URL з відео пост , який ви хочете поділитися. Відео запис повиннабути публічною, про що свідчить світовий сірим значком, поруч часу видавничої Пошти:
Для тестування ви можете використовувати цю приклад URL :
"Https://www.facebook.com/FacebookDevelopers/videos/10152454700553553/"
2. Завантажте JavaScript SDK
Щоб використовувати вбудований відео-плеєр плагін, або будь-який інший соціальної плагін, необхідно додати Facebook JavaScript SDK на ваш сайт. Ви повинні завантажити SDK тільки один раз на сторінці, в ідеалі відразу після відкриття <тіло> тег:
<div id = "fb-root" ></div>
<script> ( function ( d , s , id ) {
var js , fjs = d . getElementsByTagName ( s )[ 0 ];
if ( d . getElementById ( id )) return ;
js = d . createElement ( s ); js . id = id ;
js . src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3" ;
fjs . parentNode . insertBefore ( js , fjs );
}( document , 'script' , 'facebook-jssdk' )); </script>
Ви можете знайти більш детальну довідку по реалізації JavaScript SDK в JavaScript SDK - швидкий старт .
3. Помістіть Embedded Тег Video Player
Потім помістіть вбудованого тега Video Player в будь-якому місці вашого сайту. Замінити {ваш-відео-пост-URL} з URL свої повідомлення.
<div class = "fb-video" data-href = "{your-video-post-url}"
data-allowfullscreen = "true" data-width = "500" ></div>
4. Тестування
Після того як ви виконали ці дії ви зможете перевірити свої вбудований відео-плеєр. Заповнена інтеграція буде виглядати на зразок цього:
<HTML>
<назва> Мої
відео
Результатом нашої тестової прикладу показаний на скріншоті нижче.
5. Налаштування
Слідуйте інструкціям нижче на цій сторінці, щоб відрегулювати розмір, мова та інші параметри.
Отримання URL відеоточкі Пошти
Там можуть бути ситуації, в яких ваш код для вставки створюється CMS і вам просто потрібно сирої повідомленням URL. Є два способи отримати URL поста в:
- Скопіюйте URL з постійне посилання з вашого адресному рядку браузера .
- Клацніть правою кнопкою миші Пошти час публікації і скопіювати адресу посилання.
Обидва методи, виділені червоним кольором на скріншоті нижче.
Через Graph API
Якщо ви хочете, щоб автоматично інтегрувати вбудовані відеопрогравачі на вашому сайті, ви, ймовірно, використовувати графік API агрегувати відео. Наприклад, ви можете використовуватисторінку Відео API кінцеву , який буде відправляти вам відповідь за запит до / {сторінка ідентифікатором} / відео в форматі (shortend):
{
"Дані" : [
{
"ID" : "1234567890" ,
"created_time" : "2015-02-25T23: 22: 06 + 0000" ,
"опис" : "My Video Підпис" ,
"embed_html" : "<IFRAME SRC = \ "HTTPS :? //www.facebook.com/video/embed video_id = 1234567890 \" ширина = \ "1280 \" висотою = \ "720 \" frameborder = \ "0 \"> </ IFRAME> " ,
"формат" : []
}
]
}
Щоб отримати URL даного відео:
Використовуйте ID значення для створення URL відповідно до структури:
"Https://www.facebook.com/video.php?v={id}"
Не застосовувати препарат властивість embed_html для вбудовування відео. Для отримання додаткової інформації по цій темі, будь ласка, зверніться до розділу Довідка
Макет на робочому столі
Ви можете регулювати ширину вбудований відео-плеєр на столі через даних ширини атрибута в Embedded тега Video Player, як показано в прикладі нижче. Значення має по крайней мере, 220 . Там немає меж на верхньому кінці, поки гравець ніколи не стане більше, ніж його батьківського елементу.
Не використовуйте теги стилів CSS, щоб регулювати розмір плагіна. Це може привести до помилок в індикації.
<! - НЕПРАВИЛЬНО! -->
<style type = "text/css" >
. fb - video {
width : 500px ;
}
</style>
<div class = "fb-post" data-href = "{your-video-post-url}" ></div>
<! - ПРАВИЛЬНО -->
<div class = "fb-video" data-href = "{your-video-post-url}"
data-allowfullscreen = "true" data-width = "500" ></div>
Повноекранний
Ви можете додати властивість даних allowfullscreen = "істина" , щоб дозволити відео для відтворення в повноекранному режимі.
Zurück nach obenМакет на Mobile Web
На мобільному Інтернеті, вбудоване відео плеєр автоматично масштабується для внутрішньої ширині батьківського елемента.
регулювання Мова
Можна налаштувати мови вбудованого плагіна Video Player, завантаживши локалізовану версію Facebook JavaScript SDK. При завантаженні SDK відрегулювати значення js.src використовувати локаль: Просто замінити en_US по вашій місцевості, наприклад fr_FR для французького (Франція):
JS . SRC = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.3" ;
Мови згадуються в файлі XML Facebook Locales . Ви, можливо, буде потрібно відрегулювати ширину соціальної Plugin для розміщення на різних мовах. Ви можете знайти більш детальну інформацію про нашу локалізації та перекладу сторінки.
Wordpress
Якщо ви вже використовуєте Facebook SDK для JavaScript у вашому Wordpress сайту ви можете використовувати вбудований плагін відеоплеєром, просто додавши FB-відео тег на пост:
<div class = "fb-video" data-href = "https://www.facebook.com/video.php?v=10152795258318553"
data-width = "500" data-allowfullscreen = "true" ></div>
Якщо ви не використовуєте Facebook SDK для JavaScript і вбудувати відео через копією & пасти фрагменті, який ви можете отримати від кожного відео пост, вбудованого плагін Video Player найбільш likly не зробить, як Wordpress буде перетворювати все & символів в # 038; і зламати гравця.
Замість цього використовуйте наступний код для додавання плагіна:
<script> window . fbAsyncInit = function () {
FB . init ({
xfbml : true ,
version : 'v2.3'
});
}; ( function ( d , s , id ){
var js , fjs = d . getElementsByTagName ( s )[ 0 ];
if ( d . getElementById ( id )) { return ;}
js = d . createElement ( s ); js . id = id ;
js . src = "//connect.facebook.net/en_US/sdk.js" ;
fjs . parentNode . insertBefore ( js , fjs );
}( document , 'script' , 'facebook-jssdk' )); </script>
<div class = "fb-video" data-href = "https://www.facebook.com/video.php?v=10152795258318553" data-width = "500" data-allowfullscreen = "true" ></div>
Нова, проста Wordpress інтеграція буде випущений найближчим часом.
часто задаються
Чи можу я використовувати графік API відео власності embed_html ?
Ні, ви не повинні використовувати властивість embed_html . Використання вбудованого модуля Відео гравця замість цього!
Про embed_html власності:
API Endpoint Графік відео буде служити властивість з ім'ям embed_html . Його значення буде містити HTML елемент, який може бути вбудований в веб-сторінку, щоб грати необхідний відео.
Це значення не слід плутати з Embedded плагін Video Player. Ми рекомендуємо не використовуватице властивість більше - використовувати вбудований плагін Video гравця замість цього!
Якщо ви використовуєте embed_html вартості нерухомості, ваш відеоплеєр:
- Не працює на мобільних пристроях і планшетах
- Не містять ніякої додаткової інформації, як видом, назва відео і т.д.
Приклад embed_html майна (не рекомендується):
{
"Embed_html" :
"<IFRAME
SRC = \ "HTTPS: //www.facebook.com/video/embed video_id = 1234567890 \"
Ширина = \ "1280 \"
Висота = \ "720 \"
frameborder = \ "0 \">
</ IFRAME> "
}