Как я могу вставить видео YouTube в WordPress с помощью JavaScript - PullRequest
Новая
       50

Как я могу вставить видео YouTube в WordPress с помощью JavaScript

0 голосов
/ 22 ноября 2018

Кто-нибудь знает способ встроить видео YouTube в JavaScript?или способ запустить шорткод на странице в JavaScript?Мне нужен способ передать переменную javascript в URL-адрес YouTube и встроить видео.Код, который у меня есть, использует плагин, который запускает этот код как шорткод на странице.используя плагин под названием Shortcoder.

Я провел много исследований и обычно не пишу новых сообщений, но, похоже, не могу найти ответ на этот основной вопрос.Как встроить видео на YouTube (или запустить шорткод) из JavaScript.Одна вещь, которую я нашел, это это , которая показывает встраивание видео с помощью flashplayer, но я бы хотел, если возможно, избежать flashplayer, и чтобы он был в javascript, чтобы я мог передать переменную.Вот код, который я нашел на youtube , который я использую для получения переменной.

<script text="text/javascript">
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

var video = getUrlParameter('v');

if(video){
   console.log('v='+video);
   // embed video with url

}else {
   console.log('v=null');
   // embed youtube uploads playlist

}

Мне нужен способ для вставки видео на YouTube или запуска шорткода для плагина WordPress для WordPress, но мне нужно, чтобы URL-адрес моего веб-сайта выполнялся.

пример: www.example.com/video/?v=Y123 должно отображать видео на YouTube www.youtube.com/watch?v=Y123 и www.example.com/video/?v=x456должно отображаться видео на YouTube www.youtube.com/watch?v=x456

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

кто-нибудь знает способ встраивания видео YouTube в javascript или способ запуска шорткода на странице в javascript?

шорткод предпочтительнее, поскольку он удаляет несколько дополнительных ограничений исделать будущую реализацию JavaScript в WordPress гораздо проще.

Редактировать: также, я немного новичок в WordPress, хотя у меня есть некоторый опыт в андроид студии.

Ответы [ 2 ]

0 голосов
/ 22 ноября 2018

хорошо, я думаю, что нашел способ, чтобы это сработало.Вот как выглядит мой код, если кому-то еще это нужно: 

<iframe name="videoURL" id="videoURL" width="560" height="315" src="https://www.youtube.com/embed/ymHNtBZxFKY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<script text="text/javascript">
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

var video = getUrlParameter('v');
var url;

if(video){
   console.log('v='+video);
   url = 'https://www.youtube.com/embed/'+video;
   // embed video with url

}else {
   console.log('v=null');
   // embed youtube uploads playlist
   url = 'https://www.youtube.com/embed?listType=playlist&list=UU7YyXO5sOuG4zmGlW7KDCNw'
}

  document.getElementById("videoURL").setAttribute("src", url);

</script>
0 голосов
/ 22 ноября 2018

videoId: Идентификатор после вашего видео, т. Е. Видео этого, составляет "1lD9G4D1p-Y" https://www.youtube.com/watch?v=1lD9G4D1p-Y

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

window.onYouTubePlayerAPIReady = function() {
        window.player = new YT.Player('elementId');
        window.player.cueVideoById({'videoId': 'yourVideoId',
          'suggestedQuality': 'medium'});
}

Разница между моим кодом и их кодомМой добавляет сценарий, используя JavaScript, их добавляет, используя HTML, а затем JavaScript для его запуска.

Документация https://developers.google.com/youtube/iframe_api_reference

...