Question

我的HTML看起来像这样

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

我尝试在关键字功能上捕获网址，但我无法获取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
记下所使用的网址，用于嵌入浏览器中使用的普通网址

＆＃13;

$(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";
   }
  });
})

＆＃13;

<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>

＆＃13;

注意： 如果您想获取标题/标题等视频信息，则应使用其API

Answer 2

方法1：使用 onchange 事件，在函数中传递 $ this ，然后获取 $ this 值并使用新值更改iframe src $这

方法2（代码中有一些mod）：

<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>

如何在输入文本字段中粘贴网址上的Youtube iframe

2 个答案: