پخش ویدئو در HTML

پخش ویدئو در HTML

در بسیاری از سایت ها بار ها مشاهده کردید که درون خود وبسایت بدون اینکه اینکه ویدو را دانلود کنید آن را ببینید

ویدیو ها باعث زیبایی وبسایت شما میشوند.

ویدئوها در HTML به روش های مختلفی می توانند نمایش داده شوند.

که در ادامه توضیح خواهیم داد.

پخش ویدئوها در HTML

مثال

<video width="320" height="240" controls="controls">
<source src="/movie.mp4" type="video/mp4" />
<source src="/movie.ogg" type="video/ogg" />
<source src="/movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="/movie.swf" width="320" height="240" />
</object>
</video>

مشکلات و راه حل ها

نمایش ویدئو در HTML ساده نیست!

باید ترفند های زیادی برای اینکه مطمئن شوید ویدئو شما در تمام مرورگرها (Internet Explorer, Chrome, Firefox, Safari, Opera) و تمامی سخت افزارها (PC, Mac , iPad, iPhone) اجرا شود به کار ببرید.

در این فصل مشکلات و راه حل هایی موجود به طور خلاصه بیان شده است.


پخش ویدئو با استفاده از تگ <embed>

هدف از تگ <embed> درج عناصر مولتی مدیا در صفحات HTML می باشد.

قطعه کد HTML زیر یک فایل Flash را در صفحه وب درج می کند:

مثال

<embed src="/intro.swf" height="200" width="200"/>

مشکلات استفاده از تگ <embed>

  • تگ <embed> در HTML 4 شناخته شده نیست. صفحه شما دارای اعتبار نمی باشد.
  • اگر مرورگر فرمت فایل شما را پشتیبانی نکند، فایل Flash پخش نخواهد شد.
  • اگر فرمت فایل را به فرمتی دیگر تبدیل کنید، باز هم در همه مرورگرها پخش نخواهد شد.
  • iPad و iPhone نمی توانند فایل های Flash را نمایش دهند.

پخش ویدئو با استفاده از تگ <object>

هدف از تگ <object> درج عناصر مولتی مدیا در صفحات HTML است.

قطعه کد HTML زیر یک فایل Flash را در صفحه وب درج می کند:

مثال

<object data="intro.swf" height="200" width="200"/>

مشکلات استفاده از تگ <object>

  • اگر مرورگر فرمت فایل شما را پشتیبانی نکند، فایل Flash پخش نخواهد شد.
  • اگر فرمت فایل را به فرمتی دیگر تبدیل کنید، باز هم در همه مرورگرها پخش نخواهد شد.
  • iPad و iPhone نمی توانند فایل های Flash را نمایش دهند.

پخش ویدئو با استفاده از تگ <video>

تگ <video> در HTML5 یک عنصر جدید می باشد.

با استفاده از تگ <video> می توانید فایل های ویدئو را در صفحات HTML پخش کنید.

قطعه کد زیر، با توجه به نوع مرورگر کاربر، یکی از فرمت های ogg، mp4 یا webm را در صفحه وب پخش می کند:

مثال

<video width="320" height="240" controls="controls">
<source src="/movie.mp4" type="video/mp4" />
<source src="/movie.ogg" type="video/ogg" />
<source src="/movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

مشکلات استفاده از تگ <video>

  • فقط فرمت های Ogg و MP4 و Webm قابل پشتیبانی است و باید یک ویدئو را مانند مثال بالا به چند فرمت تبدیل کنید.
  • عنصر <video> در مرورگرهای قدیمی شناخته شده نیست.
  • عنصر <video> در HTML4 و XHTML معتبر نیست.

بهترین راه حل پخش ویدئو در HTML

HTML 5 + object + embed

<video width="320" height="240" controls="controls">
<source src="/movie.mp4" type="video/mp4" />
<source src="/movie.ogg" type="video/ogg" />
<source src="/movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="/movie.swf" width="320" height="240">
Your browser does not support video
</embed>
</object>
</video>

مثال بالا از چهار فرمت متفاوت ویدئویی استفاده می کند. عنصر <video> در HTML 5 سعی به نمایش یکی از ویدئوها، با فرمت های mp4 ،ogg یا webm دارد. اگر نتواند، عنصر <object> را امتحان می کند. اگر این نیز جواب نداد، به عنصر <embed> برگشت داده می شود.

مشکلات

  • باید ویدئو ها را به فرمت های زیادی تبدیل کنید.
  • عنصر <video> در HTML 4 و XHTML وجود ندارد.
  • عنصر <embed> در HTML 4 و XHTML اعتبار ندارد.

نکته : استفاده از اعلان <DOCTYPE html!> در بالای صفحه، مشکل اعتبار را حل می کند.


راه حل YouTube

راحت ترین روش برای نمایش ویدئو در HTML استفاده از YouTube می باشد. (به فصل بعد مراجعه کنید)


استفاده از یک Hyperlink

اگر صفحه ای شامل یک لینک به یک فایل مدیا باشد، اغلب مرورگرها از یک “نرم افزار کمکی” برای پخش فایل استفاده می کنند.

کد زیر لینکی را به یک فایل Flash نشان می دهد. اگر کاربری روی این لینک کلیک کند، مرورگر برای پخش فایل یک نرم افزار کمکی را فراخوانی می کند: (مثل Windows Media Player)

مثال

<a href="/intro.swf">Play a video file</a>

نکته ای در مورد ویدئوهای Inline

هنگامی که ویدئویی در یک صفحه وب قرار داده می شود و یا بخشی از آن صفحه می شود، ویدئوی Inline نامیده می شود.

اگر قصد دارید از ویدئوهای Inline در وب خود استفاده کنید، بدانید که بعضی از مردم ویدئوهای Inline را مزاحم می دانند. همچنین توجه داشته باشید که بعضی کاربران گزینه ویدئوهای Inline را در مرورگرشان غیر فعال کرده اند.

بهترین پیشنهاد ما به شما این است که تنها زمانی از ویدئوهای Inline در صفحات وب استفاده کنید که کاربر، انتظار دیدن ویدئویی را دارد. مثالی از این مورد این است که کاربر برای دیدن ویدئویی روی لینکی کلیک کند و صفحه ای باز شود که شامل آن ویدئو است.


تگ های Multimedia در HTML

این عناصر در HTML5 جدید  هستند:

تگ توضیحات
<embed> یک عنصر multimedia را در صفحات HTML درج می کند (در HTML4 شناخته شده نیست)
<object> یک عنصر multimedia را در صفحات HTML درج می کند
<param> یک پارامتر برای object تعریف می کند
<audio> صدا را در صفحات HTML درج می کند
<video> یک ویدئو یا فیلم در صفحات HTML درج می کند
<source> در عناصر <video> و <audio> برای مشخص کردن منبع صدا یا فیلم استفاده می شود.
<track> در عناصر <video> و <audio> برای مشخص کردن متن trackها استفاده می شود.


اگه خوشت اومد به اشتراک بزار


اگه به اشتراک نزاشتی حداقل لایک کن:(

نظر شما در رابطه با این آموزش چیست


بالا

تمامی حقوق مادی و معنوی این وبسایت محفوظ میباشد و متعلق است به Webtekar.ir.
Google