Как встроить

Как встроить часть любого видео YouTube


Иногда вам может понадобиться встроить в свои веб-страницы только часть видео YouTube.
Например, вы встраиваете фильм от YouTube, но хотите, чтобы зритель сосредоточиться на определенной сцене, которая начинается в секундах «x» и заканчивается в секундах «y». Когда сцена закончилась, встроенный клип должен прекратить воспроизведение независимо от длины видео.
Что ж, вот два простых способа помочь вам встроить часть любого видео YouTube:

A: встраивать видео YouTube с временем начала

Это сценарий, в котором вы указываете время начала для встроенного видео и позволяете ему воспроизводиться до конца. Здесь вы можете использовать стандартный код встраивания с YouTube и добавить параметр времени начала к URL-адресу YouTube, как показано в следующем примере:
<iframe width="500" height="300" frameborder="0" allowfullscreen
src="http://www.youtube.com/embed/VIDEO_ID#t=1234s">
iframe>

Замените VIDEO_ID фактическим идентификатором вашего видео на YouTube и замените 1234s временем начала (в секундах). Например, если вы хотите, чтобы воспроизведение видео начиналось с отметки 03:24 (мм: сс), укажите время как t=204 с (60 * 3 + 24).

Б. Встраивайте видео YouTube с указанием времени начала и окончания

Следующая видеозапись концерта Янни на YouTube длится несколько минут, но я вложил только самый интересный фрагмент, где дама играет на скрипке.
Нажмите кнопку воспроизведения во встроенном проигрывателе для быстрой демонстрации.
<div data-video = "Iq3zo432sAU"
data-startseconds = "323"
data-endseconds = "432"
data-height = "309"
data-width = "550"
id = "youtube-player">

div>
<script src="https://www.youtube.com/iframe_api">script>
<script type="text/javascript">
function onYouTubeIframeAPIReady() {
var ctrlq = document.getElementById("youtube-player");
var player = new YT.Player('youtube-player', {
height: ctrlq.dataset.height,
width: ctrlq.dataset.width,
events: {
'onReady': function(e) {
e.target.cueVideoById({
videoId: ctrlq.dataset.video,
startSeconds: ctrlq.dataset.startseconds,
endSeconds: ctrlq.dataset.endseconds
});
}
}
});
}
script>

Стандартный код встраивания YouTube не поддерживает параметр времени окончания, но мы можем использовать YouTube JavaScript API для встраивания части любого видео YouTube. Не утомляя вас техническими деталями, вот ваш новый код для встраивания:
<div data-video = "VIDEO_ID"
data-startseconds = "100"
data-endseconds = "200"
data-height = "480"
data-width = "640"
id = "youtube-player">

div>
<script src="https://www.youtube.com/iframe_api">script>
<script type="text/javascript">
function onYouTubeIframeAPIReady() {
var ctrlq = document.getElementById("youtube-player");
var player = new YT.Player('youtube-player', {
height: ctrlq.dataset.height,
width: ctrlq.dataset.width,
events: {
'onReady': function(e) {
e.target.cueVideoById({
videoId: ctrlq.dataset.video,
startSeconds: ctrlq.dataset.startseconds,
endSeconds: ctrlq.dataset.endseconds
});
}
}
});
}
script>

Вам просто нужно заменить идентификатор видео, время начала (в секундах), время окончания (в секундах), высоту проигрывателя (в пикселях) и ширину в теге DIV в соответствии с твои нужды. См. Этот аннотированный исходный код, чтобы узнать, как управление воспроизведением осуществляется через API YouTube.
См. Также: YouTube как аудиоплеер.