Javascript 添加视频URL，带有实时预览选项

我正在创建一个允许人们输入视频url的表单。标准输入表单，用于接受URL，如：

http://video.google.com/videoplay?docid=1299927595688205543

我想添加一个按钮（在表单中，类似于[预览视频]）。基本上，按钮/链接将他们输入到输入字段中的链接附加到以下代码中：

<a href="http://video.google.com/videoplay?docid=1299927595688205543&lightbox[width]=610&lightbox[height]=360" class="lightbox">google video</a >

谷歌视频

这将在提交表格之前提供。

<form id="video_upload_form" action="">
    <label for="video_input_box">Video URL</label>
    <input type="text" id="video_input_box" value="" />

    <input type="submit" value="Add Video" />
</form>

<p><a href="#" id="video_preview" class="lightbox">Preview Video</a></p>

<script type="text/javascript">
$().ready(function(){
    $('#video_upload_form').submit(function(){
        var video_url_params = '&lightbox[width]=610&lightbox[height]=360';
        var video_url = $('#video_input_box').val() + video_url_params;
        $('#video_preview').attr('href', video_url);
        return false;
    });
});
</script>

视频URL

$（）.ready（函数（））{
$（'#视频上传表格'）。提交（函数（）{
var video_url_params='&lightbox[width]=610&lightbox[height]=360'；
var video_url=$（'#video_input_box'）.val（）+video_url_参数；
$（'视频预览'）.attr（'href'，视频url）；
返回false；
});
});

这里它也是一个JSFIDLE：

---

在将用户提供的URL放入预览链接之前，您需要对其进行一些验证，但我将把这部分留给您，因为您在问题中没有要求帮助。

那么我在输入字段中输入什么呢@Treffynnon感谢您的快速响应，我正在努力找出如何在表单中添加此内容。谢谢，但链接没有传递到预览链接：我得到

我猜这就是您所说的url验证的意思？点击，哈哈，它工作了。但是我们可以编码它，这样我们就不需要点击[添加视频]按钮了。只需通过预览视频链接解析即可。您可以查看jQuery的

$.keyup

事件，在输入时获取url。我想这就是你的意思。