اضغط هنــــــــــــــــــــا لمشاهد التنفيذ

هل تريد إضافة الفيديو إلى موقع الويب الخاص بك؟ HTML5 تمكننا من القيام بذلك بسهولة مثل وضع صور مع عنصر 

في هذا المثال، تشير سمة src إلى ملف الفيديو .

[html]</pre>
<video width="854" height="480" src="m/video.ogv" controls="controls" poster="m/video.jpg">

Your browser can’t play HTML5 video. <a href="m/video.ogv"> Download it</a> instead.

</video>
<pre>

[/html]

كما ترون، سمة src وهي تقوم بعمل اشكال بديله عن عناصر :

[html]

</pre>
<video width="854" height="480" controls="controls" poster="m/video.jpg"><source src="m/video.ogv" type="video/ogg" /><source src="m/video.mp4" type="video/mp4" /><object width="854" height="480" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://webdesign.portal.fwasl.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=/wp-admin/m/video.mp4&poster=/wp-admin/m/video.jpg" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /><embed width="854" height="480" type="application/x-shockwave-flash" src="http://webdesign.portal.fwasl.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" flashvars="url=/wp-admin/m/video.mp4&poster=/wp-admin/m/video.jpg" allowfullscreen="true" allowscriptaccess="true" /></object>

…
</video>
<pre>

[/html]

فلاش يدعم تشغيل الفيديو H.264، لذلك كل ما نحتاج إليه هو (at m/player.swf) ، وسنقوم بتمرير URL لإصدار شريط فيديو H.264 .
من المهم أن نلاحظ أن الطريق إلى MP4 يحتاج إلى أن يكون إما مطلق أو نسبي إلى الموقع لملف SWF –

[html]</pre>
<object width="854" height="504" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="flashvars" value="file=video.mp4" /><param name="src" value="m/player.swf" /><embed width="854" height="504" type="application/x-shockwave-flash" src="m/player.swf" allowfullscreen="true" allowscriptaccess="always" flashvars="file=video.mp4" /><!–[if IE]><!–><!–<![endif]–><img src="m/video.jpg" width="854" height="480" alt="Video" />Your browser can’t play HTML5 video. <a href="m/video.ogv">Download it</a> instead.</object>
<pre>

[/html]

لذا، إذا جمعنا كل هذا معا ، الرمز النهائي لدينا يبدو مثل هذا :

[html]</pre>
<video width="854" height="480" controls="controls" poster="m/video.jpg"><source src="m/video.ogv" type="video/ogg" /><source src="m/video.mp4" type="video/mp4" /><object width="854" height="480" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /><param name="flashvars" value="url=/wp-admin/m/video.mp4&poster=/wp-admin/m/video.jpg" /><param name="src" value="http://webdesign.portal.fwasl.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" /><embed width="854" height="480" type="application/x-shockwave-flash" src="http://webdesign.portal.fwasl.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" allowfullscreen="true" allowscriptaccess="true" flashvars="url=/wp-admin/m/video.mp4&poster=/wp-admin/m/video.jpg" /><!–[if IE]><!–><!–<![endif]–><img src="m/video.jpg" width="854" height="480" alt="Video" />Your browser can’t play HTML5 video. <a href="m/video.ogv"> Download it</a> instead.</object>

</video>
<pre>

[/html]

اصنع التحكم الخاص بك

قم بصنع ضوابط التحكم الخاصه بك والملائمه لجميع المتصفحات بدل من استخدام ضوابط التشغيل الإفتراضيه التي من شانها ان تكون فعاله مع متصفح وغير فعاله مع الاخر لذا عليك عمل التحكم المناس لتصميم موقعك.

لذا، دعونا نحاول خلق منطقتنا HTML المستندة إلى لوحة التحكم وباستخدام جافا سكريبت نقوم ببناء الفيديو الخاص بنا.

[html] <script>
function init() {
// 1. Check for video support
if( !document.createElement(‘video’).canPlayType ) return;
// 2. Get all video containers on the page
var videos = document.querySelectorAll( ‘div.video’ ),
videosLength = videos.length;
// 3. Get every single video instance
for( var i=0; i < videosLength; i++ ) {
var root = videos[i];
// 4. Get and create all needed elements
video = root.querySelector( ‘video’ ),
play = document.createElement( ‘button’ ),
mute = document.createElement( ‘button’ );
// 5. Turn off native video controls
video.controls = false;
// 6. Customise Play button behaviour
play.innerHTML = play.title = ‘Play’;
play.onclick = function() {
if( video.paused ) {
video.play();
play.innerHTML = play.title = ‘Pause’;
} else {
video.pause();
play.innerHTML = play.title = ‘Play’;
}
}
// 7. Customise Mute button behaviour
mute.innerHTML = mute.title = ‘Mute’;
mute.onclick = function() {
if( video.muted ) {
video.muted = false;
mute.innerHTML = mute.title = ‘Mute’;
} else {
video.muted = true;
mute.innerHTML = mute.title = ‘Unmute’;
}
}
// 8. Add custom controls to the video container
root.appendChild( play );
root.appendChild( mute );
}
}
// 9. Initialise function on page load
window.onload = init;
</script>

[/html]

الآن نستطيع السيطرة على شريط الفيديو معبعض جافا سكريبت . الأزرار تعمل بشكل جيد، لكنها لا تبدو أفضل بكثير من ضوابط الفيديو الأصلي. ومع ذلك ، قبل أن تبدأ في فعل بعض التصميم، دعونا نضيف جميع الطبقات اللازمة للأزرار لدينا عن طريق جافا سكريبت :

[html] play.className = ‘video-button video-play’;
play.onclick = function() {
if( video.paused ) {
…
// Additional class names for container and button while playing
root.className += ‘ video-on’;
play.className += ‘ video-play-on’;
} else {
…
// Remove additional class names for container and button in paused state
root.className = root.className.replace( ‘ video-on’, ” );
play.className = play.className.replace( ‘ video-play-on’, ” );
}
}

[/html]

الأزرار لدينا سوف تكون مربعة، ولكن مع بعض الزوايا الصعبة سنقوم بصنع نمط خاص بهم منهم لتبدو وكأنها دوائر :

[html] .video-play {
border-radius:25px;
}

[/html]

دعونا الأن نقوم بإضافة المزيد من الأبعاد مع خاصية علبة الظل، وتكون كل القيم الضرورية مفصولة بفواصل :

[html] .video-play {
box-shadow:0 0 50px #FFF,
inset 5px 5px 20px #444,
inset 0 -20px 40px #000;
}

[/html]