添加视频URL,并带有实时预览选项 [英] Add video URL, with live preview option
问题描述
我正在创建一个允许人们输入视频网址的表单.标准输入表单,接受如下网址:
I am creating a form which allows people to enter a video url. Standard input form, to accept a URL like:
http://video.google.com/videoplay?docid=1299927595688205543
我想添加一个按钮(在表单内,它显示[preview video]之类的内容).基本上,该按钮/链接会将在输入字段中输入的链接附加到此代码:
I would like to add a button (within the form, which says something like [preview video]). Basically that button/link appends the link they entered into the input field, to this code:
<a href="http://video.google.com/videoplay?docid=1299927595688205543&lightbox[width]=610&lightbox[height]=360" class="lightbox">google video</a >
在提交表单之前可以使用它.
This is to be available prior to form submission.
推荐答案
<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>
这里也像JSFiddle一样: http://jsfiddle.net/Treffynnon/CEMpT/
Also here it is as a JSFiddle: http://jsfiddle.net/Treffynnon/CEMpT/
在将其放入预览链接之前,您需要对用户提供的URL进行一些验证,但是由于您没有在问题中寻求帮助,因此我将把这部分留给您.
You will need to do some validation on the URL supplied by the user before putting it into the preview link, but I will leave that part up to you as you have not asked for help with it in your question.
这篇关于添加视频URL,并带有实时预览选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!