Остановить воспроизведение видео с YouTube в слайдере Jquery, используя Jquery - PullRequest
Новая
       38

Остановить воспроизведение видео с YouTube в слайдере Jquery, используя Jquery

1 голос
/ 21 мая 2011

У меня есть слайдер jquery с вкладками, который я использую для отображения элементов общего проекта на странице. Одной из таких вещей является видео на YouTube, но мне не повезло, когда я выясняю, как ОСТАНОВИТЬ видео, когда пользователь нажимает на другой контент в слайдере.

Я смотрел на другие вопросы о стековом потоке, но не могу найти ничего, что соответствует тому, что я хочу, кроме здесь: Остановить видео на YouTube с помощью jquery?

НО кажется чрезмерным добавлять / удалять видео в dom, чтобы сделать эту работу, когда это можно сделать проще с видео vimeo. (См. http://www.taprootfoundation.org/ ... и нет, я не могу просто использовать vimeo: S)

Я пробовал это: 

$(document).read(function () {
    $("ul#subNav li a").click(function () {
        $('#video').stopVideo();
    });
});

Я также пытался изменить $('#video').stopVideo(); на $(window).find(embed).stopVideo(); ... или что-то в этом роде, я не помню, чтобы это было в моей голове.

И я тоже это попробовал: 

$(document).read(function () {
    $("ul#subNav li a").click(function () {
        var myPlayer = document.getElementById('video');
        myPlayer.stopVideo();
    });
});

"ul # subNav li a" - мой список ссылок для управления слайдером «#video» - это идентификатор, который я дал встроенному объекту. (Я использую старую вставку Youtube, а не фреймы.)

Есть идеи, как это сделать с видео на YouTube?

1 Ответ

1 голос
/ 27 мая 2011

Хорошо, после некоторых серьезных головных болей и путаницы, просматривая документы Google API (Google владеет Youtube), я собрал код из их примеров, чтобы что-то заработало.Это на самом деле не идеально, потому что я не на 100% понимаю, что происходит и почему что-то не работает, когда я пытался написать свой собственный эквивалент.

Мой слайдер настроен на использование div в качестве «контейнера» для каждого слайда.Весь этот код входит в div, в котором я хочу получить видео. 

<!--this is only displayed when the browser does not have flash or js -->
<div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.
</div>

<script type="text/javascript">
//calls the video player by ID so it can be accessed later
function onYouTubePlayerReady(playerId){ytplayer = document.getElementById("playerID");}
     //playerID is arbitrary, what you would normally give to your object or embed element
     var params = { allowScriptAccess: "always" };var atts = { id: "playerID" };

     //this next line totally replaces the object/embed element normally used.
     //be careful when replacing the URL below, only replace the URL up to the question mark (the end of the video ID), the bits after that are REQUIRED for this to work.
     //425/356 etc are sizes of the video
     swfobject.embedSWF("http://www.youtube.com/e/videoID?enablejsapi=1&version=3&playerapiid=ytplayer","ytapiplayer", "425", "356", "8", null, null, params, atts);

     //function to have the video play
     function play() {if (ytplayer) {ytplayer.playVideo();}}

     //function to have the video pause -- apparently using stopVideo isn't best practice. Check GoogleApi for more info: http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls
     function pause() {if (ytplayer) {ytplayer.pauseVideo();}}
</script>

Это мой код ссылки, найденный в совершенно другом div: 

<a href="#one" rel="1" onclick="pause();"> One</a>
<a href="#two" rel="1" onclick="pause();"> Two</a>
<a href="#three" rel="1" onclick="play();"> Three</a>

Я подумал об автоматическом воспроизведении видео(используя «play ();» в ссылке) для div, содержащего видео, но я думаю, что на самом деле этого не сделаю, видео с автоматическим воспроизведением сводит меня с ума на сайтах других людей, поэтому я не хочу подвергать других людей воздействиюк этому на моем собственном сайте.

Так что у вас есть.Какой-то код, который работает.Хотя я не совсем знаю почему.Надеюсь, кто-то еще найдет это полезным!

** Не забудьте убедиться, что у вас есть файл swfobject.js, связанный с вашей страницей!Я сделал это в заголовке моего документа: 

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script><!--Uses Google API library-->

** ОБНОВЛЕНО: не работает в Safari или Firefox, но работает в IE8 и Chrome.Любопытно узнать почему, потому что обычно это Firefox или IE, которые сами по себе не играют хорошо, а Safari - это веб-набор, такой как Chrome.

Любые ваши идеи могут быть полезны.До тех пор я буду работать над новым решением и публиковать его, когда / если найду его.

** Обновление № 2: Действительно ли работает во всех четырех основных браузерах (Chrome, Safari, Firefox 3.6 и IE8 -не проверялось менее чем на IE8 или FF3.6) Оказалось, что мне нужно было обновить плагины для Safari и FF для поддержки Flash, чтобы сообщение, не относящееся к флэш-памяти, отображалось, когда оно должно было появиться.Пожалуйста, представьте меня лицом к лицу.

Yay для рабочих решений!

...