Остановить YouTube видео с JQuery?
У меня есть созданный мной слайдер jquery, в основном только три панели, которые скользят, применяя отрицательные левые CSS-значения. Прекрасно работает, но у меня есть видео на одном слайде YouTube, которое не останавливается, когда я слайд. Я пробовал показ: нет и видимость: скрытый, который работает во всех, кроме IE, звук продолжает идти в IE.
Есть ли простой способ убить видео с помощью jquery?
20 ответов
Это простое, элегантное решение, которое работает во всех браузерах:
var video = $("#playerid").attr("src");
$("#playerid").attr("src","");
$("#playerid").attr("src",video);
Для начала видео
var videoURL = $('#playerID').prop('src');
videoURL += "&autoplay=1";
$('#playerID').prop('src',videoURL);
Остановить видео
var videoURL = $('#playerID').prop('src');
videoURL = videoURL.replace("&autoplay=1", "");
$('#playerID').prop('src','');
$('#playerID').prop('src',videoURL);
Вы можете заменить "&autoplay=1" на "? Autoplay = 1", если нет дополнительных параметров
работает как для Vimeo, так и для YouTube на FF и Chrome
1.include
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
2. добавить свой YouTube iframe.
<iframe id="player" src="http://www.youtube.com/embed/YOURID?rel=0&wmode=Opaque&enablejsapi=1" frameborder="0"></iframe>
3.магическое время
<script>
var player;
function onYouTubePlayerAPIReady() {player = new YT.Player('player');}
//so on jquery event or whatever call the play or stop on the video.
//to play player.playVideo();
//to stop player.stopVideo();
</script>
У меня была эта проблема раньше, и я пришел к выводу, что единственный способ остановить видео в IE - это удалить его из DOM.
Мое решение этого, которое работает для современного YouTube embed Формат выглядит следующим образом.
Предполагая, что iframe ваше видео воспроизводится в id="#video"этот простой кусочек Javascript сделает эту работу.
$(document).ready(function(){
var stopVideo = function(player) {
var vidSrc = player.prop('src');
player.prop('src', ''); // to force it to pause
player.prop('src', vidSrc);
};
// at some appropriate time later in your code
stopVideo($('#video'));
});
Я видел предлагаемые решения этой проблемы, связанные с использованием YouTube API, но если ваш сайт не является https сайт, или ваше видео встроено с использованием современного формата, рекомендованного YouTube, или если у вас есть no-cookies Если эти параметры установлены, то эти решения не работают, и вместо видео вы получаете эффект "телевизор на мертвый канал".
Я протестировал вышеупомянутое на каждом браузере, на котором я мог положиться, и это работает очень надежно.
Я столкнулся с той же проблемой. После многих альтернативных действий я просто переустановил embed src="" с тем же URL.
Фрагмент кода:
$("#videocontainer").fadeOut(200);<br/>
$("#videoplayer").attr("src",videoURL);
Мне удалось хотя бы остановить воспроизведение видео, когда я его скрываю.:-)
Если у вас есть свойство autoplay в iframe src, это не поможет перезагрузить src attr/prop, поэтому вы должны заменить autoplay=1 на autoplay=0
var stopVideo = function(player) {
var vidSrc = player.prop('src').replace('autoplay=1','autoplay=0');
player.prop('src', vidSrc);
};
stopVideo($('#video'));
Это работает для меня
stopIframeVideo = () => {
let iframe = $('.video-iframe')
iframe.each((index) => {
iframe[index].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
})
};
$('.close').click(() => {
stopIframeVideo()
});К сожалению, если атрибут id тега object не существует, play/stop/pauseVideo() не работает в IE.
<object style="display: block; margin-left: auto; margin-right: auto;" width="425" height="344" data="http://www.youtube.com/v/7scnebkm3r0&fs=1&border=1&autoplay=1&enablejsapi=1&version=3" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="allowfullscreen" value="true" />
<param name="src" value="http://www.youtube.com/v/7scnebkm3r0&fs=1&border=1&autoplay=1&enablejsapi=1&version=3" />
</object>
<object id="idexists" style="display: block; margin-left: auto; margin-right: auto;" width="425" height="344" data="http://www.youtube.com/v/pDW47HNaN84&fs=1&border=1&autoplay=1&enablejsapi=1&version=3" type="application/x-shockwave-flash">
<param name="allowscriptaccess" value="always" />
<param name="allowFullScreen" value="true" />
<param name="src" value="http://www.youtube.com/v/pDW47HNaN84&fs=1&border=1&autoplay=1&enablejsapi=1&version=3" />
</object>
<script>
function pauseVideo()
{
$("object").each
(
function(index)
{
obj = $(this).get(0);
if (obj.pauseVideo) obj.pauseVideo();
}
);
}
</script>
<button onClick="pauseVideo();">Pause</button>
Попытайся!
Ну, есть гораздо более простой способ сделать это. Когда вы захватите ссылку для встраивания видео на YouTube, прокрутите немного вниз, и вы увидите несколько вариантов: iFrame Embed, Использовать старое встраивание, похожие видео и т. Д. Там выберите "Использовать старую ссылку для встраивания". Это решает проблему.
Мне потребовалось немного времени, чтобы разобраться в этом, но я остановился на этой кросс-браузерной реализации:
HTML
<div class="video" style="display: none">
<div class="mask"></div>
<a href="#" class="close-btn"><span class="fa fa-times"></span></a>
<div class="overlay">
<iframe id="player" width="100%" height="70%" src="//www.youtube.com/embed/Xp697DqsbUU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
JQuery
$('.launch-video').click(function() {
$('.video').show();
$("#player").attr('src','//www.youtube.com/embed/Xp697DqsbUU');
});
$('.close-btn').click(function() {
$('.video').hide();
$("#player").attr('src','');
});
По сути, он открывает мой лайтбокс и заполняет мой атрибут src, а при закрытии просто удаляет значение src (затем заново заполняет его при открытии).
Это работает для меня как на YouTube, так и на Vimeo плеерах. Я просто сбрасываю атрибут src, так что имейте в виду, что видео вернется к началу.
var $theSource = $theArticleDiv.find('.views-field-field-video-1 iframe').attr('src');
$theArticleDiv.find('.views-field-field-video-1 iframe').attr('src', $theSource); //reset the video so it stops playing
$ theArticleDiv - это контейнер моего текущего видео - так как у меня есть несколько видео на странице, и они отображаются через Drupal во время выполнения, я понятия не имею, какими будут их идентификаторы. Итак, я связал событие muy click с видимым в данный момент элементом, нашел его родительский элемент и решил, что это $ theArticleDiv.
('.views-field-field-video-1 iframe') находит для меня текущее видео iframe - в частности, то, которое видно сейчас. Этот iframe имеет атрибут src. Я просто поднимаю это и сбрасываю обратно обратно к тому, что уже было, и автоматически видео останавливается и возвращается к началу. Если мои пользователи хотят сделать паузу и возобновить работу, они, конечно, могут сделать это, не закрывая видео - но, честно говоря, если они действительно закрывают видео, я чувствую, что они могут смириться с тем фактом, что оно сброшено к началу.
НТН
На самом деле вам нужен только javascript и правильно построить встраивание видео на YouTube с библиотекой swfobject google.
Это пример
<script type="text/javascript" src="swfobject.js"></script>
<div style="width: 425; height: 356px;">
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/y5whWXxGHUA?enablejsapi=1&playerapiid=ytplayer&version=3",
"ytapiplayer", "425", "356", "8", null, null, params, atts);
</script>
</div>
После этого вы можете вызвать следующие функции:
ytplayer = document.getElementById("myytplayer");
ytplayer.playVideo();
ytplayer.pauseVideo();
ytplayer.stopVideo();
Я получил это, чтобы работать на всех современных браузерах, включая IE9|IE8|IE7. Следующий код откроет ваше видео на YouTube в модальном диалоговом окне пользовательского интерфейса jQuery, автоматически воспроизведет видео с 0:00 при открытии диалога и остановит видео при закрытии диалога.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("swfobject", "2.1");
function _run() {
/* YouTube player embed for modal dialog */
// The video to load.
var videoID = "INSERT YOUR YOUTUBE VIDEO ID HERE"
// Lets Flash from another domain call JavaScript
var params = { allowScriptAccess: "always" };
// The element id of the Flash embed
var atts = { id: "ytPlayer" };
// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
swfobject.embedSWF("http://www.youtube.com/v/" + videoID + "?version=3&enablejsapi=1&playerapiid=player1&autoplay=1",
"videoDiv", "879", "520", "9", null, null, params, atts);
}
google.setOnLoadCallback(_run);
$(function () {
$("#big-video").dialog({
autoOpen: false,
close: function (event, ui) {
ytPlayer.stopVideo() // stops video/audio on dialog close
},
modal: true,
open: function (event, ui) {
ytPlayer.seekTo(0) // resets playback to beginning of video and then plays video
}
});
$("#big-video-opener").click(function () {
$("#big-video").dialog("open");
return false;
});
});
</script>
<div id="big-video" title="Video">
<div id="videoDiv">Loading...</div>
</div>
<a id="big-video-opener" class="button" href="#">Watch the short video</a>
API проигрывателя YouTube для встраивания iframe
Документы: https://developers.google.com/youtube/iframe_api_reference .
HTML (источник сenablejsapi=1параметр):
<iframe id="existing-iframe-example"
src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
></iframe>
1 из 4 — Загрузить API-интерфейс iframe
// 1. Loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
2 из 4 — функция onYouTubeIframeAPIReady
Любая веб-страница, использующая IFrame API, должна также реализовывать следующую функцию JavaScript.onYouTubeIframeAPIReady.
function onYouTubeIframeAPIReady() {
/* execute as soon as the player API code downloads */
console.log("Youtube API is ready);
}
3 из 4 – Создайте объект YT.Player (выберите iframe по видеоидентификатору)
/* Player */
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('existing-iframe-example');
}
Связанный: Как я могу использовать класс вместо идентификатора для нового YT.Player()
4 из 4 – Используйте методы Youtube Iframe API :
player.stopVideo();
// player.playVideo()
// player.pauseVideo()
Нажмите Часть событий
Имея это в виду, остановите видео по любой логике:
JS
/* Stop Video on click */
const stop_button = document.querySelector('[stop]');
stop_button.addEventListener("click", () => {
player.stopVideo();
})
jquery на ()
/* Stop Video on click */
$( "[stop]" ).on( "click", function() {
player.stopVideo();
});
Фрагмент кода
** Нет возможности загрузить youtube iframe внутри фрагмента stackoverflow (демонстрация codepen )
Для тех, кто ищет решение javascript
let iframeDiv = document.getElementById('demoVideo');
let video = iframeDiv.src;
iframeDiv.src = "";
iframeDiv.src = video;
У меня это отлично сработало, просто поместите id='demoVideo' в свой тег iframe, и все готово:)
Если вы используете иногда playerID.stopVideo(); не работает, вот трюк,
function stopVideo() {
playerID.seekTo(0);
playerID.stopVideo();
}
Добавьте следующее в конец URL-адреса для встраивания
?enablejsapi=1&version=3&playerapiid=ytplayer
Просто так.
включите следующую строку в функцию, чтобы закрыть поп.
$('#youriframeid').remove();