Header Ads

استخدام الفيديو مع DOM


التحكم في عنصر <video> باستخدام لغة DOM


يمكن التحكم في العنصر <video> كما أنه يحتوي على طرق و خصائص و أحداث أيضاً .

يمكن استخدام العديد من الطرق مثل التشغيل و الايقاف و التحميل فعلى سبيل المثال : يوجد أيضاً خصائص مثل ( المدة و الصوت و الاستمرار ) حيث يمكنك قرائتها و ضبطها و ايضاً هناك الأحداث و التي تقوم بتنبيهك على شيء معين مثال : عندما يبدأ عنصر <video> بالتشغيل تقوم بتنبيهك عند الايقاف أو الانتهاء .

في المثال التالي يصور في طريقة بسيطة جداً عن كيفية تحديد عنصر <video> للقراءة و ضبط الخصائص و استدعاء الطرق .

في المثال التالي إنشاء تحكم بسيط للفيديو تشغيل / إيقاف + تعديل حجم للفيديو 


<div style="text-align:center"><button onclick="playPause()">Play/Pause</button>

<button onclick="makeBig()">Big</button>

<button onclick="makeSmall()">Small</button>

<button onclick="makeNormal()">Normal</button>

<br />

<video id="video1">

<source src="mov_bbb.mp4" type="video/mp4" />

<source src="mov_bbb.ogg" type="video/ogg" />

Your browser does not support HTML5 video.

</video>

</div>

<script type="text/javascript">

var myVideo=document.getElementById("video1");

function playPause() {

if (myVideo.paused)

myVideo.play();

else

myVideo.pause();

}  function makeBig() {

myVideo.height=(myVideo.videoHeight*2);

}  function makeSmall() {

myVideo.height=(myVideo.videoHeight/2);

}

function makeNormal() {

myVideo.height=(myVideo.videoHeight);

}

</script>




طرق و خصائص و أحداث العنصر <video>


يشرح الجدول التالي الطرق و الخصائص و الأحداث المدعومة من المتصفحات الرئيسية :




الطريقةالخصائصالأحداث
play()currentSrcplay
pause()currentTimepause
load()videoWidthprogress
canPlayTypevideoHeighterror
durationtimeupdate
endedended
errorabort
pausedempty
mutedemptied
seekingwaiting
volumeloadedmetadata
height
width





يتم التشغيل بواسطة Blogger.