محتوای ویدیویی و صوتی

ساخت وبلاگ

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

پیش نیازها:    سواد رایانه اساسی ، نصب نرم افزار اساسی ، دانش پایه کار با پرونده ها ، آشنایی با اصول HTML (همانطور که در شروع کار با HTML پوشیده شده است ) و تصاویر در HTML .
هدف، واقعگرایانه:    برای یادگیری نحوه جاسازی محتوای ویدئویی و صوتی در یک صفحه وب ، و اضافه کردن زیرنویس ها / زیرنویس ها به فیلم.
صدا و فیلم در وب
توسعه دهندگان وب می خواستند از اوایل دهه 2000 میلادی ، از اوایل دهه 2000 میلادی ، از پهنای باند به اندازه کافی سریع برای پشتیبانی از هر نوع فیلم استفاده کنند ، از ویدیو و صدا در وب استفاده کنند. (فایل های ویدیویی بسیار بزرگتر از متن یا حتی تصاویر هستند.) در روزهای اولیه ، فن آوری های وب بومی مانند HTML توانایی جاسازی ویدئو و صدا را در وب نداشتند ، بنابراین فن آوری های اختصاصی (یا پلاگین مبتنی بر پلاگین) مانند Flash (و بعداً Silverlight ) برای پردازش چنین محتوا رایج شدند. این نوع فناوری خوب عمل کرده است ، اما مشکلات زیادی را در بر داشته است ، از جمله عدم کار با ویژگی های HTML / CSS ، مسائل امنیتی و مشکلات دسترسی.

در صورت اجرای صحیح ، راه حل بومی بسیاری از این موارد را حل خواهد کرد. خوشبختانه ، چند سال بعد مشخصات HTML5 چنین ویژگی هایی را اضافه کرد ، با عناصر <video>و <audio>عناصر ، و برخی از API های جدید براق JavaScript برای کنترل آنها. ما در اینجا به JavaScript نخواهیم پرداخت - فقط پایه های اساسی که با HTML قابل دستیابی است.

ما به شما یاد نمی دهیم که چگونه فایلهای صوتی و تصویری تهیه کنید - این یک مهارت کاملا متفاوت است. ما نمونه آزمایشات صوتی و تصویری و کد نمونه ای را برای آزمایش خود در اختیار شما قرار داده ایم ، در صورت عدم توانایی در دست گرفتن خود.

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

عنصر <video>
این <video>عنصر به شما امکان می دهد فیلم را به راحتی جاسازی کنید. نمونه ای بسیار ساده از این قرار است:

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
</video>
ویژگی های یادداشت عبارتند از:

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

یک پخش کننده ویدیوی ساده که ویدیویی از یک خرگوش سفید کوچک را نشان می دهد

می توانید مثال را در اینجا بصورت زنده امتحان کنید (به منبع منبع نیز مراجعه کنید .)

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

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

یک فایل WebM حاوی فیلمی که دارای یک مسیر ویدیویی اصلی و یک مسیر زاویه متناوب ، به علاوه صدا برای هر دو زبان انگلیسی و اسپانیایی است ، علاوه بر صدا برای یک آهنگ تفسیر انگلیسی ، می تواند به عنوان showin در نمودار زیر مفهومی شود. همچنین شامل متن های حاوی زیرنویس های بسته برای فیلم بلند ، زیرنویس های اسپانیایی برای این فیلم ، و زیرنویس های انگلیسی برای این تفسیر است.

نمودار مفهوم سازی محتویات یک فایل رسانه ای در سطح آهنگ.

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

مثلا:

یک ظرف WebM معمولاً بسته های صوتی Vorbis یا Opus را با فیلم VP8 / VP9 بسته بندی می کند. این در همه مرورگرهای مدرن پشتیبانی می شود ، اگرچه نسخه های قدیمی تر ممکن است کار نکنند.
یک ظرف MP4 معمولاً صدای AAC یا MP3 را با فیلم H.264 بسته بندی می کند. این پشتیبانی همچنین در کلیه مرورگرهای مدرن و همچنین Inteet Explorer پشتیبانی می شود.
ظرف Ogg تمایل به استفاده از صوتی Vorbis و فیلم Theora دارد. این به بهترین وجه در Firefox و Chrome پشتیبانی می شود ، اما در اصل با فرمت WebM با کیفیت بهتر جایگزین شده است.
موارد خاص وجود دارد. به عنوان مثال ، برای برخی از انواع صوتی ، داده های کدک اغلب بدون یک ظرف یا با یک ظرف ساده شده ذخیره می شوند. نمونه بارز آن کدک FLAC که معمولاً در پرونده های FLAC ذخیره می شود ، که فقط آهنگ های خام FLAC هستند.

چنین وضعیتی پرونده MP3 همیشه محبوب است. "پرونده MP3" در واقع یک آهنگ صوتی MPEG-1 Audio Layer III (MP3) است که در یک ظرف MPEG یا MPEG-2 ذخیره شده است. این امر به ویژه جالب است زیرا در حالی که بیشتر مرورگرها از رسانه MPEG در <video>عناصر و audio HTMLElement ("صوتی")} support پشتیبانی نمی کنند ، ممکن است به دلیل محبوبیت آن هنوز از MP3 پشتیبانی کنند.

پخش کننده صوتی تمایل دارد مستقیماً یک آهنگ صوتی را پخش کند ، به عنوان مثال یک فایل MP3 یا Ogg. اینها به ظروف نیاز ندارند.

پ

تصویری یک ...
ما را در سایت تصویری یک دنبال می کنید

برچسب : نویسنده : امیر videoone بازدید : 284 تاريخ : يکشنبه 12 آبان 1398 ساعت: 1:32