Javascript 如何在表单上键入视频url后预览视频，而无需按“提交”按钮

求你了，我需要你的帮助

我在一个网站上工作，用户只需发布他们的视频url就可以嵌入他们的视频。我希望视频在输入视频url后立即显示在iframe或同一页面中，而无需单击submit按钮。这将允许用户在点击提交按钮之前查看视频预览

<form action="post.php" method="post">

<input  type='url' name='urladdress' >

</form>  

---

我知道这可以通过javascript、jquery或ajax实现。但我不知道怎么做！求你了，我真的需要你的帮助。多谢各位

您可以在输入字段上绑定更改事件。如果字段中有任何更改，则将创建预览iframe（如果它不存在），或者src属性将更新

jQuery的一个示例：

$('input[name="urladdress"]').on('change', function() {
    if($('#video-preview').length) {
        $('#video-preview').attr('src', $(this).val());
    } else {
        $(this).after($('<iframe id="video-preview" width="854" height="480" src="' + $(this).val() + '" />'));
    }
});

---

本例仅在输入字段后添加一个iframe。

至少向我们展示您迄今为止尝试过的内容，如youtube视频？是的。youtube、openload、xvideos等等你要不要试试？经过一些修改，它可能是您所需要的。我建议您寻找jquery oembed pluginThanks，以获得您的回复！我真的很感激！如何实施变更事件？我不擅长JaveScript！thks..在示例代码中，$'input[name=urladdress]'。在'change'上，函数{}将找到具有指定name属性的输入字段，使用函数{}定义更改事件处理程序，并将处理程序绑定到输入元素。在示例代码中，如果输入字段中有任何更改，将创建或更新iframe元素

$('input[name="urladdress"]').on('change', function() {
    if($('#video-preview').length) {
        $('#video-preview').attr('src', $(this).val());
    } else {
        $(this).after($('<iframe id="video-preview" width="854" height="480" src="' + $(this).val() + '" />'));
    }
});