سوف نتعلم اليوم كيفية عمل الفيديو بملامح html5 ولكي تستطيع أن ترى لوحة التحكم في التشغيل، فإنه من الضروري تعيين سمة الضوابط.

[html] <video src="trailer_480p.mp4" width="480" height="270" poster="poster.gif" controls />

[/html]

وطبعا تختلف من تبعا لإختلاف المتصفح

API للتحكم في التشغيل

HTML5 للفيديو تقدم واجهة جديدة هي DOM — HTMLVideoElement، الذي بدوره يرث من واجهة HTMLMediaElement.

واجهة HTMLMediaElement

التشغيل مرة أخرى من البداية
أولا ، نحن بحاجة الى التعامل بالشكل الملائم مع نهاية تشغيل الفيديو وعند هذه النقطة لتبديل الأزرار بحيث بدلا من الحاله «وقفة» مشيرا الى ان الحاله«التشغيل» :

[html] video.addEventListener("ended", function() { video.pause(); controls.playpause.text("Play"); controls.playpause.toggleClass("paused"); });
[/html]

قائمة المحتوي

يمكن للمستخدم عموما إجراء تغييرات تجاوز الضوابط لدينا. وينبغي أيضا ذكر هذه النقطة وينبغي تطبيق التغييرات الضرورية لظهور الضوابط أيضا. هذا يكفي للاشتراك في onplay onpause والأحداث.

[html] video.addEventListener("play", function() { controls.playpause.text("Pause"); controls.playpause.toggleClass("paused"); }); video.addEventListener("pause", function() { controls.playpause.text("Play"); controls.playpause.toggleClass("paused"); });
[/html]

لدينا تغييرات كثيرة جدا في المظهر ، والأن نريد إنهاء الرجوع للنمط الأصلي عن طريق الشروط التاليه :

[html] var controls = { … togglePlayback: function() { (video.paused) ? video.play() : video.pause(); } … }; controls.playpause.click(function(){ controls.togglePlayback(); });
[/html]

نقر الفيديو

بالتأكيد، كنت ترغب في التبديل بين التشغيل والتوقف عن طريق النقر على شريط الفيديو في حد ذاته، لذلك ستحتاج إلى إضافة بضعة سطور :

[html] 23 controls.video.click(function() { controls.togglePlayback(); });

[/html]

العرض

. أولا نحن بحاجة إلى إضافة بعض البنود التي سيتم استخدامها لعرض الوضع الحالي وإدارة الوضع الحالي :

[html] <span id="progress"> <span id="total"> <span id="buffered"><span id="current">​</span></span> </span> </span> <span id="time"> <span id="currenttime">00:00</span> / <span id="duration">00:00</span> </span>

[/html]

وهذا هو الستايل المناسب

[html] #progress { width:290px; } #total { width:100%; background:#999; } #buffered { background:#ccc; } #current { background:#eee; line-height:0; height:10px; } #time { color:#999; font-size:12pt; }
[/html]

الصوت

أخيرا، دعونا نضيف لمسة علي شريط فيديو لدينا — القدرة على تمكين أو تعطيل الصوت.

[html] 34567891011121314 <span id="volume"> <svg id="dynamic" version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 95.465 95.465"> <g > <polygon points="39.323,20.517 22.705,37.134 0,37.134 0,62.865 22.705,62.865 39.323,79.486 "/> <path d="M52.287,77.218c14.751-15.316,14.751-39.116,0-54.436c-2.909-3.02-7.493,1.577-4.59,4.59 c12.285,12.757,12.285,32.498,0,45.254C44.794,75.645,49.378,80.241,52.287,77.218L52.287,77.218z"/> <path d="M62.619,89.682c21.551-22.103,21.551-57.258,0-79.36c-2.927-3.001-7.515,1.592-4.592,4.59 c19.08,19.57,19.08,50.608,0,70.179C55.104,88.089,59.692,92.683,62.619,89.682L62.619,89.682z"/> <path d="M75.48,99.025c26.646-27.192,26.646-70.855,0-98.051c-2.936-2.996-7.524,1.601-4.592,4.59 c24.174,24.674,24.174,64.2,0,88.871C67.956,97.428,72.545,102.021,75.48,99.025L75.48,99.025z"/> </g> </svg> </span>

[/html]

وهذا هو الستايل

[html] #dynamic { fill:#333; padding:0 5px; } #dynamic.off { fill:#ccc; }
[/html]

و لتغيير الحاله نحتاج الي اضافة mute :

[html] controls.dynamic.click(function() { var classes = this.getAttribute("class"); if (new RegExp(‘\\boff\\b’).test(classes)) { classes = classes.replace(" off", ""); } else { classes = classes + " off"; } this.setAttribute("class", classes); video.muted = !video.muted; });

[/html]