دليل مرجع HTML

كامل قائمة علامات HTML

حدث timeupdate لـ Audio/Video DOM في HTML

يتم تفعيل حدث timeupdate عند تحديث currentTime. تحدد معدل تفعيل هذا الحدث النظام، ولكن سيتم ضمان تفعيله من 4 إلى 66 مرة في الثانية (بشرط ألا يتجاوز معالجة الحدث 250ms في كل مرة). يُشجع وكلاء المستخدمين على تغيير تردد الحدث بناءً على حمل النظام وتكلفة معالجة الحدث العادية، لضمان عدم تأثير تحديث واجهة المستخدم على تفكير الفيديو.

دليل مرجع DOM للأصوات والفيديوهات HTML

مثال على الإنترنت

بعد تغيير موقع عرض الفيديو، يتم عرض الموقع الحالي بالثواني:

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل أساسي حول استخدام حدث ontimeupdate لصوت/فيديو HTML - (oldtoolbag.com)</title>
</head>
<body>
<p>في هذا المثال، استخدمنا DOM HTML لضبط "ontimeupdate" كحدث على عنصر video.
يتم إطلاق الدالة عند بدء تشغيل الفيديو من قبل المستخدم، أو تحريك موقع التشغيل للفيديو، ويتم عرض موقع التشغيل للفيديو.</p>
<video id="myVideo" width="320" height="176" controls>
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.ogg" type="video/ogg">
　　لا يدعم متصفحك علامة HTML5 video.
</video>
<p>موقع التشغيل: <span id="demo"></span></p>
<script>
// الحصول على عنصر الفيديو الذي يحتوي على id="myVideo"
var vid = document.getElementById("myVideo");
// إضافة حدث ontimeupdate إلى عنصر video، وإذا تغير موقع التشغيل الحالي، يتم تنفيذ الدالة　　
vid.ontimeupdate = function() {myFunction()};
function myFunction()　
{
　　　　// عرض موقع التشغيل الحالي في عنصر p الذي يحتوي على id="demo"　
　　　　document.getElementById("demo").innerHTML = vid.currentTime;
}
</script>
</body>
</html>

اختبار لرؤية ‹/›

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

يتم إطلاق حدث timeupdate عند تغيير موقع التشغيل للأغنية/فيديو (audio/video).

يتم استدعاء هذا الحدث في الحالات التالية:

تشغيل الأغنية/فيديو (audio/video)
تحريك موقع التشغيل للأغنية/فيديو (audio/video)

نصيحة: 　يحدث حدث timeupdate عادةً مع كائنات Audio/VideocurrentTime عند استخدام هذه الخاصية مع الخاصية الأخرى، يتم إرجاع موقع التشغيل الحالي للأغنية/فيديو (بأشهر).

تطابق المتصفحات

IEFirefoxOperaChromeSafari

النحو

في HTML:

<audio|video ontimeupdate="myScript">تجربة

في JavaScript:

audio|video.ontimeupdate=function(){myScript};تجربة

في JavaScript، يتم استخدام طريقة addEventListener():

audio|video.addEventListener("timeupdate", myScript);تجربة

ملاحظة: Internet Explorer 8 وأحدث إصدارات IE لا تدعمها addEventListener() الطريقة.

تفاصيل التقنية

العلامات HTML المدعومة:	<audio> و <video>
الجواهر البرمجية المدعومة:	Audio, Video

مثال على الإنترنت

عندما يتغير موقع التشغيل للأغنية، يتم عرض موقع التشغيل الحالي للأغنية (بأشهر).

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل أساسي حول استخدام حدث ontimeupdate لصوت/فيديو HTML - (oldtoolbag.com)</title>
</head>
<body>
<p>في هذا المثال، قمنا باستخدام HTML DOM لإضافة "ontimeupdate" إلى عنصر audio. </p>
تُشغّل الوظيفة عند بدء المستخدم تشغيل الفيديو أو تحريك موقع تشغيل الصوت، ويُعرض موقع التشغيل للفيديو.</p>
<audio id="myAudio" controls>
　　<source src="horse.ogg" type="audio/ogg">
　　<source src="horse.mp3" type="audio/mpeg">
　　　browser الخاص بك لا يدعم عنصر audio.
</audio>
<p>موقع التشغيل: <span id="demo"></span></p>
<script>
// الحصول على عنصر audio الذي يحمل id="myAudio"
var aud = document.getElementById("myAudio");
// إضافة حدث ontimeupdate لعنصر audio وإجراء وظيفة عند تغيير موقع التشغيل　
aud.ontimeupdate = function()　
{
　　　　myFunction();
};
function myFunction()　
{
　　　　// عرض موقع التشغيل في عنصر <p> الذي يحمل id="demo"
　　　　document.getElementById("demo").innerHTML = aud.currentTime;
}
</script>
</body>
</html>

اختبار لرؤية ‹/›

مثال على الإنترنت

استخدام currentTime لتعيين موقع التشغيل إلى 5 ثوان:

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل أساسي حول استخدام حدث ontimeupdate لصوت/فيديو HTML - (oldtoolbag.com)</title>
</head>
<body>
<video id="myVideo" width="320" height="240" controls>
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.ogg" type="video/ogg">
　　browser الخاص بك لا يدعم علامة الفيديو.
</video><br>
<button onclick="setCurTime()" type="button">تعيين موقع التشغيل إلى 5 ثوان</button>
<p id="demo"></p>
<script>
// الحصول على عنصر الفيديو الذي يحتوي على id="myVideo"
var vid = document.getElementById("myVideo");
// إضافة أحداث "timeupdate" إلى الفيديو
vid.addEventListener("timeupdate", getCurTime);
// عرض موقع التشغيل الحالي في عنصر p الذي يحتوي على id="demo"　
function getCurTime()　
{　
　　　　document.getElementById("demo").innerHTML = "موقع التشغيل الحالي هو  " + vid.currentTime + " ثانية.";
}　
// إعداد موقع التشغيل إلى 5 ثانية
function setCurTime()　
{　
　　　　vid.currentTime = 5;
}　
</script>　
</body>
</html>

اختبار لرؤية ‹/›

دليل مرجع DOM للأصوات والفيديوهات HTML

HTML: <template> علامة