如何在表单上输入视频网址后不按提交按钮来预览视频

Question

请帮助我！

我正在一个网站上，用户可以通过发布网站的网址来嵌入他们的视频。我希望在输入视频网址后无需单击“提交”按钮，立即在iframe或同一页面中显示视频。这将使用户可以在单击“提交”按钮之前查看其视频的预览。

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

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

</form>  

假设网址为：

$url= $_POST["urladdress"] 

我知道可以使用javascript，jquery或ajax来实现。但是我不知道怎么做！请我真的需要你的帮助。非常感谢你！

Answer 1

您可以在输入字段上绑定更改事件。如果该字段中有任何更改，则将创建一个预览iframe（如果该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。