تعليق: يوفر HTML5 علامات فيديو جديدة ، والتي يمكنها تشغيل الفيديو مباشرة دون برمجة. ما عليك سوى كتابة بضعة أسطر من التعليمات البرمجية البسيطة لتخصيص المشغل.
صفحة الويب HTML<body>
<section>
<video>
<المصدر src = "videos/introduction.mp4">
</video>
<v>
<viv>
<button type = "button"> تشغيل </button>
</div>
<viv>
<viv> </viv>
</div>
<viv> </viv>
</nav>
</القسم>
</body>
نمط CSS
جسم{
محاذاة النص: المركز ؛
}
الرأس ، القسم ، تذييل ، جانبا ، NAV ، مقال ، hgroup {
العرض: كتلة ؛
}
#جلد{
العرض: 700 بكسل ؛
الهامش: 10px Auto ؛
الحشو: 5 بكسل ؛
الخلفية: أحمر.
الحدود: 4 بكسل سوداء صلبة.
الحدود الحدودية: 20 بكسل ؛
}
تبحر {
الهامش: 5px 0px ؛
}
#أزرار{
تعويم: اليسار.
العرض: 70 بكسل ؛
الارتفاع: 22px ؛
}
#DefaultBar {
الموقف: قريب
تعويم: اليسار.
العرض: 600 بكسل ؛
الارتفاع: 14px ؛
الحشو: 4px ؛
الحدود: 1 بكسل سوداء صلبة.
الخلفية: أصفر.
}
/*ProgressBar داخل DefaultBar*/
#progressbar {
الموقف: مطلق ؛
العرض: 0px ؛ /*التغييرات التحكم مع JavaScript*/
الارتفاع: 14px ؛ /* و DefaultBar هي نفس الارتفاع*/
الخلفية: الأزرق.
}
رمز JavaScript
وظيفة dofisrt ()
{
الحجم = 600 ؛ // احرص على عدم استخدام وحدات PX ، ولا تستخدم VAR ، فهو متغير عالمي
mymovie = document.getElementById ('mymovie') ؛
playbutton = document.getElementById ('playbutton') ؛
bar = document.getElementById ('DefaultBar') ؛
ProgressBar = document.getElementById ('ProgressBar') ؛
playbutton.addeventListener ("Click" ، Playorpause ، false) ؛ // المعلمة الثالثة خاطئ دائمًا ، قم بتسجيل معالج الحدث في مرحلة الفقاعات.
Bar.AdDeventListener ("Click" ، ClickedBar ، false) ؛
}
// التحكم في تشغيل الأفلام والتوقف
وظيفة playorpause () {
if (! mymovie.paused &&! mymovie.endd) {
mymovie.pause () ؛
playbutton.innerhtml = 'play' ؛
window.clearinterval (updatedbar) ؛
}آخر{
mymovie.play () ؛
playbutton.innerhtml = 'pause' ؛
updatedbar = setInterval (تحديث ، 500) ؛
}
}
// التحكم في العرض الديناميكي لشريط التقدم
تحديث الوظيفة () {
إذا (! mymovie.ended) {
var size = parseint (mymovie.currenttime*barsize/mymovie.duration) ؛
ProgressBar.Style.width = size+'px' ؛
}آخر{
ProgressBar.Style.width = '0px' ؛
playbutton.innerhtml = 'play' ؛
window.clearinterval (updatedbar) ؛
}
}
// الماوس انقر فوق طريقة التحكم في شريط التقدم
وظيفة ClickedBar (e) {
if (! mymovie.paused &&! mymovie.endd) {
var mousex = e.pagex-bar.offsetleft ؛
var newtime = mousex*mymovie.duration/barsize ؛ // وقت البدء الجديد
mymovie.currentTime = newtime ؛
ProgressBar.Style.width = mousex+'px' ؛
window.clearinterval (updatedbar) ؛
}
}
window.adDeventListener ('load' ، dofisrt ، false) ؛
شيء جيد ، لقد أخذت جزء الكود