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

چرا این مشکل را داریم؟ معلوم می شود که چندین قالب محبوب ، مانند MP3 و MP4 / H.264 ، عالی هستند اما توسط ثبت اختراعات وارد شده اند. یعنی ، پتنت هایی وجود دارد که بخشی از یا تمام فناوری هایی را که مبتنی بر آنهاست ، پوشش می دهند. در ایالات متحده ، حق ثبت اختراعات MP3 را تا سال 2017 پوشش داده است ، و H.264 حداقل در سال 2027 توسط ثبت اختراعات وارد می شود.

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

کدک های شرح داده شده در بخش قبلی برای فشرده سازی فیلم و صدا در پرونده های قابل کنترل وجود دارد ، از آنجا که صدا و فیلم خام بسیار بزرگ هستند. ما را ببینید (فیلم و صدا خام بسیار بزرگ است). هر مرورگر وب مجموعه ای از  کدک ها مانند Vorbis یا H.264 را پشتیبانی می کند ، که برای تبدیل صوتی و تصویری فشرده شده به داده های باینری و برگشت پشتیبانی می شوند. هر کدک مزایا و اشکالات خاص خود را ارائه می دهد ، و هر ظرف نیز ممکن است ویژگی های مثبت و منفی خود را در تصمیم گیری های شما در مورد استفاده از آنها ارائه دهد.

چیزها کمی پیچیده تر می شوند زیرا نه تنها هر مرورگر از مجموعه متفاوتی از قالب های پرونده کانتینر پشتیبانی می کند ، بلکه هر یک از انتخاب های مختلف کدک را پشتیبانی می کنند. به منظور به حداکثر رساندن احتمال اینکه وب سایت یا برنامه شما روی یک مرورگر کاربر کار کند ، ممکن است شما نیاز داشته باشید که هر پرونده رسانه ای را که از آن استفاده می کنید در قالب های مختلف ارائه دهید اگر سایت و مرورگر کاربر مشترک یک قالب رسانه ای با یکدیگر ندارند ، رسانه به سادگی پخش نخواهد شد.

با توجه به پیچیدگی های لازم برای اطمینان از اینکه رسانه برنامه شما در هر ترکیبی از مرورگرها ، سیستم عامل ها و دستگاه هایی که می خواهید به آنها برسید قابل مشاهده است ، انتخاب بهترین ترکیب کدک ها و کانتینرها می تواند یک کار پیچیده باشد. مشاهده انتخاب ظرف مناسب در فرمت های ظرف رسانه ها (انواع فایل) برای کمک انتخاب فرمت فایل کانتینر بهترین برای نیازهای شما مناسب؛ به همین ترتیب ، برای کمک به انتخاب اولین کدک های رسانه ای که برای محتوای خود و مخاطبان مورد نظر خود استفاده می کنید ، به انتخاب کدک ویدیویی در راهنمای کدک ویدیویی وب و انتخاب رمزگذار صوتی در راهنمای رمزگذار صوتی وب مراجعه کنید.

نکته دیگری که باید در نظر داشته باشید: مرورگرهای تلفن همراه ممکن است از قالبهای اضافی پشتیبانی کنند که توسط معادل رومیزی آنها پشتیبانی نمی شوند ، دقیقاً مانند اینکه ممکن است از تمام قالبهای مشابه نسخه دسک تاپ پشتیبانی نکنند. از این گذشته ، مرورگرهای رومیزی و موبایل ممکن است برای بارگیری از پخش رسانه ها (یا برای همه رسانه ها یا فقط برای انواع خاصی که نمی توانند از عهده داخلی باشند) طراحی شوند. این بدان معنی است که پشتیبانی رسانه تا حدودی به آنچه نرم افزار کاربر نصب کرده است بستگی دارد.

خب چطور اینکار رو انجام بدیم؟ به مثال به روز شده زیر نگاهی بیندازید ( آن را امتحان کنید و در اینجا زندگی کنید ):

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>
در اینجا ما این srcویژگی را از <video> برچسب واقعی گرفته ایم و در عوض <source>عناصر جداگانه ای را شامل می شویم که به منابع خودشان اشاره دارند. در این حالت مرورگر از طریق <source> عناصر عبور می کند و اولین موردی را که دارای کدک برای پشتیبانی است بازی می کند. از جمله منابع WebM و MP4 باید این روزها برای پخش ویدیوی شما در اکثر سیستم عامل ها و مرورگرها کافی باشد.

هر <source>عنصر نیز یک type ویژگی دارد. این اختیاری است ، اما توصیه می شود که آن را درج کنید. این type ویژگی شامل نوع MIME پرونده مشخص شده توسط آن است  <source>، و مرورگرها می توانند از این type فیلم استفاده کنند تا بلافاصله فیلمهایی را که نفهمیدند پرش کنند. اگر type گنجانده نشده باشد ، مرورگرها بارگیری می کنند و سعی می کنند تا هر پرونده را پیدا کنند تا زمانی که پرونده ای پیدا کنند که کار کند ، که به وضوح به زمان نیاز دارد و استفاده بی رویه از منابع است.

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

سایر ویژگی های <video>
تعدادی از ویژگی های دیگر که می توانید هنگام نمایش یک فیلم HTML داشته باشید وجود دارد. به مثال بعدی ما نگاهی بیندازید:

<video controls width="400" height="400"
       autoplay loop muted
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>
پنجره حاصل به نظر می رسد مانند این:

پخش کننده ویدیو قبل از پخش تصویر پوستر.  تصویر پوستر می گوید نمونه ویدیوی HTML5 ، OMG جهنم آره!ویژگی های جدید عبارتند از:

width و height
می توانید اندازه این فیلم را با این ویژگی ها یا با CSS کنترل کنید . در هر دو مورد ، فیلم ها نسبت عرض به عرض بومی خود را حفظ می کنند - به عنوان نسبت ابعاد شناخته می شود . اگر نسبت ابعاد توسط اندازه های تعیین شده شما حفظ نشود ، فیلم برای پر کردن فضای به صورت افقی رشد می کند ، و فضای پر نشده نیز به طور پیش فرض به یک رنگ پس زمینه جامد می دهد.
autoplay
پخش صوتی یا تصویری را فوراً شروع می کند ، در حالی که بقیه صفحه بارگیری می شود. به شما توصیه می شود از ویدیو (یا صوتی) پخش خودکار در سایت های خود استفاده نکنید ، زیرا کاربران می توانند آنرا واقعاً آزار دهنده بدانند.
loop
باعث می شود ویدیو (یا صدا) هر زمان که به پایان برسد دوباره شروع به پخش کند. این همچنین می تواند آزار دهنده باشد ، بنابراین فقط در صورت لزوم از آن استفاده کنید.
muted
باعث می شود رسانه با پخش کردن صدا به طور پیش فرض خاموش شود.
poster
URL تصویری که قبل از پخش فیلم نمایش داده می شود. این در نظر گرفته شده است برای صفحه نمایش چلپ چلوپ یا صفحه تبلیغاتی مورد استفاده قرار گیرد.
preload
برای بافر فایل های بزرگ استفاده می شود. می تواند یکی از سه مقدار را به خود اختصاص دهد:

"none" فایل را بافر نمی کند
"auto" بافر پرونده رسانه
"metadata" فقط داده فوق برای پرونده را بافر می کند
می توانید مثال فوق را برای پخش مستقیم در Github پیدا کنید (همچنین کد منبع را ببینید .) توجه داشته باشید که ما این autoplayویژگی را در نسخه زنده وارد نکرده ایم - اگر ویدیو به محض بارگیری صفحه شروع به پخش می کند ، شما نمی خواهید. دریافت برای دیدن پوستر!

عنصر <audio>
این <audio>عنصر درست مانند عنصر کار می کند <video>، با چند تفاوت کوچک که در زیر آورده شده است. یک نمونه معمولی ممکن است چنین باشد:

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>
این مورد مشابه موارد زیر را در مرورگر ایجاد می کند:

پخش کننده صوتی ساده با دکمه پخش ، تایمر ، کنترل صدا و نوار پیشرفت

توجه : می توانید نسخه آزمایشی صوتی را به صورت زنده در Github اجرا کنید (همچنین کد منبع پخش کننده صوتی را ببینید .)

این امر فضای کمتری نسبت به دستگاه پخش ویدیو دارد ، زیرا هیچ یک از اجزای بصری وجود ندارد - شما فقط باید صدا را پخش کنید. تفاوت های دیگر از ویدیوی HTML به شرح زیر است:

این <audio>عنصر از width/ heightویژگی ها پشتیبانی نمی کند - مجدداً هیچ مؤلفه تصویری وجود ندارد ، بنابراین چیزی برای تعیین عرض یا ارتفاع به آن وجود ندارد.
همچنین این posterویژگی از ویژگی پشتیبانی نمی کند - مجدداً ، بدون مؤلفه بصری.
به غیر از این ، <audio>از تمام ویژگی های مشابه پشتیبانی می کند <video>- برای اطلاعات بیشتر در مورد آنها ، بخش های فوق را مرور کنید.

شروع مجدد پخش رسانه
در هر زمان ، می توانید رسانه را به ابتدا تنظیم کنید - از جمله فرایند انتخاب بهترین منبع رسانه ، اگر بیش از یک با استفاده از <source>عناصر مشخص شده باشد - با فراخوانی load()روش عنصر :

var mediaElem = document.getElementById("my-media-element");
mediaElem.load();
تشخیص اضافه کردن مسیر و حذف
شما می توانید لیست های آهنگ را در یک عنصر رسانه نظارت کنید تا تشخیص دهید که آیا آهنگ ها به رسانه عنصر اضافه شده یا حذف می شوند. به عنوان مثال ، می توانید تماشا کنید addtrackکه در هنگام افزودن آهنگهای صوتی به رسانه ، از رویداد مورد نظر AudioTrackList(از طریق بازیابی HTMLMediaElement.audioTracks) اخراج شد تا  از آن مطلع شوید:

var mediaElem = document.querySelector("video");
mediaElem.audioTracks.onaddtrack = function(event) {
  audioTrackAdded(event.track);
}
اطلاعات بیشتری در مورد این در TrackEventمستندات ما پیدا خواهید کرد .

نمایش آهنگ های متن فیلم
اکنون ما یک مفهوم کمی پیشرفته تر را مورد بحث قرار می دهیم که دانستن آن بسیار مفید است. بسیاری از افراد حداقل و در مواقعی خاص نمی توانند یا نمی خواهند محتوای صوتی / ویدئویی را که در وب پیدا می کنند بشنوند. مثلا:

بسیاری از افراد دارای اختلالات شنوایی هستند (مانند شنیدن صدا یا ناشنوایی) بنابراین نمی توانند صدا را به طور واضح بشنوند.
ممکن است دیگران نتوانند صوت را بشنوند زیرا در محیط های پر سر و صدا هستند (مانند یک نوار شلوغ هنگام نمایش یک بازی ورزشی).
به طور مشابه ، در محیط هایی که پخش صوتی می تواند یک حواس پرتی یا اختلال باشد (مانند کتابخانه یا وقتی شریک زندگی در حال خواب است) ، داشتن زیرنویس ها می تواند بسیار مفید باشد.
افرادی که به زبان ویدیو صحبت نمی کنند ممکن است متن یا حتی ترجمه را بخواهند که به آنها در درک محتوای رسانه کمک کند.
خوب نخواهد بود که بتوانیم نسخه ای از کلماتی که در صدا و سیما گفته می شود را به این افراد ارائه دهیم؟ خوب ، به لطف ویدیوی HTML ، می توانید. برای این منظور از  قالب پرونده WebVTT و <track>عنصر استفاده می کنیم.

توجه : "رونویسی" به معنای "نوشتن کلمات گفتاری به عنوان متن" است. متن به دست آمده "متن" است.

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

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