‎‎ويديو در اچ تي ام الHTML Video -‎

Previous >    <Next  

‎‎با عنصرHTML ‎<video>‎ براي نمايش ويدئو در صفحات وب استفاده ميشود .

‎‎مثال ـ نمونه استفاده از عنصر ويدئو

--(go to editor for change code and run)

‎‎عنصر ويدئوThe HTML &video> Element -‎

‎‎براي نمايش دادن ويدئو از عنصر‎<video>‎ درHTML استفاده ميشود .

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

--(go to editor for change code and run)

‎‎چگونه كارميكند

‎ويژگي‎controls‎ باعث ميشود كه كنترلهاي ويدئو مثل play,puse و volume اضافه ‎شود.

‎بهتراست هميشه ويژگي هاي‎height , width ‎ اعلام شود ، در صورت عدم اعلام ممكن ‎هنگام بارگذاري ويدئو سوسو بزند.

‎عنصرHTML ‎<source>‎ اجازه ميدهد كه فايل هاي ويدئوئي ديگري معرفي ‎شوند، كه ممكن است انتخاب شوند .مرورگز اولين فرمت قابل قابل قبول را انتخاب مي نمايد.

‎متن بين‎<video>‎ و‎</video>‎ فقط در صورت عدم پشتيباني ‎نمايش داده ميشود.

‎‎پخش خودكار ويدئوHTML <video> Autoplay -‎

‎‎براي شروع خودكار ويدئو از ويژگي‎autoplay‎ استفاده ميشود .

‎‎مثال ـ ويدئو با شروع خودكار

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

--(go to editor for change code and run)

‎

‎نكته ـ مرورگرChormium اجازه خودكار ويدئو را در بيشتر حالات نمي دهد، اما خودكار خاموش ‎يعنيMuted Autoplay مجازاست .

‎muted‎‎را به بعد از ‎autoplay‎ اضافه نمائيد تا اجازه شروع خودكار ‎بصورت خاموش داده شود.

‎‎مثال ـ شروع خودكار ويدئوبصورت خاموش

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

--(go to editor for change code and run)

‎‎پشتيباني مرورگرBrowser Support -‎

‎‎در جدول زير اعداد نشان ميدهد، اولين نسخه مرورگر كه كاملا ويدئو را پشتيباني ميكند كدام است

‎
‎‎عنصر ‎Chrome‎ ‎Edge‎ ‎Firefox‎ ‎Safari‎ ‎Opera‎
‎<video>‎‎ ‎‎4.0‎ ‎‎9.0‎ ‎‎3.5‎ ‎‎4.0‎ ‎‎10.5‎

‎‎فرمت هاي ويدئوئيHTML Video Formats -‎

‎سه نوع فرمت ويدئوئي وجود دارد كه توسط مرورگرها پشتيباني ميشوندMP4,WebM .وOgg ‎ميباشند .در جدول زير پشتيباني مرورگرها ازاين سه نوع مشخص شده است.

Browser MP4 WebM Ogg
Edge YES YES YES
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

‎HTML Video -‎ Media Types‎

File Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

‎HTML Video -‎ Methods, Properties, and Events‎

‎‎متدها، ويژگي ها و رويدادها در عنصر ويدئوئيHTML

‎باHTML DOM ويژگي ها،متدها و رويداد ها راميتوان براي عنصر ‎<video>‎ تعريف ‎نمود.

‎به شما اين امكان داده ميشود كه ويدئو را بارگيري، پخش ومكث كنيد .همچنين مدت زمان و حجم صدا ‎را تنظيم كنيد.

‎‎همچنين اين امكان بااستفاده ازDOM رويداهاي پخس، توقف وغيره ويدئو را اطلاع دهد .

‎‎مثال ـ استفاده از جاوااسكريپت

‎ 
<!DOCTYPE html> 
<html> 
<body> 

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause 
  <button onclick="makeBig()">Big
  <button onclick="makeSmall()">Small
  <button onclick="makeNormal()">Normal
  <br><br>
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML video.
  </video>
</div> 

<script> 
var myVideo = document.getElementById("video1"); 

function playPause() { 
  if  (myVideo.paused) 
    myVideo.play(); 
  else 
    myVideo.pause(); 
} 

function makeBig() { 
    myVideo.width = 560; 
} 

function makeSmall() { 
    myVideo.width = 320; 
} 

function makeNormal() { 
    myVideo.width = 420; 
} 
</script > 

<p Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body> 
</html>

--(go to editor for change code and run)

Previous >    <Next