More

[ دورة HTML5 ] الدرس الخامس – استخدام الفيديو مع DOM

" Here you can search for everything you want and you will find it as soon as possible "

التحكم في عنصر <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


You may also like  لعبة إيزيس ساحرة الجزيرة
Show More
" Here you can search for everything you want and you will find it as soon as possible "

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected

Please consider supporting us by disabling your ad blocker