Like And Win VIP Hack
Click Like To WIN 30 Day VIP Hack

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

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

 
Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

التحكم في عنصر <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
Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

0 Comments ON " [ دورة HTML5 ] الدرس الخامس – استخدام الفيديو مع D... "
leave a response

*

Copyright © All Rights Reserved 2014→2017 To Add-Fast.CoM