السلام عليكم ورحمة الله وبركاته
معاكم اخوكم مناف عقيل مهدي ,اليوم في هذا الشرح باذن الله سوف نتعلم كيفية انشاء مشغل فيديو خاص بموقعك لتشغيل الفيديوهات عليه بالــ
html5 , css3 , javascript.
لنبدأ في الشرح:
اولا : انشأ مجلد في اي مكان على حاسوبك وفي داخل المجلد سننشأ الملفات المطلوبة فيه.
ثانيا : افتح محرر النصوص الخاص بك انا استخدم "brackets" من شركة ادوبي مفتوح المصدر يمكنكم تحميله من هنا.
ثالثا : انشأ ملف اسمه index.html وانسخ هذا الكود والصقه في الملف :
<!DOCTYPE HTML><html><head>
<title>Munaf Aqeel Mahdi</title>
<link rel='stylesheet' type='text/css' href='style.css' /><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src='javascript.js'></script>
<script type='text/javascript'>
$(document).ready(function() { $('video').videoPlayer({ 'playerWidth' : 0.95, 'videoClass' : 'video' });});
</script>
</head><body><div class="container"> <video width="700" height="400"> <source src="video.mp4" type="video/mp4"> </video></div>
</body></html>
رابعا : انشأ ملف اسمه style.css وانسخ هذا الكود والصقه في الملف :
body { font-size: 62.5%; padding: 0; margin: 0;}
.player { background: linear-gradient(rgba(0, 0, 0, 0),rgb(0, 0, 0)); box-sizing: border-box; border-radius: 5px; width: 100%; height: 80px; float: left; font-family: Arial, sans-serif; position: absolute; padding: 0; bottom: 5px; left: 0px; right: 0px; z-index: 2; opacity: 1; -webkit-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in; -moz-user-select: none; -webkit-user-select: none; user-select: none;}
.video { position: relative; margin: 0px auto;}
.video:hover .player { opacity: 1;}
.player .progress { width: 60%; height: 20px; border-radius: 5px; background: #000000; box-shadow: inset 0 -5px 10px rgba(0,0,0,0.1); float: left; cursor: pointer; margin: 24px 0 0 0; padding: 0; position: relative; font-variant: normal;}
.player .progresششs-bar { background: #892dbf; box-shadow: inset -30px 0px 69px -20px #4f007d; border-radius: 5px; height: 100%; position: relative; z-index: 999; width: 0;}
.player .button-holder { position: relative; left: 10px;}
.player .progress-button { background: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.3); border-radius: 10px; width: 10px; height: 20px; position: absolute; left: -20px; text-decoration: overline;}
.player [class^="buffered"] { background: rgba(255,255,255,0.1); position: absolute; top: 0; left: 30px; height: 100%; border-radius: 5px; z-index: 1;}
.player .play-pause { display: inline-block; font-size: 3em; float: left; text-shadow: 0 0 0 #fff; color: rgba(255,255,255,0.8); width: 10%; padding: 17px 0 0 3%; cursor: pointer; font-variant: small-caps;}
.player .play, .player .pause-button { -webkit-transition: all 0.2s ease-out;}
.player .play .pause-button, .player .pause .play-button { display: none;}
.player .pause-button { padding: 5px 2px; box-sizing: border-box; -moz-box-sizing: border-box; height: 34px;}
.player .pause-button span { background: #fff; width: 8px; height: 24px; float: left; display: block;}
.player .pause-button span:first-of-type { margin: 0 4px 0 0;}
.player .time { color: #fff; font-weight: bold; font-size: 1.2em; position: absolute; right: 0; top: 24px;}
.player .stime, .ttime { color: #ffffff;}.player .play:hover { text-shadow: 0 0 5px #fff;}
.player .play:active, .pause-button:active span { text-shadow: 0 0 7px #fff;}
.player .pause-button:hover span { box-shadow: 0 0 5px #fff;} .player .pause-button:active span { box-shadow: 0 0 7px #fff;}
.player .volume { position: relative; float: left; width: 8%; margin: 0 0 0 4%; height: 100%;}
.player .volume-icon { padding: 1.5%; height: 100%; cursor: pointer; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-transition: all 0.15s linear;}
.player .volume-icon-hover {}
.player .volume-holder { height: 100px; width: 100%; position: absolute; display: none; left: 0; border-radius: 5px 5px 0 0; top: -80px;}
.player .volume-bar-holder { background: #333; width: 20px; box-shadow: inset 0px 0px 5px rgba(0,0,0,0.3); margin: 15px auto; height: 80px; border-radius: 5px; position: relative; cursor: pointer;}
.player .volume-button { background: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.3); border-radius: 30px; width: 20px; height: 20px;}
.player .volume-button-holder { position: relative; top: -10px; }
.player .volume-bar { background: #892dbf; box-shadow: inset -30px 0px 69px -20px #4f007d; border-radius: 5px; width: 100%; height: 100%; position: absolute; bottom: 0;}
.player .fullscreen { width: 12%; cursor: pointer; float: left; height: 100%;}
.player .fullscreen a { width: 25px; height: 20px; border-radius: 3px; background: #fff; display: block; position: relative; top: 23px; margin: 0px auto;}
.player .volume-icon span { width: 20%; height: 13%; background-color: #fff; display: block; position: relative; z-index: 1; font-weight: bold; top: 40%; color: #fff; left: 22%;}
.player .volume-icon span:before,.player .volume-icon span:after { content: ''; position: absolute;}.player .volume-icon span:before { width: 0; height: 0; border: 1em solid transparent; border-left: none; border-right-color: #fff; z-index: 2; top: -2px; left: 10%; margin-top: -40%;}.player .volume-icon span:after { width: 2%; height: 2%; border: 1px solid #fff; left: 190%; border-width: 0px 0px 0 0; top: 5px; border-radius: 0 50px 0 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); font-variant: small-caps; }
.player .v-change-11 span:after { border-width: 10px 10px 0 0; top: 0; }.player .v-change-10 span:after { border-width: 9px 9px 0 0; top: 1px; }.player .v-change-9 span:after { border-width: 8px 8px 0 0; top: 1px; }.player .v-change-8 span:after { border-width: 7px 7px 0 0; top: 2px; }.player .v-change-7 span:after { border-width: 6px 6px 0 0; top: 2px; }.player .v-change-6 span:after { border-width: 5px 5px 0 0; top: 3px; }.player .v-change-5 span:after { border-width: 4px 4px 0 0; top: 3px; }.player .v-change-4 span:after { border-width: 3px 3px 0 0; top: 4px; }.player .v-change-3 span:after { border-width: 2px 2px 0 0; top: 4px; }.player .v-change-2 span:after { border-width: 1px 1px 0 0; top: 5px; }.player .v-change-1 span:after { border-width: 0px 0px 0 0; top: 5px; }
.player .v-change-1 span:after { content: '+'; -webkit-transform: rotate(45deg); font-size: 20px; top: -6px; left: 25px;}
/* ------- IGNORE */
#header { width: 100%; margin: 0px auto;}
#header #center { text-align: center;}
#header h1 span { color: #000; display: block; font-size: 50px;}
#header p { font-family: 'Georgia', serif;}#header h1 { color: #892dbf; font: bold 40px 'Bree Serif', serif;}
.container { padding: 40px 0 0 0;}
خامسا : انشأ ملف اسمه javascript.js وانسخ هذا الكود والصقه في الملف :
(function($) {
$.fn.videoPlayer = function(options) { var settings = { playerWidth : '0.95', // Default is 95% videoClass : 'video' // Video Class } if(options) { $.extend(settings, options); } return this.each(function() { $(this)[0].addEventListener('loadedmetadata', function() { // Basic Variables var $this = $(this); var $settings = settings; $this.wrap('<div class="'+$settings.videoClass+'"></div>'); var $that = $this.parent('.'+$settings.videoClass); { $( '<div class="player">' + '<div class="play-pause play">' + '<span class="play-button">►</span>' + '<div class="pause-button">' + '<span> </span>' + '<span> </span>' + '</div>' + '</div>' + '<div class="progress">' + '<div class="progress-bar">' + '<div class="button-holder">' + '<div class="progress-button"> </div>' + '</div>' + '</div>' + '<div class="time">' + '<span class="ctime">00:00</span>' + '<span class="stime"> / </span>' + '<span class="ttime">00:00</span>' + '</div>' + '</div>' + '<div class="volume">' + '<div class="volume-holder">' + '<div class="volume-bar-holder">' + '<div class="volume-bar">' + '<div class="volume-button-holder">' + '<div class="volume-button"> </div>' + '</div>' + '</div>' + '</div>' + '</div>' + '<div class="volume-icon v-change-0">' + '<span> </span>' + '</div>' + '</div>' + '<div class="fullscreen"> ' + '<a href="#"> </a>' + '</div>' + '</div>').appendTo($that); } $videoWidth = $this.width(); $that.width($videoWidth+'px'); var $spc = $(this)[0], $duration = $spc.duration, $volume = $spc.volume, currentTime; var $mclicking = false, $vclicking = false, $vidhover = false, $volhover = false, $playing = false, $drop = false, $begin = false, $draggingProgess = false, $storevol, x = 0, y = 0, vtime = 0, updProgWidth = 0, volume = 0; var $volume = $spc.volume; $that.bind('selectstart', function() { return false; }); var progWidth = $that.find('.progress').width();
var bufferLength = function() { var buffered = $spc.buffered; $that.find('[class^=buffered]').remove(); if(buffered.length > 0) { var i = buffered.length; while(i--) { $maxBuffer = buffered.end(i); $minBuffer = buffered.start(i); var bufferOffset = ($minBuffer / $duration) * 100; var bufferWidth = (($maxBuffer - $minBuffer) / $duration) * 100; $('<div class="buffered"></div>').css({"left" : bufferOffset+'%', 'width' : bufferWidth+'%'}).appendTo($that.find('.progress')); } } } bufferLength(); var timeUpdate = function($ignore) { var time = Math.round(($('.progress-bar').width() / progWidth) * $duration); var curTime = $spc.currentTime; var seconds = 0, minutes = Math.floor(time / 60), tminutes = Math.round($duration / 60), tseconds = Math.round(($duration) - (tminutes*60)); if(time) { seconds = Math.round(time) - (60*minutes); if(seconds > 59) { seconds = Math.round(time) - (60*minutes); if(seconds == 60) { minutes = Math.round(time / 60); seconds = 0; } } } updProgWidth = (curTime / $duration) * progWidth if(seconds < 10) { seconds = '0'+seconds; } if(tseconds < 10) { tseconds = '0'+tseconds; } if($ignore != true) { $that.find('.progress-bar').css({'width' : updProgWidth+'px'}); $that.find('.progress-button').css({'left' : (updProgWidth-$that.find('.progress-button').width())+'px'}); } $that.find('.ctime').html(minutes+':'+seconds) $that.find('.ttime').html(tminutes+':'+tseconds); if($spc.currentTime > 0 && $spc.paused == false && $spc.ended == false) { bufferLength(); } } timeUpdate(); $spc.addEventListener('timeupdate', timeUpdate); $that.find('.play-pause').bind('click', function() { if($spc.currentTime > 0 && $spc.paused == false && $spc.ended == false) { $playing = false; } else { $playing = true; } if($playing == false) { $spc.pause(); $(this).addClass('play').removeClass('pause'); bufferLength(); } else { $begin = true; $spc.play(); $(this).addClass('pause').removeClass('play'); } }); $that.find('.progress').bind('mousedown', function(e) { $mclicking = true; if($playing == true) { $spc.pause(); } x = e.pageX - $that.find('.progress').offset().left; currentTime = (x / progWidth) * $duration; $spc.currentTime = currentTime; }); $that.find('.volume-bar-holder').bind('mousedown', function(e) { $vclicking = true; y = $that.find('.volume-bar-holder').height() - (e.pageY - $that.find('.volume-bar-holder').offset().top); if(y < 0 || y > $(this).height()) { $vclicking = false; return false; } $that.find('.volume-bar').css({'height' : y+'px'}); $that.find('.volume-button').css({'top' : (y-($that.find('.volume-button').height()/2))+'px'}); $spc.volume = $that.find('.volume-bar').height() / $(this).height(); $storevol = $that.find('.volume-bar').height() / $(this).height(); $volume = $that.find('.volume-bar').height() / $(this).height(); volanim(); }); var volanim = function() { for(var i = 0; i < 1; i += 0.1) { var fi = parseInt(Math.floor(i*10)) / 10; var volid = (fi * 10)+1; if($volume == 1) { if($volhover == true) { $that.find('.volume-icon').removeClass().addClass('volume-icon volume-icon-hover v-change-11'); } else { $that.find('.volume-icon').removeClass().addClass('volume-icon v-change-11'); } } else if($volume == 0) { if($volhover == true) { $that.find('.volume-icon').removeClass().addClass('volume-icon volume-icon-hover v-change-1'); } else { $that.find('.volume-icon').removeClass().addClass('volume-icon v-change-1'); } } else if($volume > (fi-0.1) && volume < fi && !$that.find('.volume-icon').hasClass('v-change-'+volid)) { if($volhover == true) { $that.find('.volume-icon').removeClass().addClass('volume-icon volume-icon-hover v-change-'+volid); } else { $that.find('.volume-icon').removeClass().addClass('volume-icon v-change-'+volid); } } } } volanim(); $that.find('.volume').hover(function() { $volhover = true; }, function() { $volhover = false; }); $('body, html').bind('mousemove', function(e) { if($begin == true) { $that.hover(function() { $that.find('.player').stop(true, false).animate({'opacity' : '1'}, 0.5); }, function() { $that.find('.player').stop(true, false).animate({'opacity' : '0'}, 0.5); }); } if($mclicking == true) { $draggingProgress = true; var progMove = 0; var buttonWidth = $that.find('.progress-button').width(); x = e.pageX - $that.find('.progress').offset().left; if($playing == true) { if(currentTime < $duration) { $that.find('.play-pause').addClass('pause').removeClass('play'); } } if(x < 0) { progMove = 0; $spc.currentTime = 0; } else if(x > progWidth) { $spc.currentTime = $duration; progMove = progWidth; } else { progMove = x; currentTime = (x / progWidth) * $duration; $spc.currentTime = currentTime; } $that.find('.progress-bar').css({'width' : $progMove+'px'}); $that.find('.progress-button').css({'left' : ($progMove-buttonWidth)+'px'}); } if($vclicking == true) { y = $that.find('.volume-bar-holder').height() - (e.pageY - $that.find('.volume-bar-holder').offset().top); var volMove = 0; if($that.find('.volume-holder').css('display') == 'none') { $vclicking = false; return false; } if(!$that.find('.volume-icon').hasClass('volume-icon-hover')) { $that.find('.volume-icon').addClass('volume-icon-hover'); } if(y < 0 || y == 0) { $volume = 0; volMove = 0; $that.find('.volume-icon').removeClass().addClass('volume-icon volume-icon-hover v-change-11'); } else if(y > $(this).find('.volume-bar-holder').height() || (y / $that.find('.volume-bar-holder').height()) == 1) { $volume = 1; volMove = $that.find('.volume-bar-holder').height(); $that.find('.volume-icon').removeClass().addClass('volume-icon volume-icon-hover v-change-1'); } else { $volume = $that.find('.volume-bar').height() / $that.find('.volume-bar-holder').height(); volMove = y; } $that.find('.volume-bar').css({'height' : volMove+'px'}); $that.find('.volume-button').css({'top' : (volMove+$that.find('.volume-button').height())+'px'}); volanim();
$spc.volume = $volume; $storevol = $volume; }
if($volhover == false) { $that.find('.volume-holder').stop(true, false).fadeOut(100); $that.find('.volume-icon').removeClass('volume-icon-hover'); } else { $that.find('.volume-icon').addClass('volume-icon-hover'); $that.find('.volume-holder').fadeIn(100); } }) $spc.addEventListener('ended', function() { $playing = false; if($draggingProgress == false) { $that.find('.play-pause').addClass('play').removeClass('pause'); } }); $that.find('.volume-icon').bind('mousedown', function() { $volume = $spc.volume; if(typeof $storevol == 'undefined') { $storevol = $spc.volume; } if($volume > 0) { $spc.volume = 0; $volume = 0; $that.find('.volume-bar').css({'height' : '0'}); volanim(); } else { $spc.volume = $storevol; $volume = $storevol; $that.find('.volume-bar').css({'height' : ($storevol*100)+'%'}); volanim(); } });
$('body, html').bind('mouseup', function(e) { $mclicking = false; $vclicking = false; $draggingProgress = false; if($playing == true) { $spc.play(); } bufferLength(); }); if(!$spc.requestFullscreen && !$spc.mozRequestFullScreen && !$spc.webkitRequestFullScreen) { $('.fullscreen').hide(); } $('.fullscreen').click(function() { if ($spc.requestFullscreen) { $spc.requestFullscreen(); } else if ($spc.mozRequestFullScreen) { $spc.mozRequestFullScreen(); } else if ($spc.webkitRequestFullScreen) { $spc.webkitRequestFullScreen(); } }); }); }); } })(jQuery);
وسابعا ً : واخيرا ضع فيديو داخل المجلد اسمه video بصيغة mp4 لكي يعمل معك بنجاح.
وهكذا نكون قد انشانا مشغل الفيديو الخاص بنا لكن يجب عليك فهم الكود جيدا ليس فقط تنسخ وتلصق بدون فهم .
صورة المشغل بعد الانتهاء
يمكنكم تحميل الملفات كاملة من هنا
هكذا نكون قد انتهينا من درسنا وشرحنا لهذا اليوم القاكم في دروس جديدة انشاءالله الى اللقاء.
شرح برمجة مشغل فيديو خاص بموقعك HTML5-CSS3-JS
Reviewed by Munaf Aqeel Mahdi
on
6:54 AM
Rating:
Reviewed by Munaf Aqeel Mahdi
on
6:54 AM
Rating:
اخي ارجوك اجب انا عندي موقع افلام على بلوجر اريد اسوي مغشل فيديوهات بس المشكلة من اسوي يعني مايقبل بس mp4 يعني اريدة يوتيوب واي فيديو ممكن تسويلي لو سمحت
ReplyDeleteانا اصمم لك اتواصل معايا
Deleteانا اصمم لك اتواصل معايا
ReplyDeleteعلى بريد الالكتروني
khaled059986@gmail.com
online coding courses for kids I have read all the comments and suggestions posted by the visitors for this article are very fine,We will wait for your next article so only.Thanks!
ReplyDelete