فواصل » درس،عمل،تصميم،اتش،تي،ام،ال،5،html5،فيديو،تصميم،دروس،برمجه http://portal.fwasl.com Wed, 16 Oct 2019 18:49:35 +0000 ar hourly 1 https://wordpress.org/?v=3.9.40 درس عمل الفيديو الخاص بك بـ html5 http://portal.fwasl.com/%d8%af%d8%b1%d8%b3-%d8%b9%d9%85%d9%84-%d8%a7%d9%84%d9%81%d9%8a%d8%af%d9%8a%d9%88-%d8%a7%d9%84%d8%ae%d8%a7%d8%b5-%d8%a8%d9%83-%d8%a8%d9%80-html5/ http://portal.fwasl.com/%d8%af%d8%b1%d8%b3-%d8%b9%d9%85%d9%84-%d8%a7%d9%84%d9%81%d9%8a%d8%af%d9%8a%d9%88-%d8%a7%d9%84%d8%ae%d8%a7%d8%b5-%d8%a8%d9%83-%d8%a8%d9%80-html5/#comments Sat, 07 Jan 2012 00:40:52 +0000 http://www.portal.fwasl.com/?p=6870 سوف نتعلم اليوم كيفية عمل الفيديو بملامح html5 ولكي تستطيع أن ترى لوحة التحكم في التشغيل، فإنه من الضروري تعيين سمة الضوابط.

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

[/html]

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

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

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

واجهة HTMLMediaElement

هذه هي واجهة مشتركة لعناصر الوسائط (الصوت والفيديو) الذي يصف الوصول إلى المزايا الأساسية للعمل مع مضمون وسائل الإعلام : السيطرة على مصدر المحتوى ، التحكم في التشغيل، وتغيير مستوى الصوت ومعالجة الأخطاء. الخصائص الرئيسية والأساليب التي سنحتاج :

SRC — الارتباط (URL) للعب محتوى
مخزنة — قطع مخزنة من الفيديو

التشغيل والتحكم

  • currentTime
  • المدة –
  • توقف –
  • انتهى –
  • كتم الصوت –
  • سعة
  • مسرحية ()
  • وقفة ()
  • أحداث
    oncanplay — يمكنك البدء في اللعب
    تغير الموقف من اللعب — ontimeupdate
    onplay — وسائل الاعلام
  • onpause — مؤقتا
    onended — هو أكثر من اللعبالمهم : أنه ليس كل الأساليب والخصائص التي يمكن تنفيذها مع واجهة HTMLMediaElement.

واجهة HTMLVideoElement

الفيديو يختلف عن الصوت في عدة خصائص إضافية :
وال

العرض والارتفاع — العرض والارتفاع من الحاوية لتشغيل الفيديو؛
وvideoWidth videoHeight — العرض والارتفاع الداخلية للفيديو، إذا كنت لا تعرف أبعادها،

ملصق — ربط الصورة التي يمكن أن تظهر حتى الآن لا يتوفر الفيديو (​​عادة واحدة من الإطارات غير فارغة الأول).

الفرق بين العرض / الارتفاع وvideoWidth / videoHeight هو آخر واحد وخصائصها الخاصة من الفيديو ، وعلى وجه الخصوص ، نسبة الارتفاع وغيرها من الخصائص، في حين أن الحاويات لشريط الفيديو يمكن أن تكون ذات أي حجم (أكبر وأصغر ، من نسبة أخرى.)

للتشغيل والتوقيف

[html] <div> <video id="myvideo" width="480" height="270" poster="poster.gif" > <source src="trailer_480p.mp4" type=’video/mp4;codecs="avc1.42E01E, mp4a.40.2"’ /> <source src="trailer_480p.webm" type=’video/webm; codecs="vorbis,vp8"’/> </video> </div> <div id="controls"> <span id="playpause" >Play</span> </div> #controls span { display:inline-block; } #playpause { background:#eee; color:#333; padding:0 5px; font-size:12pt; text-transform:uppercase; width:50px; }

[/html]

والأن يمكننا إضافه بعض أكواد الجافا سكريبت

[html] $(document).ready(function(){ var controls = { video: $("#myvideo"), playpause: $("#playpause") }; var video = controls.video[0]; controls.playpause.click(function(){ if (video.paused) { video.play(); $(this).text("Pause"); } else { video.pause(); $(this).text("Play"); } $(this).toggleClass("paused"); }); });
[/html]

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

[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]

]]> http://portal.fwasl.com/%d8%af%d8%b1%d8%b3-%d8%b9%d9%85%d9%84-%d8%a7%d9%84%d9%81%d9%8a%d8%af%d9%8a%d9%88-%d8%a7%d9%84%d8%ae%d8%a7%d8%b5-%d8%a8%d9%83-%d8%a8%d9%80-html5/feed/ 0