استخدام الفيديو مع 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()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType	videoHeight	error
	duration	timeupdate
	ended	ended
	error	abort
	paused	empty
	muted	emptied
	seeking	waiting
	volume	loadedmetadata
	height
	width