如何在输入文本字段中粘贴 url 时获取 Youtube iframe

Question

我的 HTML 看起来像这样

在输入框中粘贴 youtube 或 vimeo url 后，我需要在其下方获取 youtube/vimeo iframe，而无需重新加载页面。像这样的东西：

我尝试在 keyup 函数上捕获 url，但我无法获取 iframe。 我的代码是

<div class="modal-body">
<div class="form-group">
    <label for="video-url">Paste a Vimeo or YouTube video URL here</label>
    <input class="form-control" id="video" name="video" placeholder="Video URL" type="url">
</div>
<div id="video" style="display: none;">
    <div class="form-group">
        <div id="video-preview"></div>
    </div>
    <div class="form-group">
        <label for="video-title">Caption/Title</label>
        <input class="form-control" id="video-title" maxlength="100" name="video" placeholder="Video Title" type="text">
    </div>
</div>

<script>
$(document).ready(function($) {
 var videobox = document.getElementById('video');
 $('#video').on('input', function() {
   var url =$('#video').val()); 
   videobox.style.display = "block";
  });
})
</script>

我怎样才能得到它？在此先感谢

Answer 1

首先，你的div和你的输入域ID相同是不正确的，在javascript中引用的时候，会引用到输入域，而不是div上。这就是style.display 不起作用或没有显示您的 div 的原因。

其次，在使用 iframe 时，您应该考虑 vimeo 和 youtube 实际上并没有提供那么多的 CORS 问题（在大多数情况下，确实建议在这种情况下使用它们的 API），所以一般考虑嵌入并记下粘贴的视频网址

解决方案：

• 将div的id属性从video替换为videobox
• 创建 Iframe 元素并附加到 video-preview
• 记下使用的 URL，它用于嵌入不是浏览器中使用的普通 URL

$(document).ready(function($) {
 var videobox = document.getElementById('videobox');
 $('#video').on('keyup', function() {
   if($(this).val() === "") {
 videobox.style.display = "none";
   }else{
 var url =$(this).val(); 
 var ifrm = document.createElement('iframe');
 ifrm.src = (!url.includes('vimeo')) ? "//www.youtube.com/embed/"+ url.split("=")[1] : "//player.vimeo.com/video/"+ url.split("/")[3];
 ifrm.width= "560";
 ifrm.height = "560";
 ifrm.frameborder="0";
 ifrm.scrolling="no";
 $('#video-preview').html(ifrm);
 videobox.style.display = "block";
   }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body">
<div class="form-group">
    <label for="video-url">Paste a Vimeo or YouTube video URL here</label>
    <input class="form-control" id="video" name="video" placeholder="Video URL" type="url">
</div>
<div id="videobox" style="display: none;">
    <div class="form-group">
        <div id="video-preview"></div>
    </div>
    <div class="form-group">
        <label for="video-title">Caption/Title</label>
        <input class="form-control" id="video-title" maxlength="100" name="video" placeholder="Video Title" type="text">
    </div>

注意： 如果你想获取标题/标题等视频信息，你应该使用他们的 API

Answer 2

方法一： 使用onchange事件，在函数中传入$this，然后获取$this值，将iframe src更改为的新值$这个。

方法 2（在您的代码中添加一些模块）：

      <div class="modal-body">
            <div class="form-group">
                <label for="video-url">Paste a Vimeo or YouTube video URL here</label>
                 <input class="form-control" id="video" name="video" onchange="displayIt(); return false;" placeholder="Video URL" type="url">
            </div>
            <div id="videocontainer" style="display: none;">
                <div class="form-group">
                    <div id="video-preview"></div>
                </div>
                <div class="form-group">
                    <label for="video-title">Caption/Title</label>
                    <input class="form-control" id="video-title" maxlength="100" name="video" placeholder="Video Title" type="text">
                </div>
            </div>

        <script>


    function displayIt(){
        var url =$('#video').val();
        $('<iframe src="'+ url +'" frameborder="0" scrolling="no"></iframe>').appendTo($('#video-preview'));
        $('#videocontainer').css('display', 'block');
alert('you should put your hand to learn jquery not to wait for full solutions, this is a quite a beginner question, only append iframe to the div with the new value')

    }
    </script>