Я пытаюсь получить текстовое поле, которое назначает входные данные для переменной, а затем запускает функцию для преобразования ее в URL-адрес для вставки YouTube и отображает, что - PullRequest
Новая
       8

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

0 голосов
/ 01 июня 2019

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

Я пробовал несколько разных функций для связи друг с другом, а также пытался изменить мой мод, чтобы он извлекал из URL часов, но youtube отклонил запрос. Я был везде с stackoverflow, w3, jsfiddle, codepen, и погуглил дерьмо из этого, но не повезло.

Я работаю с этой скрипкой в ​​качестве основы, прежде чем поместить ее на страницу:

http://jsfiddle.net/hangman5950/51gz6syu

Мне нужна переменная "myID", чтобы вытащить из того, что находится в текстовом поле, затем запустить ее в функции, и я чувствую, что это очень просто, но я не сталкивался с этим в течение многих лет, поэтому я не знаю, что-нибудь. jajajaja

мое текстовое поле и отображение видео и код для вставки: 

<input type="text" id="wat" value="">

<button onclick="myFunction()">Convert</button>

<p id="emb"></p>

<script>
function myFunction() {
 var x = document.getElementById("wat").value;
  document.getElementById("emb").innerHTML = x;
}
 </script>

Идентификатор YouTube:

Код для вставки:

мой css: 

 #myId {
    color: orange;
 }

мой JS: 

function getId(url) {
    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=) 
([^#\&\?]*).*/;
     var match = url.match(regExp);

    if (match && match[2].length == 11) {
         return match[2];
     } else {
        return 'error';
    }
 }

 var myId = getId('wat');

 $('#myId').html(myId);

$('#myCode').html('<iframe width="560" height="315" 
src="//www.youtube.com/embed/' + myId + '" frameborder="0" 
  allowfullscreen></iframe>');

Я ожидаю, что поле будет присвоено "emb", а затем отобразит видео и результаты, но вместо этого я получаю ошибку после ошибки

1 Ответ

0 голосов
/ 01 июня 2019

Я сделал эту работу, надеюсь, это то, что вам нужно: 

function getId(){
    var id = document.getElementById("wat").value;
    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    var match = id.match(regExp);
        if (match && match[2].length == 11) {
           var myId = match[2];
            $('#emb').html('<iframe width="560" height="315" src="https://www.youtube.com/embed/' + myId + '" frameborder="0" allowfullscreen></iframe>');
         }else{
           return 'Error';
        }
}

И HTML 

<input type="text" id="wat" value="">

<button id="convert" onclick="getId()">Convert</button>

<p id="emb"></p>
...