it-roy-ru.com

Вставить HTML5 видео YouTube без iframe?

Можно ли встраивать html5-версию видео на YouTube без использования iframe?

35
user2217162

Вот пример встраивания без iFrame:

<div style="width:100%;height:100%;width: 820px; height: 461.25px; float: none; clear: both; margin: 2px auto;">
  <embed src="http://www.youtube.com/v/GlIzuTQGgzs?version=3&amp;hl=en_US&amp;rel=0&amp;autohide=1&amp;autoplay=1" wmode="transparent" type="application/x-shockwave-flash" width="100%" height="100%" allowfullscreen="true" title="Adobe Flash Player">
</div>

сравните с обычным iframe-кодом для вставки с YouTube:

<iframe width="854" height="510" src="//www.youtube.com/embed/GlIzuTQGgzs" frameborder="0" allowfullscreen></iframe>

и что касается HTML5, используйте тег <object> примерно так (исправлено):

<object style="width:100%;height:100%;width: 820px; height: 461.25px; float: none; clear: both; margin: 2px auto;" data="http://www.youtube.com/embed/GlIzuTQGgzs">
</object>

18
anapsix

Да. Youtube API это лучший ресурс для этого.

Есть 3 способа встраивания видео:

  • IFrame встраивает тэги <iframe>
  • IFrame встраивает, используя IFrame Player API
  • AS3 (и AS2 *) объект встраивает DEPRECATED

Я думаю, что вы ищете второй из них:

IFrame встраивает с помощью API-интерфейса IFrame Player

Приведенный ниже код HTML и JavaScript показывает простой пример, который вставляет проигрыватель YouTube в элемент страницы со значением id ytplayer. Указанная здесь функция onYouTubePlayerAPIReady () вызывается автоматически при загрузке кода API IFrame Player. Этот код не определяет параметры игрока, а также не определяет другие обработчики событий.

<div id="ytplayer"></div>

<script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE'
    });
  }
</script>

Вот несколько инструкций где вы можете посмотреть, когда начнете использовать API.


Пример встраивания без использования iframe - это использование тега <object>:

<object width="640" height="360">
    <param name="movie" value="http://www.youtube.com/embed/yt-video-id?html5=1&amp;rel=0&amp;hl=en_US&amp;version=3"/
    <param name="allowFullScreen" value="true"/>
    <param name="allowscriptaccess" value="always"/>
    <embed width="640" height="360" src="http://www.youtube.com/embed/yt-video-id?html5=1&amp;rel=0&amp;hl=en_US&amp;version=3" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>

(замените yt-video-id своим идентификатором видео)

JSFIDDLE

8
Ionică Bizău

Да, но это зависит от того, что вы подразумеваете под «вставкой»; насколько я могу судить после прочтения документации, кажется, что у вас есть несколько вариантов, если вы хотите обойти использование iframe API. Вы можете использовать API JavaScript и Flash ( https://developers.google.com/youtube/player_parameters ) для встраивания проигрывателя, но это включает в себя создание объектов Flash в вашем коде (чего я лично избегаю, но не обязательно то, что вы должны). Ниже приведены некоторые полезные разделы из документации для API YouTube.

Если вы действительно хотите обойти все эти методы и включить видео без какого-либо iframe, то вам лучше всего создать видеоплеер/приложение HTML5, которое можно подключить к API данных Youtube ( https://developers.google .com/youtube/v3/ ). Я не уверен, каковы ваши потребности, но это был бы путь, если вы действительно хотите обойти, используя любые фреймы или флеш-объекты. 

Надеюсь это поможет!


Полезно:

( https://developers.google.com/youtube/player_parameters )

IFrame встраивает, используя IFrame Player API

Следуйте инструкциям API IFrame Player, чтобы вставить видеопроигрыватель на веб-страницу или в приложение после загрузки кода JavaScript API проигрывателя. Второй параметр в конструкторе для проигрывателя видео - это объект, который определяет параметры проигрывателя. Внутри этого объекта свойство playerVars определяет параметры игрока.

Приведенный ниже код HTML и JavaScript показывает простой пример, который вставляет проигрыватель YouTube в элемент страницы со значением id ytplayer. Указанная здесь функция onYouTubePlayerAPIReady () вызывается автоматически при загрузке кода API IFrame Player. Этот код не определяет параметры игрока, а также не определяет другие обработчики событий.

...

IFrame встраивает с использованием тегов

Определите в своем приложении тег, в котором URL-адрес src определяет содержимое, которое будет загружать проигрыватель, а также любые другие параметры проигрывателя, которые вы хотите установить. Параметры высоты и ширины тега определяют размеры проигрывателя.

Если вы создаете элемент самостоятельно (а не используете API-интерфейс IFrame Player для его создания), вы можете добавить параметры проигрывателя непосредственно в конец URL-адреса. URL имеет следующий формат:

...

AS3 объект встраивает

Встраивания объектов используют тег, чтобы указать размеры и параметры игрока. Пример кода ниже демонстрирует, как использовать объект embed для загрузки проигрывателя AS3, который автоматически воспроизводит то же видео, что и предыдущие два примера.

1
markthethomas

Используйте тег объекта:

<object data="http://iamawesome.com" type="text/html" width="200" height="200">
  <a href="http://iamawesome.com">access the page directly</a>
</object>

Ссылка: http://debug.ga/embedding-external-pages-without-iframes/

0
jamaco