کے لئے اپنے بلاگ کے پہلے میں پی سی پرو ، ویب ڈویلپر ایان ڈیولن HTML5 کے ذریعہ آپ کی ویب سائٹ میں ویڈیو کو ایمبیڈ کرنے کا طریقہ سے پتہ چلتا ہے
میں کیسے ٹکٹوک پر رواں دواں ہوں
شاید HTML5 کی سب سے بڑی اور بات کی جانے والی خصوصیت سرایت شدہ ویڈیو ہے۔ فی الحال ، آپ کی ویب سائٹ میں ویڈیو مواد شامل کرنے کا واحد طریقہ یہ ہے کہ فلیش ، کوئیک ٹائم یا ریئل پلیئر جیسے تھرڈ پارٹی پلگ ان کے ساتھ۔ HTML5 کے طلوع ہونے اور ویڈیو عنصر کے ساتھ ، ویب براؤزر کے ذریعہ ویڈیو سپورٹ کو سنبھالنے کے ساتھ ، کسی تیسری پارٹی کی حمایت کی ضرورت کو ختم کرتے ہوئے ، یہ سب بدل جائے گا۔
متعدد ویب براؤزر پہلے سے ہی HTML5 کے لئے تعاون کی پیش کش کرتے ہیں۔ یہاں ہم انکشاف کرنے جارہے ہیں کہ آپ پلگ ان فری ویڈیو کو کس طرح اپنی سائٹ میں شامل کرسکتے ہیں اور جن مسائل کا سامنا کرنا پڑتا ہے۔
فائل کی اقسام اور براؤزر کی مطابقت
شروع کرنے کے لئے ، ہم مختصر طور پر مختلف فائل فائل کی اقسام پر ایک نظر ڈالیں گے جو HTML5 میں تعاون یافتہ ہیں۔ یہ تھیورا OGG اور H.264 (.mp4) ہیں۔ مختلف براؤزر مختلف اقسام کی حمایت کرتے ہیں ، اور کچھ کسی کی بھی حمایت نہیں کرتے ہیں۔ مندرجہ ذیل ٹیبل اس کی نشاندہی کرتی ہے:
| تھیورا او جی جی | H.264 (mp4) | |
|---|---|---|
| فائر فاکس 3.5+ | ✓ | ایکس |
| کروم 3+ | ✓ | ✓ |
| سفاری 3+ | ایکس | ✓ |
| اوپیرا 10.5+ | ✓ | ایکس |
| انٹرنیٹ ایکسپلورر 8 | ایکس | ایکس |
| انٹرنیٹ ایکسپلورر 9 | ایکس | ✓ |
| آئی فون | ایکس | ✓ |
| انڈروئد | ایکس | ✓ |
کوڈیکس اور دیگر تکنیکی امور
HTML5 خود استعمال کرنے کے لئے ویڈیو کوڈ کی وضاحت نہیں کرتا ہے ، اور اس کی وجہ سے دلائل پیدا ہوگئے ہیں ویب کے لئے استعمال کرنے میں بہترین . لہذا تمام براؤزرز کا احاطہ کرنے کے لئے ، ہمیں دونوں کوڈیکس کی مدد کرنی ہوگی۔
اور پھر یقینا there انٹرنیٹ ایکسپلورر ہے۔ اس وقت ، انٹرنیٹ ایکسپلورر کے جاری کردہ ورژنز میں سے کوئی بھی ویڈیو عنصر کی حمایت نہیں کرتا ہے اور اب بھی ویڈیو چلانے کے لئے پلگ ان کی ضرورت نہیں ہے۔ انٹرنیٹ ایکسپلورر 9 (ممکنہ طور پر اگلے سال کے اوائل) کی ریلیز کے ساتھ یہ تبدیل ہوجائے گا ، جب H.264 کو سپورٹ کیا جائے گا ، اس کے ساتھ ساتھ بہت سے HTML5 سامان بھی حاصل ہوں گے۔
اگر آپ حیران ہیں کہ کس طرح ، آپ اپنی ویڈیو فائلوں کو OGG میں تبدیل کرسکتے ہیں (آپ Theora OGG قسم کے بارے میں مزید پڑھ سکتے ہیں TheoraCookbook ) فائلوں کو استعمال کرتے ہوئے میرو ویڈیو کنورٹر .
ویڈیو عنصر اور کوڈیکس کے بارے میں مزید گہرائی سے متعلق معلومات کے ل over ، ویب میں ویڈیو: HTML5 میں ڈوبکی بذریعہ مارک پیلگرام۔
HTML5 کوڈ
اب ہم اصل HTML5 کوڈ کی طرف بڑھتے ہیں اور ہم کام کرنے کا طریقہ کیسے حاصل کرسکتے ہیں۔ HTML5 ہمیں دو نئے عناصر فراہم کرتا ہے جن کا استعمال ہم اپنے ویب صفحات میں ویڈیو شامل کرنے کے لئے کر سکتے ہیں: عنصر ، جس کا ہم پہلے ذکر کر چکے ہیں ، اور عنصر آئیے ان میں سے ہر ایک کو بدلے میں دیکھیں۔
عنصر
ویڈیو عنصر میں درج ذیل خصوصیات شامل ہوسکتی ہیں۔
| وصف | تفصیل |
|---|---|
| src | خود ویڈیو فائل کا ایک درست URL |
| آٹو پلے | ایک بولین اس بات کی نشاندہی کرتا ہے کہ آیا ویڈیو خود بخود چلائی جانی چاہئے |
| کنٹرول | ایک بولین جس میں یہ ظاہر ہوتا ہے کہ پہلے سے طے شدہ میڈیا کنٹرول براؤزر کے ذریعہ دکھائے جائیں |
| لوپ | ایک بولین اس بات کی نشاندہی کرتا ہے کہ آیا ویڈیو بار بار چلائی جانی چاہئے |
| پری لوڈ | براؤزر کی طرف اشارہ کرتا ہے کہ آیا ویڈیو کو خود ہی پہلے سے ڈاؤن لوڈ کرنے کی ضرورت ہے ، یا اگر صرف میٹا ڈیٹا ہی سب کی ضرورت ہے۔ ممکنہ اقدار یہ ہیں:
|
| پوسٹر | جب کوئی ویڈیو ڈیٹا دستیاب نہیں ہوتا ہے تو ظاہر کرنے کے لئے کسی تصویری فائل کا URL |
| چوڑائی | ویڈیو کی چوڑائی ، CSS پکسلز میں |
| اونچائی | ویڈیو کی اونچائی ، CSS پکسلز میں |
اس سے ، یہ دیکھا جاسکتا ہے کہ کسی ویڈیو عنصر کو تنہا استعمال کرتے ہوئے اپنی ویب سائٹ میں OGG ویڈیو شامل کرنا کتنا آسان ہے:
واقعی بس اتنا ہے۔
کوئی بھی براؤزر جو تھیوری او جی جی فارمیٹ کی حمایت کرتا ہے اب کامیابی کے ساتھ آپ کی ویڈیو کو ڈسپلے کرنا چاہئے اور بغیر کسی اڈو کے چلانا چاہئے۔ یقینا یہ اتنا آسان نہیں ہے ، کیونکہ جیسا کہ ہم اوپر ٹیبل سے دیکھ چکے ہیں ، کوڈ صرف فائر فاکس ، کروم اور اوپیرا میں کام کرتا ہے۔ تو ہمیں H.264 پر بھی فال بیک بیک کرنے کی ضرورت ہے۔ یہ | _ _ + _ | کا استعمال کرتے ہوئے حاصل کیا جاسکتا ہے عنصر ، جو ہمیں ویڈیو عنصر کے لئے متعدد میڈیا ذرائع کی وضاحت کرنے کی سہولت دیتا ہے۔
کیسے دیکھیں کہ کتنے لوگ بھاپ پر کھیل کھیل رہے ہیں
عنصر
ماخذ عنصر میں درج ذیل خصوصیات ہیں:
| وصف | تفصیل |
|---|---|
| src | میڈیا کے لئے ایک درست URL (اس صورت میں ویڈیو) خود فائل کریں |
| قسم | میڈیا فائل کی قسم جو ہونی چاہئے MIME قسم ، جیسے۔ |
| نصف | میڈیا وسائل کی مطلوبہ میڈیا قسم دیتا ہے اور لازمی طور پر ایک درست ہونا چاہئے میڈیا استفسار ، جیسے۔ type='video/ogg' اشارہ کرتا ہے کہ ویڈیو ہینڈ ہیلڈ آلات یا type='video/ogg; codecs='theora, vorbis' کے لئے موزوں ہے جو اس بات کی نشاندہی کرتا ہے کہ ویڈیو 720 پکسلز یا اس سے زیادہ کی اسکرینوں کے لئے موزوں ہے۔ |
نوٹ: کہ ماخذ عنصر باطل ہے اور اس کا آغاز ٹیگ ہے لیکن بند ہونے والا کوئی ٹیگ نہیں ہے
ماخذ عنصر کے بارے میں سب سے مفید چیز یہ ہے کہ ہم اسے مختلف فائل کی قسموں کو اسٹیک کرنے کے ل use استعمال کرسکتے ہیں ، اور براؤزر کو ہر ایک کو بدلے میں آزمانے کی اجازت مل جاتی ہے جب تک کہ اسے تلاش نہیں ہوسکے۔
استعمال اور ساتھ
ویڈیو عنصر کے اندر مختلف اقسام میں ویڈیو اسٹیک کرنے کے ل we ، ہم مندرجہ ذیل کوڈ درج کرتے ہیں۔
media='handheld'
مذکورہ کوڈ اب انٹرنیٹ ایکسپلورر کے سوا تمام براؤزرز میں کام کرے گا ، جو مذکورہ بالا پیغام کو ظاہر کرے گا۔
آپ HTML5 ٹیسٹ ویڈیو پیج کو دیکھ کر خود ہی اس کی جانچ کرسکتے ہیں ، جس میں تورا OGG اور MP4 دونوں شکلوں میں تتلی کا نمونہ ویڈیو ہوتا ہے ، لہذا اگر آپ اسے فائر فاکس ، کروم ، سفاری ، اوپیرا یا آئی فون پر دیکھ رہے ہو Android ہینڈسیٹ ، آپ کو اسے دیکھنے کے قابل ہونا چاہئے۔
آپ کے مابین تیز چھریوں پر اب معلوم ہوگا کہ ہم اس اسٹیکنگ کا فائدہ اٹھا سکتے ہیں اور نچلے حصے میں فلیش (یا کچھ اور پلگ ان) پر فال بیک ہوسکتے ہیں اس کے بجائے افسوس کہ آپ یہ ویڈیو پیغام نہیں دیکھ سکتے ، مندرجہ ذیل کوڈ کا استعمال کرکے :media='all and (min-device-height:720px)'
نتیجہ اخذ کرنا
جیسا کہ زیادہ تر HTML5 عناصر کی طرح ، ماخذ اور ویڈیو عناصر کے لئے براؤزر کا تعاون فی الحال پیچیدہ ہے۔ اس وقت ایک بڑی بحث یہ بھی چل رہی ہے کہ آیا ویب سائٹ میں ویڈیو مواد شامل کرنے کا سب سے مقبول طریقہ کے طور پر ماخذ عنصر فلیش کے استعمال کو ختم کردے گا۔ مجھے یقین نہیں ہے کہ یہ فلیش کو مکمل طور پر ختم کردے گی ، لیکن اس کے باوجود مجھے یہ کہنا مناسب ہے کہ یہ یہاں رکنا ہے اور ویب ڈویلپرز کو ویڈیو کو سرایت کرنے کے لئے صاف ستھرا ، آسان طریقہ فراہم کرے گا۔
