Возможно ли внедрить версию html5 видео с YouTube без использования iframe?
Вставить HTML5 видео YouTube без iframe?
Ответ 1
Вот пример внедрения без 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&hl=en_US&rel=0&autohide=1&autoplay=1" wmode="transparent" type="application/x-shockwave-flash" width="100%" height="100%" allowfullscreen="true" title="Adobe Flash Player">
</div>Ответ 2
Да. API Youtube - лучший ресурс для этого.
Есть 3 способа встраивания видео:
- IFrame внедряет теги
<iframe> - IFrame встраивается с использованием API-интерфейса IFrame Player
- Объект AS3 (и AS2 *) содержит
DEPRECATED
Я думаю, что вы ищете вторую из них:
IFrame внедряется с использованием API-интерфейса IFrame
В приведенном ниже коде HTML и JavaScript показан простой пример, который вставляет игрока YouTube в элемент страницы с идентификационным значением 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&rel=0&hl=en_US&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&rel=0&hl=en_US&version=3" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>
(замените yt-video-id на ваш идентификатор видео)
Ответ 3
Да, но это зависит от того, что вы подразумеваете под "embed"; насколько я могу судить, прочитав документы, кажется, что у вас есть несколько вариантов, если вы хотите обойтись с использованием iframe API. Вы можете использовать javascript и flash API (https://developers.google.com/youtube/player_parameters) для встраивания проигрывателя, но это связано с созданием объектов Flash в вашем коде (что-то я лично избегайте, но не обязательно того, что вам нужно). Ниже приведены некоторые полезные разделы из dev docs для Youtube API.
Если вы действительно хотите обойти все эти методы и включить видео без какого-либо iframe, то лучшим выбором может быть создание видеопроигрывателя/приложения HTML5, которое может подключаться к API данных Youtube (https://developers.google.com/youtube/v3/). Я не уверен, в какой мере ваши потребности, но это будет путь, если вы действительно хотите обойтись с помощью любых фреймов или флеш-объектов.
Надеюсь, это поможет!
Полезное:
(https://developers.google.com/youtube/player_parameters)
IFrame внедряется с использованием API-интерфейса IFrame Player
Следуйте инструкциям API IFrame Player, чтобы вставить видеопроигрыватель на свою веб-страницу или приложение после загрузки JavaScript-кода Player API. Второй параметр в конструкторе для видеоплеера - это объект, который указывает параметры игрока. Внутри этого объекта свойство playerVars идентифицирует параметры игрока.
В приведенном ниже коде HTML и JavaScript показан простой пример, который вставляет игрока YouTube в элемент страницы с идентификационным значением ytplayer. Указанная здесь функция onYouTubePlayerAPIReady() вызывается автоматически при загрузке кода API IFrame Player. Этот код не определяет параметры игрока, а также не определяет другие обработчики событий.
...
IFrame внедряет теги
Определите тег в своем приложении, в котором URL-адрес src указывает содержимое, которое будет загружено игроком, а также любые другие параметры игрока, которые вы хотите установить. Параметры высоты и ширины метки определяют размеры проигрывателя.
Если вы создаете элемент самостоятельно (вместо использования API-интерфейса IFrame Player для его создания), вы можете добавлять параметры игрока непосредственно в конец URL-адреса. URL-адрес имеет следующий формат:
...
Объект AS3 внедряется
Объект включает тэг, чтобы указать размеры и параметры проигрывателя. Пример кода ниже демонстрирует, как использовать объект embed для загрузки AS3-плеера, который автоматически воспроизводит то же видео, что и предыдущие два примера.
Ответ 4
Используйте тег объекта:
<object data="http://iamawesome.com" type="text/html" width="200" height="200">
<a href="#" onclick="location.href='http://iamawesome.com'; return false;">access the page directly</a>
</object>
Ссылка: http://debug.ga/embedding-external-pages-without-iframes/