آموزش HTML : ویدئو و صوت HTML

حالا که با اضافه کردن تصاویر ساده به یک صفحه وب راحت شدیم، قدم بعدی اضافه کردن پخش‌کننده‌های ویدیو و صدا به اسناد HTML شماست! در این مقاله، به انجام این کار با عناصر <video> و <audio> خواهیم پرداخت؛ سپس با بررسی نحوه اضافه کردن زیرنویس/کپشن به ویدیوهای شما، کار را به پایان خواهیم رساند.

ویدئو و صدا در وب

   اولین موج ویدیوها و فایل‌های صوتی آنلاین توسط فناوری‌های اختصاصی مبتنی بر افزونه مانند فلش و سیلورلایت امکان‌پذیر شد. هر دوی این موارد دارای مشکلات امنیتی و دسترسی‌پذیری بودند و اکنون منسوخ شده‌اند و به نفع راه‌حل‌های بومی HTML مانند عناصر و و در دسترس بودن APIهای جاوا اسکریپت برای کنترل آنها، جای خود را به جاوا اسکریپت داده‌اند. ما در اینجا به بررسی جاوا اسکریپت نخواهیم پرداخت - فقط مبانی اساسی که می‌توان با HTML به آنها دست یافت. ما به شما نحوه تولید فایل‌های صوتی و تصویری را آموزش نخواهیم داد - این کار به مجموعه‌ای از مهارت‌های کاملاً متفاوت نیاز دارد.

   قبل از شروع، باید بدانید که تعداد زیادی OVP (ارائه‌دهندگان ویدیوی آنلاین) مانند YouTube، Dailymotion و Vimeo و ارائه‌دهندگان صوتی آنلاین مانند Soundcloud وجود دارند. چنین شرکت‌هایی روشی راحت و آسان برای میزبانی و استفاده از ویدیوها ارائه می‌دهند، بنابراین لازم نیست نگران مصرف پهنای باند زیاد باشید. OVPها حتی معمولاً کد آماده‌ای برای جاسازی ویدیو/صدا در صفحات وب شما ارائه می‌دهند. اگر از این مسیر استفاده کنید، می‌توانید از برخی از مشکلاتی که در این مقاله مورد بحث قرار می‌دهیم، اجتناب کنید. در مقاله بعدی کمی بیشتر در مورد این نوع خدمات صحبت خواهیم کرد.

عنصر <video>

   عنصر به شما امکان می‌دهد به راحتی یک ویدیو را جاسازی کنید. یک مثال بسیار ساده مانند این است:

Copy

HTML

   ویژگی‌هایی که باید به آنها توجه کرد عبارتند از: src به همان روشی که برای عنصر استفاده می‌شود، ویژگی src (منبع) حاوی مسیری به ویدیویی است که می‌خواهید جاسازی کنید. دقیقاً به همان روش کار می‌کند. controls کاربران باید بتوانند پخش ویدیو و صدا را کنترل کنند (این امر به ویژه برای افرادی که صرع دارند بسیار مهم است.) شما باید یا از ویژگی controls برای گنجاندن رابط کنترلی خود مرورگر استفاده کنید، یا رابط خود را با استفاده از API جاوا اسکریپت مناسب بسازید. حداقل، رابط باید شامل راهی برای شروع و توقف رسانه و تنظیم صدا باشد. پاراگراف داخل تگ‌های این محتوای جایگزین نامیده می‌شود - اگر مرورگری که به صفحه دسترسی دارد از عنصر پشتیبانی نکند، نمایش داده می‌شود و به ما امکان می‌دهد یک جایگزین برای مرورگرهای قدیمی‌تر ارائه دهیم. این می‌تواند هر چیزی باشد که دوست دارید؛ در این حالت، ما یک لینک مستقیم به فایل ویدیو ارائه داده‌ایم، بنابراین کاربر حداقل می‌تواند صرف نظر از مرورگری که استفاده می‌کند، به نحوی به آن دسترسی پیدا کند. ویدیوی جاسازی شده چیزی شبیه به این خواهد بود:

استفاده از چندین قالب منبع برای بهبود سازگاری

   در مثال بالا مشکلی وجود دارد. ممکن است ویدیو برای شما پخش نشود، زیرا مرورگرهای مختلف از فرمت‌های ویدیویی (و صوتی) متفاوتی پشتیبانی می‌کنند. خوشبختانه، کارهایی وجود دارد که می‌توانید برای جلوگیری از بروز این مشکل انجام دهید.

محتویات یک فایل رسانه‌ای

   ابتدا، بیایید به سرعت اصطلاحات را بررسی کنیم. فرمت‌هایی مانند OGG، WAV، MP4 و WebM فرمت‌های کانتینر نامیده می‌شوند. آن‌ها ساختاری را تعریف می‌کنند که در آن آهنگ‌های صوتی و/یا تصویری که رسانه را تشکیل می‌دهند، به همراه ابرداده‌هایی که رسانه را توصیف می‌کنند، کدک‌هایی که برای رمزگذاری کانال‌های آن استفاده می‌شوند و غیره ذخیره می‌شوند. یک فایل WebM حاوی فیلمی است که دارای یک آهنگ ویدیویی اصلی و یک آهنگ زاویه متناوب، به علاوه صدا برای انگلیسی و اسپانیایی، علاوه بر صدا برای یک آهنگ تفسیر انگلیسی است، می‌تواند همانطور که در نمودار زیر نشان داده شده است، مفهوم‌سازی شود. همچنین شامل آهنگ‌های متنی حاوی زیرنویس‌های بسته برای فیلم بلند، زیرنویس‌های اسپانیایی برای فیلم و زیرنویس‌های انگلیسی برای تفسیر است.

   ترک‌های صوتی و تصویری درون کانتینر، داده‌ها را در قالب مناسب برای کدکی (codec) که برای رمزگذاری آن رسانه استفاده می‌شود، نگه می‌دارند. فرمت‌های مختلفی برای ترک‌های صوتی و ترک‌های تصویری استفاده می‌شود. هر ترک صوتی با استفاده از یک کدک صوتی رمزگذاری می‌شود، در حالی که ترک‌های ویدیویی با استفاده از (همانطور که احتمالاً حدس زده‌اید) یک کدک ویدیویی رمزگذاری می‌شوند. همانطور که قبلاً در مورد آن صحبت کردیم، مرورگرهای مختلف از فرمت‌های ویدیویی و صوتی مختلف و فرمت‌های کانتینر مختلف (مانند OGG، MP4 و WebM که به نوبه خود می‌توانند شامل انواع مختلفی از ویدیو و صدا باشند) پشتیبانی می‌کنند.

   برای مثال: یک کانتینر WebM معمولاً صدای Vorbis یا Opus را با ویدیوی VP8/VP9 بسته‌بندی می‌کند. این در همه مرورگرهای مدرن پشتیبانی می‌شود، اگرچه نسخه‌های قدیمی‌تر ممکن است کار نکنند. یک کانتینر MP4 اغلب صدای AAC یا MP3 را با ویدیوی H.264 بسته‌بندی می‌کند. این نیز در همه مرورگرهای مدرن پشتیبانی می‌شود. کانتینر Ogg تمایل دارد از صدای Vorbis و ویدیوی Theora استفاده کند. این فرمت در فایرفاکس و کروم به بهترین شکل پشتیبانی می‌شود، اما اساساً با فرمت WebM با کیفیت بهتر جایگزین شده است. موارد خاصی وجود دارد. به عنوان مثال، برای برخی از انواع صدا، داده‌های یک کدک اغلب بدون یک کانتینر یا با یک کانتینر ساده ذخیره می‌شوند. یکی از این موارد، کدک FLAC است که معمولاً در فایل‌های FLAC ذخیره می‌شود که فقط آهنگ‌های خام FLAC هستند. مثال دیگر، "فایل MP3" است که همیشه محبوب است. یک "فایل MP3" یک فایل صوتی است که با استفاده از فشرده‌سازی MPEG-1 Audio Layer III رمزگذاری شده است. اگرچه می‌تواند شامل فراداده باشد، اما در یک ظرف جداگانه MPEG یا MPEG-2 محصور نشده است. پشتیبانی گسترده آن در عناصر و تا حد زیادی گواهی بر محبوبیت پایدار آن است. یک پخش‌کننده صوتی تمایل دارد یک آهنگ صوتی را مستقیماً پخش کند، مثلاً یک فایل MP3 یا Ogg. اینها به ظرف نیاز ندارند.

پشتیبانی از فایل‌های رسانه‌ای در مرورگرها

   چندین فرمت محبوب، مانند MP3 و MP4/H.264، عالی هستند اما توسط حق ثبت اختراعات محدود شده‌اند؛ یعنی حق ثبت اختراعاتی وجود دارد که بخشی یا تمام فناوری مبتنی بر آنها را پوشش می‌دهد. در ایالات متحده، حق ثبت اختراعات تا سال ۲۰۱۷ MP3 را پوشش می‌دادند و H.264 حداقل تا سال ۲۰۲۷ توسط حق ثبت اختراعات محدود شده است. به دلیل این حق ثبت اختراعات، مرورگرهایی که مایل به پشتیبانی از این کدک‌ها هستند، باید هزینه‌های مجوز معمولاً هنگفتی بپردازند. علاوه بر این، برخی از افراد ترجیح می‌دهند از نرم‌افزارهای محدود اجتناب کنند و فقط از فرمت‌های باز استفاده کنند. به دلیل این دلایل قانونی و ترجیحی، توسعه‌دهندگان وب خود را مجبور به پشتیبانی از چندین فرمت برای ارائه یک تجربه ویدیویی به کل مخاطبان خود می‌بینند.کدک‌های شرح داده شده در بخش قبلی برای فشرده‌سازی ویدیو و صدا به فایل‌های قابل مدیریت وجود دارند، زیرا صدا و ویدیوی خام هر دو بسیار بزرگ هستند. هر مرورگر وب از مجموعه‌ای از کدک‌ها، مانند Vorbis یا H.264، پشتیبانی می‌کند که برای تبدیل صدا و ویدیوی فشرده شده به داده‌های باینری و برعکس استفاده می‌شوند. هر کدک مزایا و معایب خاص خود را دارد و هر کانتینر نیز ممکن است ویژگی‌های مثبت و منفی خود را داشته باشد که بر تصمیمات شما در مورد استفاده از آن تأثیر می‌گذارد. مسائل کمی پیچیده‌تر می‌شود زیرا نه تنها هر مرورگر از مجموعه متفاوتی از فرمت‌های فایل کانتینر پشتیبانی می‌کند، بلکه هر کدام از انتخاب متفاوتی از کدک‌ها نیز پشتیبانی می‌کنند. برای به حداکثر رساندن احتمال اینکه وب‌سایت یا برنامه شما روی مرورگر کاربر کار کند، ممکن است لازم باشد هر فایل رسانه‌ای را که استفاده می‌کنید در چندین فرمت ارائه دهید. اگر سایت شما و مرورگر کاربر فرمت رسانه‌ای مشترکی نداشته باشند، رسانه شما پخش نخواهد شد. با توجه به پیچیدگی‌های اطمینان از قابل مشاهده بودن محتوای برنامه شما در هر ترکیبی از مرورگرها، پلتفرم‌ها و دستگاه‌هایی که می‌خواهید به آنها دسترسی داشته باشید، انتخاب بهترین ترکیب کدک‌ها و کانتینر می‌تواند یک کار پیچیده باشد. یک نکته دیگر که باید در نظر داشته باشید: مرورگرهای موبایل ممکن است از فرمت‌های اضافی پشتیبانی کنند که توسط معادل‌های دسکتاپ آنها پشتیبانی نمی‌شوند، همانطور که ممکن است از همه فرمت‌های مشابه نسخه دسکتاپ پشتیبانی نکنند. علاوه بر این، هر دو مرورگر دسکتاپ و موبایل ممکن است طوری طراحی شده باشند که مدیریت پخش رسانه را به عهده بگیرند (چه برای همه رسانه‌ها و چه فقط برای انواع خاصی که نمی‌توانند به صورت داخلی مدیریت کنند). این بدان معناست که پشتیبانی از رسانه تا حدودی به نرم‌افزاری که کاربر نصب کرده است بستگی دارد.

Copy

HTML

   در اینجا ما ویژگی src را از تگ حذف کرده‌ایم و در عوض عناصر جداگانه‌ای را گنجانده‌ایم که به منابع خود اشاره می‌کنند. در این حالت، مرورگر از طریق عناصر اولین موردی را که کدک پشتیبانی‌شده را دارد، پخش می‌کند. گنجاندن منابع WebM و MP4 باید برای پخش ویدیوی شما در اکثر پلتفرم‌ها و مرورگرهای امروزی کافی باشد. هر عنصر همچنین دارای یک ویژگی type است. این اختیاری است، اما توصیه می‌شود که آن را نیز وارد کنید. ویژگی type شامل نوع MIME فایل مشخص‌شده توسط است و مرورگرها می‌توانند از این نوع برای رد کردن فوری ویدیوهایی که نمی‌فهمند استفاده کنند. اگر type گنجانده نشده باشد، مرورگرها هر فایل را بارگیری کرده و سعی می‌کنند پخش کنند تا فایلی را پیدا کنند که کار می‌کند، که بدیهی است زمان‌بر است و استفاده غیرضروری از منابع است.

سایر ویژگی‌های <video>

   تعدادی ویژگی دیگر نیز وجود دارد که می‌توانید هنگام نمایش یک ویدیوی HTML اضافه کنید. به مثال بعدی ما نگاهی بیندازید:

Copy

HTML

   رابط کاربری حاصل چیزی شبیه به این خواهد بود:

   ویژگی‌ها عبارتند از: - عرض و ارتفاع شما می‌توانید اندازه ویدیو را با این ویژگی‌ها یا با CSS کنترل کنید. در هر دو حالت، ویدیوها نسبت عرض به ارتفاع اصلی خود را حفظ می‌کنند - که به عنوان نسبت ابعاد شناخته می‌شود. اگر نسبت ابعاد با اندازه‌هایی که تعیین می‌کنید حفظ نشود، ویدیو به صورت افقی رشد می‌کند تا فضا را پر کند و به فضای پر نشده به طور پیش‌فرض فقط یک رنگ پس‌زمینه ثابت داده می‌شود. - پخش خودکار (autoplay) باعث می‌شود صدا یا ویدیو بلافاصله شروع به پخش کند، در حالی که بقیه صفحه در حال بارگیری است. به شما توصیه می‌شود از پخش خودکار ویدیو (یا صدا) در سایت‌های خود استفاده نکنید، زیرا کاربران می‌توانند آن را واقعاً آزاردهنده بدانند. - حلقه (loop) باعث می‌شود ویدیو (یا صدا) هر زمان که تمام شد، دوباره شروع به پخش کند. این نیز می‌تواند آزاردهنده باشد، بنابراین فقط در صورت لزوم از آن استفاده کنید. - بی‌صدا (muted) باعث می‌شود رسانه به طور پیش‌فرض با صدای خاموش پخش شود. - پوستر (poster) آدرس اینترنتی تصویری که قبل از پخش ویدیو نمایش داده می‌شود. این برای استفاده در صفحه شروع یا صفحه تبلیغات در نظر گرفته شده است. - پیش‌بارگذاری (preload) برای بافر کردن فایل‌های بزرگ استفاده می‌شود. می‌تواند یکی از سه مقدار زیر را بگیرد: "none" : فایل را بافر نمی‌کند. "auto" : فایل رسانه را بافر می‌کند. "metadata" : فقط فراداده‌های فایل را بافر می‌کند.

عنصر <audio>

   عنصر درست مانند عنصر عمل می‌کند، با چند تفاوت کوچک که در زیر ذکر شده است. یک مثال معمول می‌تواند به این شکل باشد:

Copy

HTML

   این کد چیزی شبیه به کد زیر را در مرورگر تولید می‌کند:

   این پخش‌کننده فضای کمتری نسبت به پخش‌کننده ویدیو اشغال می‌کند، زیرا هیچ جزء بصری ندارد - فقط باید کنترل‌هایی را برای پخش صدا نمایش دهید. تفاوت‌های دیگر آن با ویدیوی HTML به شرح زیر است: عنصر از ویژگی‌های عرض/ارتفاع پشتیبانی نمی‌کند - باز هم، هیچ جزء بصری ندارد، بنابراین چیزی برای اختصاص عرض یا ارتفاع به آن وجود ندارد. همچنین از ویژگی پوستر پشتیبانی نمی‌کند - باز هم، هیچ جزء بصری ندارد. به غیر از این، از تمام ویژگی‌های مشابه پشتیبانی می‌کند - برای اطلاعات بیشتر در مورد آنها، بخش‌های بالا را مرور کنید.

نمایش مسیر خطی ویدیوها

   حالا به سراغ یک مفهوم کمی پیشرفته‌تر می‌رویم که دانستن آن واقعاً مفید است. بسیاری از افراد نمی‌توانند یا نمی‌خواهند محتوای صوتی/تصویری را که در وب پیدا می‌کنند، حداقل در مواقع خاص، بشنوند. برای مثال: بسیاری از افراد دارای اختلالات شنوایی (مانند کم‌شنوایی یا ناشنوایی) هستند، بنابراین نمی‌توانند صدا را به وضوح بشنوند، یا اصلاً نمی‌توانند بشنوند. برخی دیگر ممکن است به دلیل حضور در محیط‌های پر سر و صدا (مانند یک بار شلوغ هنگام پخش یک بازی ورزشی) نتوانند صدا را بشنوند. به طور مشابه، در محیط‌هایی که پخش صدا باعث حواس‌پرتی یا اختلال می‌شود (مانند کتابخانه یا زمانی که شریک زندگی‌شان سعی در خوابیدن دارد)، داشتن زیرنویس می‌تواند بسیار مفید باشد. افرادی که به زبان ویدیو صحبت نمی‌کنند، ممکن است متن یا حتی ترجمه بخواهند تا به آنها در درک محتوای رسانه کمک کند. آیا خوب نیست که بتوانیم متن کلمات گفته شده در صدا/تصویر را در اختیار این افراد قرار دهیم؟ خب، به لطف ویدیوی HTML، می‌توانید. برای انجام این کار، ما از قالب فایل WebVTT و عنصر استفاده می‌کنیم. WebVTT فرمتی برای نوشتن فایل‌های متنی است که شامل چندین رشته متن به همراه ابرداده‌هایی مانند زمان نمایش هر رشته متن در ویدیو و حتی اطلاعات محدود مربوط به سبک/موقعیت است. این رشته‌های متنی، نشانه‌ها نامیده می‌شوند و انواع مختلفی از نشانه‌ها وجود دارند که برای اهداف مختلف استفاده می‌شوند. رایج‌ترین نشانه‌ها عبارتند از: - زیرنویس‌ها (subtitles) ترجمه مطالب خارجی، برای افرادی که کلمات گفته شده در صدا را نمی‌فهمند. - توضیحات (captions) رونویسی‌های هماهنگ‌شده از گفتگو یا توصیف صداهای مهم، برای اینکه افرادی که نمی‌توانند صدا را بشنوند بفهمند چه اتفاقی می‌افتد. - توضیحات زمان‌بندی‌شده (timed descriptions) متنی که باید توسط پخش‌کننده رسانه خوانده شود تا تصاویر مهم را برای کاربران نابینا یا کم‌بینا توصیف کند. یک فایل WebVTT معمولی چیزی شبیه به این خواهد بود:

   برای نمایش این متن همراه با پخش رسانه HTML، باید: آن را به عنوان یک فایل .vtt در جایی که سرور بتواند آن را ارائه دهد (به پایین مراجعه کنید)، مانند همان دایرکتوری که فایل HTML در آن قرار دارد، ذخیره کنید. با عنصر به فایل .vtt پیوند دهید. باید درون یا قرار گیرد، اما بعد از همه عناصر . از ویژگی type برای مشخص کردن اینکه آیا نشانه‌ها زیرنویس، کپشن یا توضیحات هستند استفاده کنید. علاوه بر این، از srclang برای گفتن به مرورگر که زیرنویس‌ها را به چه زبانی نوشته‌اید، استفاده کنید. در نهایت، برچسبی اضافه کنید تا به خوانندگان کمک کند زبانی را که جستجو می‌کنند شناسایی کنند. در اینجا مثالی آورده شده است:

Copy

HTML

   برای امتحان کردن این روش، باید فایل‌ها را روی یک سرور HTTP محلی میزبانی کنید. در خروجی مرورگر، ویدیویی را مشاهده خواهید کرد که زیرنویس آن نمایش داده شده است. برای یک برنامه کامل و کد منبع آن، به بخش افزودن زیرنویس و زیرنویس به ویدیوی HTML مراجعه کنید. این مثال از جاوا اسکریپت استفاده می‌کند تا به کاربران امکان انتخاب بین زیرنویس‌های مختلف را بدهد. توجه داشته باشید که برای فعال کردن زیرنویس، باید دکمه "CC" را فشار داده و یک گزینه را انتخاب کنید - انگلیسی، آلمانی یا اسپانیایی.

   آهنگ‌های متنی همچنین به شما در سئو کمک می‌کنند، زیرا موتورهای جستجو به ویژه بر متن تمرکز دارند. آهنگ‌های متنی حتی به موتورهای جستجو اجازه می‌دهند تا مستقیماً به قسمتی از ویدیو در طول ویدیو لینک دهند.