2015-05-11 3 views
0

Мои знания в области кодирования в основном являются самоучками и ограниченными.Множество iframe вставляются с youtube api

У меня есть форум, который я установил для замены URL-адресов youtube в сообщениях с iframe-рисунками видео. Единственным его уникальным аспектом было то, что он заставлял встраиваемые игры играть с качеством 720p (если доступно), даже если игрок был меньше, чем рекомендует youtube. «Почему» - длинная история, но я хочу продолжать делать это именно так. Я пытаюсь получить то же самое, что работает с новым API.

В примере ниже я могу заставить его работать для одного видео на странице, но не на той же странице. Я предполагаю, что это имеет какое-то отношение к дублирующим функциям или чему-то в этом роде.

<html><body> 
 

 
<script> 
 

 
\t var tag = document.createElement('script'); 
 
\t tag.src = "https://www.youtube.com/iframe_api"; 
 
\t var firstScriptTag = document.getElementsByTagName('script')[0]; 
 
\t firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
 

 
\t var xyzplayer; 
 
\t function onYouTubeIframeAPIReady() { 
 
\t xyzplayer = new YT.Player('xyzplayer', { 
 
\t \t events: { 
 
\t \t \t 'onStateChange': onPlayerStateChange 
 
\t \t \t } 
 
\t \t }); 
 
\t } 
 

 
\t function onPlayerStateChange(event) { 
 
\t if (event.data == YT.PlayerState.PLAYING) { 
 
\t event.target.setPlaybackQuality('hd720'); 
 
\t \t } 
 
\t } 
 

 
    </script> 
 

 
<iframe id="xyzplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&html5=1" frameborder="0"></iframe> 
 

 
<br><br><br> 
 

 
<script> 
 

 
\t var tag = document.createElement('script'); 
 
\t tag.src = "https://www.youtube.com/iframe_api"; 
 
\t var firstScriptTag = document.getElementsByTagName('script')[0]; 
 
\t firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
 

 
\t var abcplayer; 
 
\t function onYouTubeIframeAPIReady() { 
 
\t abcplayer = new YT.Player('abcplayer', { 
 
\t \t events: { 
 
\t \t \t 'onStateChange': onPlayerStateChange 
 
\t \t \t } 
 
\t \t }); 
 
\t } 
 

 
\t function onPlayerStateChange(event) { 
 
\t if (event.data == YT.PlayerState.PLAYING) { 
 
\t event.target.setPlaybackQuality('hd720'); 
 
\t \t } 
 
\t } 
 

 
    </script> 
 

 
<iframe id="abcplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/IwfUnkBfdZ4?enablejsapi=1&html5=1" frameborder="0"></iframe> 
 

 
</body></html>

+0

Что это нужно делать с Java? –

+0

Вы правы. API JavaScript Player был устарел. Удален этот тег. – krrrrak

ответ

1

Поскольку код загружается в библиотеке дважды, вторая нагрузка подменяет функцию вы определяете в первом и, следовательно, событии от первой никогда не будет обрабатываться. Попробуйте соединить создание игрока в один метод ... что-то вроде этого (так что игроки для обоих встраивает получить их события выслушали):

<html><body> 
 
<iframe id="xyzplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&html5=1" frameborder="0"></iframe> 
 
<br/><br/><br/> 
 
<iframe id="abcplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/IwfUnkBfdZ4?enablejsapi=1&html5=1" frameborder="0"></iframe> 
 
<script> 
 

 
\t var tag = document.createElement('script'); 
 
\t tag.src = "https://www.youtube.com/iframe_api"; 
 
\t var firstScriptTag = document.getElementsByTagName('script')[0]; 
 
\t firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
 

 
\t var abcplayer,xyzplayer; 
 
\t function onYouTubeIframeAPIReady() { 
 
\t abcplayer = new YT.Player('abcplayer', { 
 
\t \t events: { 
 
\t \t 'onStateChange': onPlayerStateChange 
 
\t \t } 
 
\t });  
 
\t xyzplayer = new YT.Player('xyzplayer', { 
 
\t \t events: { 
 
\t \t \t 'onStateChange': onPlayerStateChange 
 
\t \t } 
 
\t }); 
 
\t } 
 

 
\t function onPlayerStateChange(event) { 
 
\t if (event.data == YT.PlayerState.PLAYING) { 
 
\t  event.target.setPlaybackQuality('hd720'); 
 
\t } 
 
\t } 
 
    </script> 
 
</body></html>

+0

Хорошо. Это работает, оба видео играют в любом разрешении, которое я запрашиваю (если оно доступно), но как я могу реализовать это на своем форуме? В настоящее время он ищет «http://www.youtube.com/watch?v=vIDEOid» или некоторые его варианты, использует оператор regex для захвата видеоигры, а затем выполняет прямую замену inline. EDIT: у этого был интересный формат: http://mesdomaines.nu/multiple_embeds_demo/multiple_embeds_demo.html Я пытаюсь проверить, могу ли я скопировать некоторые из них. – krrrrak

Смежные вопросы