آموزش ویدئو(video) در HTML

از عنصر <video> در HTML برای نمایش دادن یک ویدئو، در یک صفحه ی وب استفاده می شود.

عنصر <video> در HTML

برای نمایش دادن یک ویدئو در HTML، از عنصر <video> استفاده می کنیم:

<video width="320" height="240" controls>
  <source src="https://sina2.ir/images/videos/movie.mp4" type="video/mp4">
  <source src="/movie.ogg" type="video/ogg">
مرورگر شما از تگ ویدئو پشتیبانی نمی کند
</video> 

نحوه کار کردن کدهای بالا:
خصوصیت controls باعث می شود دکمه های play و pause و volume به ویدئو اضافه شوند. این ایده ی خوبی است که همواره خصوصیت های width و height را اضافه کنید. اگر خصوصیت های width و height تنظیم نشوند،ممکن است به هنگام لود شدن ویدئو،  صفحه سوسو(flicker) بزند.

عنصر <source> همواره به ما امکان می ده تا یک فایل ویدئوی جایگزین را مشخص کنیم؛ که ممکن است مرورگر آن را انتخاب کند. مرورگر از اولین فرمت شناسایی شده استفاده خواهد کرد. متن بین تگ <video> و <video/> تنها وقتی در مرورگرها نمایش داده می شود که از عنصر <video> پشتیبانی نشود.

شروع ویدئو به صورت اتوماتیک(autoplay) در HTML

برای اینکه ویدئو به طور اتوماتیک شروع شود، می توانیم از خصوصیت autoplay استفاده کنیم:

<video width="320" height="240" autoplay>
  <source src="https://sina2.ir/images/videos/movie.mp4" type="video/mp4">
  <source src="/movie.ogg" type="video/ogg">
مرورگر شما از تگ ویدئو پشتیبانی نمی کند
</video> 

نکته: مرورگرهای Chromium در اکثر موارد امکان نمی دهند تا از autoplay استفاده شود اما همواره امکان می دهند تا از autoplay بی صدا(muted autoplay)، استفاده شود.

پس از خصوصیت autoplay، کلمه ی muted را اضافه کنید تا به ویدئوی خود امکان دهید تا به طور اتوماتیک (اما بی صدا) پخش شود:

<video width="320" height="240" autoplay muted>
  <source src="https://sina2.ir/images/videos/movie.mp4" type="video/mp4">
  <source src="/movie.ogg" type="video/ogg">
مرورگر شما از تگ ویدئو پشتیبانی نمی کند
</video> 

پشتیبانی مرورگرها

اعداد درون جدول زیر، اولین ورژن مرورگری را مشخص می کنند که کاملاً از عنصر <video> پشتیبانی می کند.

					عنصر
4.0	9.0	3.5	10.5	4.0	<video>

فرمت های ویدئو در HTML

سه فرمت ویدئو وجود دارند که از آنها پشتیبانی می شود: MP4 و WebM و Ogg. پشتیبانی مرورگرها از فرمت های مختلف، به صورت زیر است:

انواع مدیا در ویدئو های HTML

متدها، پروپرتی ها(Properties) و رویدادها در ویدئوهای HTML

بخش DOM در HTML، متدها، پروپرتی ها و رویدادها را برای عنصر <video> تعریف می کند. این به ما امکان می دهد تا ویئوها را لود(load)، پلی(play) و متوقف(pause) کنیم؛ همچنین می توانیم duration(مدت زمان) و volume(میزان صدا) را تنظیم کنیم. همچنین رویداد های DOM نیز وجود دارند که می توانند وقتی که یک ویدئو شروع به پلی شدن می کند، یا وقتی که متوقف(pause) می شود و ... را به ما اطلاع دهند.

<video id="video1" width="420">
    <source src="https://sina2.ir/images/videos/mov_bbb.mp4" type="video/mp4">
    <source src="/mov_bbb.ogg" type="video/ogg">
    مرورگر شما از تگ ویدئو پشتیبانی نمی کند
</video>