محتوای ویدیویی و صوتی در HTML – راهنمای کاربردی


در بخش قبلی از این سری مقالات راهنمای کاربردی HTML با روش درج تصاویر ساده در صفحات وب آشنا شدیم. گام بعدی شروع به افزودن محتوای ویدئویی و صوتی در سندهای HTML است. در این مقاله این کار را با استفاده از عناصر <video> و <audio> اجرا میکنیم. سپس با روش اضافه کردن زیرنویس و عنوان به ویدیوها نیز آشنا میشویم.
پیشنیازها
- سواد مقدماتی رایانه
- نصب برخی نرمافزارهای پایه
- دانش پایه از مبانی HTML و تصاویر در آن
هدف از این نوشته آشنایی با روش جاسازی محتوای ویدیویی و صوتی در یک صفحه وب و افزودن عنوان و زیرنویس به ویدئو است.
محتوای ویدیویی و صوتی روی وب
توسعهدهندههای وب برای مدتهای مدیدی آرزو داشتند که بتوانند محتوای ویدئویی و صوتی روی وب داشته باشند. این اشتیاق از اوایل دهه 2000 آغاز شد که پهنای باند کاربران اینترنت آن قدر سرعت یافته بود که از هر نوع ویدئویی پشتیبانی کند (فایلهای ویدئویی بسیار حجیمتر از متن و حتی تصاویر هستند). در روزهای نخست، فناوریهای ساده وب مانند HTML توانایی جاسازی ویدئو و صوت را روی وب نداشتند، از این رو فناوریهای شخص ثالث (و با مبتنی بر افزونه) مانند Flash و در ادامه Silverlight برای مدیریت این نوع محتواها محبوبیت زیادی یافتند. این نوع فناوری به خوبی کار میکرد؛ اما چندین مشکل وجود داشت که شامل عدم کارکرد صحیح ویژگیهای HTML و CSS، مسائل امنیتی و مشکلات دسترسپذیری بود.
یک راهحل بومی در صورت برخورد صحیح میتوانست این مشکلات را حل کند. خوشبختانه چند سال بعد، با معرفی مشخصات HTML5 روشن شد که این ویژگیها به HTML نسخه جدید اضافه شدهاند. بدین ترتیب عناصر <video> و <audio> و برخی API-های جدید جاوا اسکریپت برای کنترل آنها، این وظیفه را بر عهده گرفتند. ما در این مقاله به بررسی بخش جاوا اسکریپت نمیپردازیم و صرفاً کارکردهای سادهای که با استفاده از HTML قابل دستیابی است را بررسی میکنیم.
ما به شما نشان نمیدهیم که چگونه فایلهای ویدئویی و صوتی را تولید کنید، چون این کار نیازمند مجموعه مهارتهای کاملاً متفاوتی است. در این مقاله برخی محتواهای ویدئویی و صوتی ساده و کدهای نمونه لازم را در اختیار شما قرار میدهیم تا آنها را مورد آزمایش قرار دهید. این موارد را میتوانید با مراجعه به این صفحه گیتهاب (+) دانلود کنید.
ارائه دهندگان آنلاین ویدیو (OVP-ها)
پیش از آغاز مطالعه این مقاله باید به اطلاع شما برسانیم که برخی OVP-ها (ارائهدهندگان آنلاین ویدئو) مانند YouTube ،Dailymotion و Vimeo و همچنین ارائهدهندگان صوت آنلاین مانند Soundcloud وجود دارند که روشی آسان و راحت برای میزبانی و مصرف ویدئوها ارائه میکنند و از این رو لازم نیست در مورد مصرف پهنای باند بالای این فایلها نگرانی داشته باشید. OVP-ها حتی به طور معمول کدهای آماده جاسازی ویدئو/صوت را در صفحههای وب ارائه میکنند. اگر میخواهید از این مسیر استفاده کنید، میتوانید از برخی دشواریهایی که در این مقاله معرفی میشوند اجتناب کنید. این نوع سرویسها را در بخشهای بعدی این سری مقالات مورد بررسی قرار خواهیم داد.
عنصر <video>
عنصر <video> امکان جاسازی ویدئو را به روشی بسیار آسان فراهم ساخته است. یک مثال بسیار ساده به صورت زیر است:
ویژگیهای کد فوق در ادامه توضیح داده شده است:
src
این خصوصیت همانند عنصر <img> عمل میکند و به عنوان منبع ویدئو شامل مسیری به ویدئویی است که قرار است در صفحه وب جاسازی شود. روش کار آن نیز کاملاً مشابه است.
controls
کاربران باید بتوانند ویدئوها و صوتهایی را که پخش میشود را کنترل کنند. به طور خاص این امکان برای کاربرانی که دچار «صرع» (Epilepsy) هستند بسیار ضروری است. شما یا باید از خصوصیت controls استفاده کنید تا رابط کنترل خود مرورگر استفاده شود یا رابط خاص خود را با استفاده از API جاوا اسکریپت مناسب بسازید. دستکم رابط باید شامل روشی برای آغاز و توقف رسانه باشد و همچنین سطح صدا را تنظیم کند.
پاراگراف درون تگهای <video>
این پاراگراف به نام «محتوای جایگزین» (fallback content) در صورتی نمایش مییابد که مرورگر مورد استفاده برای مشاهده صفحه وب از عنصر <video> پشتیبانی نکند و بدین ترتیب میتوانیم در مورد مرورگرهای قدیمی یک توضیح در خصوص ویدئو ارائه کنیم. این توضیح میتواند هر چیزی که دوست دارید باشد. برای مثال میتواند یک لینک مستقیم برای دانلود ویدئو باشد که کاربر میتواند دستکم، صرف نظر از نوع مرورگری که استفاده میکند، ویدئو را دانلود کرده و روی سیستم خود تماشا کند.
ویدئوی جاسازیشده به این ترتیب چیزی مانند زیر خواهد بود:
کد مربوط به این پخشکننده به صورت زیر است:
پشتیبانی از چندین قالب
در مثال فوق یک مشکل وجود دارد که احتمالاً متوجه آن شدهاید. اگر تلاش کنید به لینک زنده فوق دسترسی پیدا بکنید در مرورگرهایی مانند سافاری یا اینترنت اکسپلورر ویدئو پخش نمیشود. دلیل این امر آن است که مرورگرهای مختلف از قالبهای ویدئویی (و صوتی) مختلفی پشتیبانی میکنند.
در این بخش توضیحات مختصری در مورد اصطلاحهای مرتبط با قالببندی ویدئوها و صوتها ارائه میکنیم. قالبهایی مانند MP3، MP4 و WebM به نام «قالبهای کانتینر» (container formats) نامیده میشوند. این قالبها شامل بخشهای مختلفی هستند که کنار هم قرار میگیرند تا یک ترانه یا ویدئو را تشکیل دهند. برای مثال یک ترک صوتی یا ترک ویدئویی ایجاد میشود و «فراداده» (metadata)-ای نیز برای توصیف آن رسانه ارائه میشود.
ترکهای ویدئویی و صوتی در قالبهای متفاوتی مانند موارد زیر هستند:
- کانتینر WebM به صورت معمول برای بستهبندی صداهای Ogg Vorbis با ویدئوی VP8/VP9 استفاده میشود. این قالب به طور عمده از سوی مرورگرهای فایرفاکس و کروم پشتیبانی میشود.
- یک کانتینر MP4 در اغلب موارد صداهای AAC یا MP3 را با ویدئوی H.264 بستهبندی میکند. این قالببندی نیز به صورت عمده از سوی اینترنت اکسپلورر و سافاری پشتیبانی میشود.
- کانتینر قدیمیتر Ogg صداهای Ogg Vorbis و ویدئوهای Ogg Theora را عرضه میکند که به صورت عمده از سوی فایرفاکس و کروم پشتیبانی میشوند؛ اما اساساً به دلیل عرضه قالب بهتر WebM پشتیبانی از آنها تعلیق شده است.
پخشکننده صوتی
یک پخشکننده صوتی معمولاً ترکهای صوتی مانند فایلهای MP3 یا Ogg را به صورت مستقیم پخش میکند و به هیچ کانتینری نیاز ندارد.
نکته: البته موضوع قالبهای صوتی و ویدئویی به این سادگیها هم نیست و پیچیدگیهای زیادی دارد. علاوه بر آن مرورگرهای موبایل مختلف میتوانند با واگذاری کار به برخی پلیرهای سیستم امکان پخش برخی قالبها را پیدا بکنند. اما فعلاً به همین مقدار کفایت میکنیم.
قالبهایی که در بخش فوق اشاره شد، جهت فشردهسازی صوت و ویدئو در چند مگابایت طراحی شدهاند چون صدا یا ویدئوی خام بسیار حجیم خواهد بود. مرورگرها Codec های مختلفی مانند Vorbis یا H.264 را شامل میشوند که برای تبدیل صدا و تصویر فشرده شده به ارقام باینری و بر عکس استفاده میشوند. همان طور که قبلاً اشاره کردیم، متأسفانه مرورگرها از کدکهای یکسانی پشتیبانی نمیکنند و از این رو باید چندین فایل برای هر رسانه ارائه شوند. اگر کدک مناسب در رسانه موجود نباشد، روی مرورگر پخش نخواهد شد.
نکته: ممکن است از این وضعیت بغرنج دچار حیرت شده باشید. MP3 (برای صوت) و MP4/H.264 (برای ویدئو) هر دو به صورت گستردهای پشتیبانی میشوند و کیفیت مناسبی دارند. با این وجود، آنها نیز از مشکل پتنت رنج میبرند. پتنت های آمریکایی دستکم تا سال 2017 از فرمت MP3 حفاظت میکنند و این موضوع در مورد MP4 و H.264 دستکم تا سال 2027 تداوم دارد و این به آن معنی است که مرورگرهایی که پتنت را ندارند، باید مبالغ بسیار زیادی از پول را برای پشتیبانی از قالبها بپردازند. به علاوه، افراد زیادی از این نرمافزارها به دلیل حمایت از قالبهای باز احتراز میکنند. به همین جهت است که باید چندین قالب را برای مرورگرهای مختلف ارائه کنیم.
قالبهای چندگانه
چگونه میتوان قالبهای چندگانه برای فایلهای صوتی و ویدئویی ارائه کرد. روش کار به صورت زیر است:
در این کد ما خصوصیت src را در خارج از تگ <video> واقعی نگه میداریم و به جای آن عناصر <source> مختلفی را داخل تگ اصلی قرار دادهایم تا منابع مختلفی عرضه شوند. در حالتی که مرورگرها به عناصر <source> برسند، نخستین موردی را که کدکشان پشتیبانی میکند پخش میکنند. امروزه گنجاندن منابع WebM و MP4 برای پخش ویدئو روی اغلب پلتفرمها و مرورگرها کفایت میکند.
هر عنصر <source> یک خصوصیت type نیز دارد. این خصوصیت اختیاری است؛ اما توصیه شده که از آن استفاده کنید و شامل انواع MIME فایلهای ویدئو است. مرورگرها میتوانند این موارد را خوانده و بیدرنگ ویدئوهایی را که درک نمیکنند متوقف کنند. اگر این خصوصیت ذکر نشده باشد، مرورگرها هر فایلی را که میبینند بارگذاری کرده و شروع به پخش میکنند تا این که نوع مناسب را پیدا کنند و بدین ترتیب زمان و منابع کاربر به هدر میرود.
ویژگیهای دیگر <video>
چند ویژگی دیگر نیز برای یک عنصر ویدئو HTML5 وجود دارند که در مثال زیر آنها را بررسی میکنیم:
کد فوق خروجی مانند زیر به دست میدهد:
این ویژگیهای جدید شامل موارد زیر هستند:
Width و Height: شما میتوانید اندازه ویدئو را با استفاده از این خصوصیتها و یا از طریق CSS کنترل کنید. در هر دو حالت، ویدئوها نسبت عرض-ارتفاع ذاتی خود را که به نام aspect ratio شناخته میشود، حفظ میکنند. اگر این نسبت ابعاد از طریق اندازههایی که ذکر کردهاید حفظ نشود، عرض ویدئو آن قدر افزایش مییابد که فضای اشغال نشده پر شود و پسزمینه یک رنگ ثابت پیدا میکند.
autoplay: این خصوصیت موجب میشود که صوت یا ویدئو به محض این که همه بخشهای صفحه بارگذاری شدند شروع به پخش بکند. توصیه شده است که از این خصوصیت پخش خودکار ویدئو (یا صوت) روی سایتهای خود استفاده نکنید چون کاربران آن را واقعاً آزاردهنده میدانند.
loop: این خصوصیت باعث میشود که ویدئو (یا صوت) در زمانی که به پایان میرسد مجدداً از نو پخش شود. این امر نیز میتواند آزاردهنده باشد و از این رو تنها در موارد واقعاً ضروری باید از آن استفاده کرد.
muted: این خصوصیت باعث میشود که صدای رسانهای که پخش میشود به صورت پیشفرض قطع باشد.
poster: این خصوصیت یک URL تصویر دریافت میکند که پیش از نمایش ویدئو نمایش پیدا خواهد کرد. این تصویر به عنوان صفحه ابتدایی یا تبلیغاتی برای ویدئو عمل میکند.
preload: این خصوصیت در عنصری استفاده میشود که قرار است فایلهای بزرگی را بافر کند. این خصوصیت میتواند یکی از سه مقدار زیر را بگیرد:
- "none" فایل را بافر نمیکند.
- "auto" فایل رسانه را بافر میکند.
- "metadata" تنها فراداده فایل را بافر میکند.
کد منبع مثال فوق به صورت زیر است:
دقت کنید که خصوصیت autoplay در نسخه فوق گنجانده نشده است. اگر ویدئوها به محض بارگذاری صفحه شروع به پخش شدن بکنند دیگر نمیتوانید poster را ببینید.
عنصر <audio>
عنصر <audio> دقیقاً به همانند عنصر <video> عمل میکند. تنها چند تفاوت کوچک وجود دارد که در ادامه توضیح دادهایم. به مثال زیر توجه کنید:
این مثال تصویری مانند زیر را در مرورگر ایجاد میکند:
همان طور که میبینید این پخشکننده فضای کمتری نسبت به پخشکننده ویدئویی اشغال میکند، زیرا هیچ مؤلفه بصری ندارد و صرفاً کنترلهایی برای پخش صوت را نمایش میدهد. تفاوتهای دیگر از ویدئوی HTML5 به صورت زیر هستند:
- عنصر <audio> از خصوصیتهای width یا height پشتیبانی نمیکند. در این مورد نیز هیچ مؤلفه بصری وجود ندارد و از این رو چیزی وجود ندارد که برای آن عرض و ارتفاعی تعیین کنیم.
- عنصر <audio> از خصوصیت poster نیز پشتیبانی نمیکند، زیرا هیچ مؤلفه بصری ندارد.
به جز این موارد، عنصر <audio> از همه ویژگیهایی عنصر <video> پشتیبانی میکند. برای کسب اطلاعات بیشتر در این مورد میتوانید بخشهای فوق را مرور کنید.
از سرگیری بازپخش رسانه
هر زمان میتوان پخش رسانه را از سر گرفت و این وضعیت شامل فرایند انتخاب بهترین منبع رسانه نیز میشود. اگر بیش از یک <source> برای یک عنصر تعیین شده باشند، با فراخوانی متد ()load برای آن عنصر این کار صورت میپذیرد:
تشخیص حذف یا اضافه شدن یک قطعه
شما میتوانید فهرست ترکهای یک عنصر رسانهای را در موارد حذف با اضافه شدن ترکها مورد نظارت قرار دهید. برای نمونه میتوانید رویداد addtrack را رصد کنید تا به HTMLMediaElement.audioTrackList t ارسال شود و از زمانی که ترکهای صوتی به رسانه اضافه میشود، اطلاع پیدا کنید.
در مستندات مربوط به TrackEvent در این خصوص میتوانید اطلاعات بیشتری کسب کنید.
نمایش قطعههای ویدئویی با متن
اینک نوبت آن رسیده که مفاهیم نسبتاً پیشرفتهتر را که دانستن آنها واقعاً مفید است مورد بررسی قرار دهیم.
اغلب افراد نمیتوانند و یا نمیخواهند محتوای صوتی/تصویری را روی وب گوش داده یا تماشا کنند یا دستکم در برخی مواقع چنین چیزی را نمیخواهند. برای نمونه:
- افراد زیادی دارای معلولیت شنوایی هستند و از این رو نمیتوانند فایلهای صوتی را گوش دهند.
- افراد دیگری هستند که ممکن است نتوانند به فایلهای صوتی گوش دهند، زیرا در محیط شلوغی هستند یا ممکن است در جای خلوتی باشند و نخواهند افراد پیرامون را دچار اذیت بکنند.
- برخی افراد که زبان ویدئوی پخششده را نمیفهمند ممکن است نیاز به زیرنویس و یا حتی ترجمه داشته باشند تا بتوانند از محتوای آن رسانه مطلع شوند.
در این موارد ارائه یک زیرنویس برای کلماتی که در صوت یا ویدئو گفته میشود مفید خواهد بود. به لطف فناوری HTML5 شما میتوانید در قالب WebVTT و عنصر <track> این کار را انجام دهید.
نکته: منظور از «رونویسی» (Transcribe) نوشتن کلمات بیانشده در صوت یا ویدئو به صورت مکتوب است. نتیجه کار نیز «رونویس» (transcript) نامیده میشود.
WebVTT قالبی برای نوشتن فایلهای متنی شامل چند رشته از متن همراه با فرادادههایی مانند زمان بیان متن و حتی برخی اطلاعات محدود سبکبندی/موقعیتیابی متن است. این رشتههای متنی به نام cues شناخته میشوند و میتوانند برای مقاصد مختلفی انواع متفاوتی داشته باشند. انواع متداول به صورت زیر هستند:
«زیرنویس» (subtitle): زیرنویس به ترجمه متون خارجی برای افرادی که کلمات بیانشده در صدا را درک نمیکنند گفته میشود.
«عنوان» (caption): رونویسیهای همگامسازی شده از یک دیالوگ یا توصیفهای اصوات مهم است که به افرادی که امکان شنیدن صدا را ندارند اجازه میدهد درک کنند چه اتفاق در حال رخ دادن است.
توصیفهای زماندار: متن مکالمههای درون صدا نوشته میشود تا به افراد دچار نقص بینایی کمک کند، آن چه را روی صحنه رخ میدهد درک کنند.
یک WebVTT معمولی چیزی مانند زیر است:
WEBVTT 1 00:00:22.230 --> 00:00:24.606 This is the first subtitle. 2 00:00:30.739 --> 00:00:34.074 This is the second. ...
برای این که همراه با پخش رسانه HTML نمایش پیدا کند باید موارد زیر را تنظیم کنید:
- آن را با قالب vtt. در یک مکان مناسب ذخیره کنید.
- در عنصر <track> به فایل vtt. لینک بدهید. <track> باید درون <audio> یا <video> قرار گیرد. اما در نهایت باید درون عناصر <source> باشد. از خصوصیت kind برای تعیین این که cue-ها به صورت subtitles ،captions یا descriptions هستند استفاده میشود. به علاوه میتوانید از srclang استفاده کرده و به مرورگر اعلام کنید که چه زبانی در زیرنویسها استفاده شده است.
مثالی از آن به صورت زیر است:
کد فوق موجب میشود که ویدئوی زیر به همراه زیرنویسها نمایش پیدا کند:
نکته: ترکهای متنی موجب بهبود وضعیت سئو نیز میشوند، زیرا موتورهای جستجو به طور خاص به متن بسیار اهمیت میدهند. ترکهای متنی به موتورهای جستجو امکان میدهند که دقیقاً به آن نقطه از ویدئو که کاربر در جستجویش است لینک بدهند.
یادگیری عملی: جاسازی صوت و ویدئو
در این بخش از یادگیری عملی میخواهیم شما را وارد دنیایی بکنیم که صوت و ویدئوی مورد نظر خود را ضبط کنید. اغلب گوشیهای تلفن همراه این روزها به سادگی امکان ضبط کردن صدا و ویدئو را به کاربران میدهند و اگر امکان انتقال آنها را به رایانه داشته باشید میتوانید از آنها استفاده کنید. برای این که این فایلها در نهایت به قالبهای MP4 یا WebM (برای ویدئو) و MP3 یا Ogg (در مورد صوت) تبدیل شوند به اندکی کار نیاز خواهید داشت؛ اما برنامههای زیادی مانند Miro Video Converter و Audacity وجود دارند که امکان انجام این کار را به روشی ساده فراهم ساختهاند.
اگر امکان عرضه هیچ صوت یا ویدئویی را به عنوان منبع ندارید، میتوانید از صداها یا ویدئوهای نمونه ما (+) برای اجرای این تمرین کمک بگیرید. همچنین میتوانید از کد ارائه شده نمونه برای ارجاع استفاده کنید.
در این تمرین قرار است کارهای زیر را انجام دهید:
- فایل صوتی یا ویدئویی خود را در دایرکتوری جدیدی روی رایانه ذخیره کنید.
- یک فایل HTML در همان دایرکتوری ایجاد کرده و آن را index.html بنامید.
- عناصر <audio> و <video> را به صفحه اضافه کنید و کاری کنید که آنها کنترلهای پیشفرض مرورگر را نمایش دهند.
- به هر دو عنصر انواعی از <source> را بدهید که مرورگرها بتوانند قالبهای صوتی مورد پشتیبانی را یافته و آن را بارگذاری کنند. این انواع باید شامل خصوصیت type باشند.
- برای عنصر <video> یک poster تعیین کنید که پیش از آغاز پخش ویدئو نمایش پیدا کند. میتوانید از گرافیکهایی که خودتان میسازید نیز استفاده کنید.
همچنین میتوانید ترکهای متنی را نیز امتحان کنید و مقداری کپشن به ویدئوی خود اضافه کنید.
سخن پایانی
امیدواریم از پخش صوت و ویدئوها در صفحههای وب لذت برده باشید.
در مقاله بعدی به بررسی روشهای جاسازی محتوا در وب با استفاده از فناوریهایی مانند <iframe> و <object> میپردازیم. برای مطالعه بخش بعدی این مجموعه مطلب آموزشی میتوانید روی لینک زیر کلیک کنید:
اگر این مطلب برای شما مفید بوده است، آموزشهای زیر نیز به شما پیشنهاد میشوند:
- مجموعه آموزشهای طراحی و توسعه پروژههای وب
- آموزش طراحی وب با HTML – مقدماتی
- مجموعه آموزشهای برنامهنویسی
- HTML و هر آنچه باید پیش از شروع یادگیری آن بدانید — راهنمای مقدماتی و کاربردی
- گنجاندن صوت و ویدیو در فایل های HTML - از صفر تا صد - مجله فرادرس
- سند و ساختار وب سایت در HTML — راهنمای کاربردی
==
سلام، امکان دانلود این ویدیوها هست؟
سلام برای دانلود یا بارگیری فایل های صوتی از کدی استفاده میشود