این مقاله چگونگی اعتبار سنجی فایل Video بدون ارسال Video به سمت سرور را ارائه می دهد .

زمانیکه یک کنترل file upload داریم و می خواهیم فایل های Video را قبل از ارسال به سرور اعتبار سنجی کنیم . به منظور یافتن راهی برای اجازه اعتبارسنجی فایل های ویدئو که قبل از ارسال به سرور  بیشتر از 2 دقیقه طول می کشد تحقیقات بسیاری انجام شده است .

نمای کاربری

در HTML 5 میتوانیم با استفاده از عنصر Video مدت زمان فایل های ویدئو را بررسی کنیم البته مشکلی که وجود دارد این است که عنصر Video می بایست با منبع تنظیم شود .

    <video controls width="500px" id="vid">  
       <source src="vid.mp4" type="video/mp4" />  
    </video>  

یعنی در ابتدا باید فایل Video برای تنظیم مشخصه src به سرور ارسال شود اما زمانیکه بیشتر از ۲ دقیقه طول می کشد overhead به سرور اضافه خواهد شد . بنابراین به راهی نیاز داریم که در سمت کاربر بررسی ها را انجام دهد .

اکنون متد ()URL.createObjectURL را فراخوانی میکنیم .

این یک روش static است که DOMstring که دارای نمایش آدرس شی  می باشد را ایجاد می کند .

به کد های زیر توجه کنید :

<div style="border:1px solid black">  
    <h3>ارسال فایل به سرور</h3>  
    <input type="file" id="fl"></input>  
    <br/>  
    <br/>  
    <input type="button" value="اعتبارسنجی" id="btn"/>  
    <br />  
    <video controls width="500px" id="vid" style="display:none"></video>  
</div>  
<script type="text/ecmascript">    
var objectUrl;    
    
$(document).ready(function(){    
$("#fl").change(function(e){    
var file = e.currentTarget.files[0];    
objectUrl = URL.createObjectURL(file);    
$("#vid").prop("src", objectUrl);    
});    
    
$('#btn').click(function(){    
var seconds = $("#vid")[0].duration;    
if(seconds <= 120)    
alert('Video duration should be more than 2 min');    
});    
    
});    
    
  
</script>  

توضیحات

-در بخش ارسال فایل به سرور یک video دریافت کرده و یک ObjectUrl آن فایل را ایجاد می کنیم .

- یک عنصر Video در صفحه اضافه کنید و بصورت Hidden نگه دارید.

- خاصیت Src عنصر Video را در هر جایی که می خواهید تنظیم کنید .