سبد (0)

تبلیغات

پخش ویدئو در HTML

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


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

Wiki

مثال (پخش ویدئو در 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>
خودتان امتحان کنید »

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

Wiki

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

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

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


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

Wiki

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

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

مثال (پخش ویدئو در HTML)

<embed src="/intro.swf" height="200" width="200"/>
خودتان امتحان کنید »

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

Wiki

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

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

Wiki

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

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

مثال (پخش ویدئو در HTML)

<object data="intro.swf" height="200" width="200"/>
خودتان امتحان کنید »

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

Wiki

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

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

Wiki

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

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

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

مثال (پخش ویدئو در 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" />
Your browser does not support the video tag.
</video>
خودتان امتحان کنید »

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

Wiki

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

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

Wiki

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> برگشت داده می شود.

مشکلات

Wiki

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

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


راه حل YouTube

Wiki

راحت ترین روش برای نمایش ویدئو در HTML استفاده از YouTube می باشد.


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

Wiki

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

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

مثال (پخش ویدئو در HTML)

<a href="/intro.swf">Play a video file</a>
خودتان امتحان کنید »

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

Wiki

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

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

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


تگ های Multimedia در HTML

Wiki

= جدید در HTML5.

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

دیدگاه‌ها  

0 # ازاده اسحاقی 1397-03-24 13:16
سلام من یک فایل کمتازیا دارم با پسوند trec ,هرد گاری میکنم نمیتونم توی صفحه این ویدو را باز کنم . بلد هم نیستم پسوندشو عوض کنم چکار باید بکنم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # شهربانو دوستی 1397-03-25 01:58
سلام
فایل رو در محیط کامتازیا باز کنید و بعد ازش خروجی بگیرید با فرمت مورد نظرتون. فیلم آموزش کامتازیا رو میتونید از لینک زیر ببینید.
https://goo.gl/dCEJtM
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # علیرضا 2000 1396-05-18 11:19
سلام من اگه بخوام فیلم پشت سرهم repeat شه باید چیکارکنم؟؟؟؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1396-05-21 08:44
سلام، برای این منظور در تگ video ، ویژگی loop را با مقدار "loop" تنظیم نمایید. به این ترتیب، پس از اتمام نمایش ویدئو پخش آن دوباره شروع می شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # Mohammad gh 1395-11-28 00:27
سلام
ببخشید امکان پخش زیر نویس به طور همزمان با ویدیو وجود داره؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1395-11-28 08:54
خیر متأسفانه در HTML چنین قابلیتی وجود دارد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # Kamran-AQB 1395-11-14 20:23
سلام، من میخوام ویدیو بدون هیچ دکمه یا کنترل کننده ای باشه و همینطور Loop بشه. باید کد رو چطوری ادیت کنم ؟ دقیقا بصورت یه فایل GIF پخش بشه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1395-11-20 09:45
سلام
برای نمایش ویدئوی مذکور از کد زیر استفاده کنید:
<video width="320" height="240" autop lay loop>
<source src="/movie.mp4" type="video/mp4 ">
</video>

برای آشنایی بیشتر با تگ video در HTML و همچنین دیگر ویژگی ها به لینک زیر مراجعه فرمایید:
http://beyamooz.com/tags/312-html-tag/2307-%D8%AA%DA%AF-video
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # محمد حسین احمدآبادی 1395-10-03 22:30
سلام ، میشه مشخص کردن مثلا از ثانیه 15 فیلم پخش بشه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1395-10-04 11:23
سلام بله میشه. مثال زیر رو حتما مشاهده کنید تا متوجه بشید چطوری این کار امکان پذیر هست. در این مثال ویدئو از ثانیه ی 30 شروع میشه.
codepen.io/sbaloot/pen/vywxBN
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # علیرضا باهوش 1395-07-25 18:53
با سلام . با تگ ویدیو میتوان چندین فیلم رو در تگ قرار داد اما اگر بخواهیم به کاربر امکان انتخاب بدیم که هر کدوم خواست پخش کنه باید چه کدی نوشت؟ این نوع معرفی کدهای اچ تی ام ال تقریبا در همه سایتها یکسانه اما کاربردی نیست. اگر شما کمی دیدگاهتونو عوض کنید فکر کنم بهتر باشه. اگه کدو برام بفرستید یا اینجا بزارید ممنون میشم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1395-07-25 22:12
با سلام و احترام.
هدف اول ما آموزش و نشان‌دادن مسیر هست. راه‌پیمایی مسیر با خود دانشجو هست. مسلما خیلی از اموزش‌های ابتدایی مناسب پروژه‌های بزرگ نیست، و برای انجام این پروژه‌ها نیاز هست که از کدهای پیچیده‌تری استفاده بشه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # hos3in 1394-12-12 22:08
با سلام ، چگونه میشه control های ویدیو رو عوض کرد؟؟؟ مثل آپارت
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-12-13 07:54
با سلام.
هر تگی یه سری خصوصیات داره که با اعمال اون خصوصیات رفتار اون تگ می‌تونه تغییر کنه. تگ video هم خصوصیات زیادی داره که می‌تونه کنترل‌های اون رو در دسترس شما قرار بده.
برای مشاهده‌ی کامل خصوصیات کامل تگ ویدئو می‌تونید عبارت video attributes html رو در گوگل سرچ کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # ebrahim01j 1394-11-07 10:51
سلام ببخشید چرا تگ video رو فایرفاکس پشتیبانی نمیکنه در حالی که هم کروم هم فایر فاکس اخرین نسخه رو نصب کردم تو کروم نشون میده ولی تو فایرفاکس نه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1395-10-04 23:55
سلام، تگ ویدئو در مرورگر فایرفاکس پشتیبانی می شه ...!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # مریم افتادگان 1394-05-11 12:23
سلام ممنون از سایت خوبتون من در قسمت گزاشتن عکس ها یا لینک ها و صدا و ویدئو ها در مفهوم کدها مشکلی ندارم فقط نمیدونم چجوری ی عکس دیگه یا فیلم و لینک دیگه ای به جز اینکه شما گفتین بزارم؟میشه لطفا راهنماییم کنید

با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-12-13 07:55
با سلام.
احتمالا تو کدتون یه نکته‌ای رو باید رعایت کنید. اگر کدهای خودتون رو قرار بدید،‌میشه فهمید مشکل از کجاست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی HTML

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی