اضافه کردن ترجمه یا ساب تایتل به ویدئو های خود در html5

یک پلاگین جی کوئری  به اسم cue-points  که با کمک html5 به شما این قابلیت رو میده که به ویدئو های خودتون ترجمه یا به عبارت درست (sub Title ) اضافه کنید.

نحوه کارش هم بسیار آسون هست. کافیست پس از ضمیمه کردن پلاگین به صفحه تون کد زیر را وارد کنید.


$(document).ready(function(){
  var slides = {5:"Hello World"}
  cuepoint.init(slides);
  cuepoint.play();
});

جهت دریافت پلاگین به اینجا مراجعه کنید

نحوه نصب و راهندازی jquery

در شروع کار با jquery اول باید jquery رو نصب کنیم. البته اصطلاح نصب درست نیست. اما چیزی جایگزین پیدا نکردم.
در مرحله اول نیاز هست شما آخرین نسخه کتابخانه jquery رو از سایت jquery.com دانلود کنید. کافیه وارد سایت بشید و در منو های بالای سایت گزینه دانلود رو انتخاب کنید.

در حالت کلی سه مدل برای دانلود وجود دارد :
۱-  Minified : که خیلی فشرده شده و برای استفاده تجاری استفاده میشه و ۱۵ کیلوبایت هم می باشد.(به دلیل لود شدن سریع)

۲- Uncompressed : که به صورت غیر فشرده هست و حجمش حدود ۹۴ کیلو بایت می باشد. و برای توسعه یا فراگیری مورد استفاده قرار میگیرد.

۳- Packed :  حجمی حدود ۲۹ کیلوبایت داره و به صورت gzip فشرده نشده

در حال حاضر آخرین نسخه jquery ورژن ۱.۲.۳ هست.

بعد از دانلود شما باید کتابخانه را در صفحات خود نصب کنید .

طریق نصب در صفحات همانند کد های زیر می باشد.

اما نحوه نوشتن کدها : در ۲ حالت ما میتونیم کدهای خودمون رو بنویسیم ۱. به صورت inline : یعنی کدها رو در همون صفحه تایپ کنیم. من پیشنهاد میدم از این روش کمتر استفاده کنید. و سعی کنید زمانی استفاده کنید که کد مربوز به همین صفحه باشه. اگر قرار کد یا تابعه ای که می نویسید در صفحات دیگر هم استفاده شوند. حتما از روش دوم استفاده کنید. ۲. به صورت  external :  در این حالت شما یک فایل با پسوند sample.js  ایجاد میکنید. و تمامی کد های خود را در این فایل مینویسید. و سپس فایل sampale.js را در صفحات خود فراخوانی میکنید. بصورت زیر :

<html>
<head>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script src="path/to/sample.js" type="text/javascript"></script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>

و یک پیشنهاد دیگر سعی کنید تمام کد هاتون به صورت تابع نوشته بشه . تا بهینه تر بتونید استفاده کنید.

خوب ما موفق به نصب جی کوئری شدیم. فردا اولین کد خودمون را خواهیم نوشت

مقدمات یادگیری JQUERY

همینطور که میدونیم JQUERY یک کتابخانه جاوا اسکریپت هست . پس نیاز هست مقداری آشنایی با این زبان کلاینت ساید داشته باشید.

اما از همه مهمتر  شما باید با تگ ها و المنت های html و xhtml  آشنایی داشته باشیم. در این پست سعی می کنم موارد ضروری، که باید حتما بلد باشید رو مختصری توضیح میدهم!!

هر عنصر یا المنت می توانید دارای بخش های زیر باشد.

۱- صفات (Attribute’s) : شامل صفت هایی هستند که ما به عنصرهای داخل صفحات میدهیم. مانند title,dir,lang, hight,widthو
name ……


<div dir="rtl" lang="fa" title="hello"></div>

نکته : در خیلی از عنصر ها صفات خاص دارند یا صفاتی که در سایر عنصر ها هستند رو ندارند.

۲- شناسه یکتا ( ID ) : ما می توانیم به هر عنصر یک شناسه یکتا اختصاص بدیم تا بتونیم به راحتی از سایر عنر های هم نوع شناسایی و انتخاب کنیم


<div id="maindiv"></div>

۳- کلاس (class) : تعریف کلاس هم یک نوع شناسه هست. هم میتواند یکتا باشد. هم یکتا نباشد. و بیشتر در صفحاتی که بر پایه css طراحی می شود استفاده می شود.


<div class="hidediv"></div>

۴- سبک (style) : به کمک این صفت می توانید صفاتی که برای ظاهر عنصر مورد استفاده میگیرند رو در این صفت و inline قرار بدید


<div style="width:30px; height:40px; background:#CCCCCC;"></div>

سوال اینجاست اینها به چه درد ما میخوره؟!

سوال خوبی هست. باید خدمتتون عرض کنم که برای کنترل عنصر ها توسط جاوا اسکریپت ما نیاز داریم که بتونیم عنصر مورد نظرمون رو سریع پیدا کنیم. راه های زیادی هست برای شناسایی. شاید سریع ترین راهی که مد نظرتون بیاد این هست که ما میتوانیم کل عنصر ها رو اسکن کنیم و عنر مورد نظر رو پیدا میکنیم. اما به نظر شما این کار درست و بهینه ای هست؟ شاید در صفحای که ما میخواهیم این کار رو انجام بدیم صدها عنصر همانند وجود داشته باشه؟ اونقت به نظر شما چه مقدار وقت باید صرف پیدا کردن عنصر مورد نظرمون بکنیم؟

در مطلب بعدی خواهیم دید که ما توسط jquery  چه طور به کمک موارد بالا یعنی شناسه ها ، کلاسها یا نوع عنصر به راحتی عنصر مورد نظرمون رو پیدا خواهیم کرد.