|
بقعة لغات البرمجة يناقش هاذا المنتدى لغات البرمجة فيجوال بيسيك , فيجوال سي ++ , دلفي , أكسيس , أوراكل , جافا , الاسمبلي, بي اتش بي, HTML , .. |
انشر الموضوع |
|
أدوات الموضوع | انواع عرض الموضوع |
10.07.2012, 05:29 | المشاركة رقم: 1 | ||||||||||||||||||||||||||||||||||
|
المنتدى :
بقعة لغات البرمجة
تعلمت اليوم كيف جلب مقاطع الفيديو من قناة اليوتيوب الخاصه بك بواسطة جافا سكربت .. واحببت ان اشارككم ماتعلمت .. نبدأ على بركة الله .. اولاً نقوم بانشاء صفحة html ونسميها مثلاً youtube.html محتوى الصفحة رمز PHP: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script> <script type="text/javascript"> function loadVideo(playerUrl, autoplay) { swfobject.embedSWF( playerUrl + '&rel=1&border=0&fs=1&autoplay=' + (autoplay?1:0), 'player', '290', '250', '9.0.0', false, false, {allowfullscreen: 'true'}); } function showMyVideos2(data) { var feed = data.feed; var entries = feed.entry || []; var html = ['<ul class="videos">']; for (var i = 0; i < entries.length; i++) { var entry = entries[i]; var title = entry.title.$t; //2011-01-16T15:05:56.000Z var published = entry.published.$t; var totalSeconds = entry.media$group.yt$duration.seconds; var minutes = Math.floor(totalSeconds/60); var seconds = totalSeconds % 60; if(minutes<10) minutes = "0" + minutes; if(seconds<10) seconds = "0" + seconds; var duration = minutes + ":" + seconds; var description = entry.media$group.media$description.$t; var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url; thumbnailUrl = thumbnailUrl.replace("http","https"); var playerUrl = entries[i].media$group.media$content[0].url; html.push('<li><a href="javascript:loadVideo(\'', playerUrl, '\', true)"><img src="', thumbnailUrl, '" width="130" height="97" /></a><label>', title, '...<br />', description, '<br /><span>',duration,'</span><br /></label></li>'); } html.push('</ul><br style="clear: left;"/>'); document.getElementById('videos2').innerHTML = html.join(''); if (entries.length > 0) { loadVideo(entries[0].media$group.media$content[0].url, false); } } </script> <style> #Turkialawlqy ul h4,h5,h6,dl,ol,ul,li,label,thead,tr,th,a:link,a:vi sited,img,a:link img,a:visited img{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none;line-height:1em;quotes:none;list-style:none} #Turkialawlqy{position:fixed;right:-5px;top:30px;z-index:1000} #Turkialawlqy ul li{background:transparent;height:100px;margin:0;te xt-align:right} #Turkialawlqy ul li:hover{margin:0 5px 0 0;*width:355px} #Turkialawlqy ul li .Turkialawlqy{background: url(images/spacer.png) repeat top right;margin:-93px 45px 0;*margin:0 45px;padding:0;position:absolute;right:0;width:aut o;-moz-border-radius:6px;-webkit-border-radius:6px} #Turkialawlqy ul li:hover .Turkialawlqy{display:block} #Turkialawlqy ul li#fbWidget .Turkialawlqy{*display:none} #Turkialawlqy ul li#fbWidget.on .Turkialawlqy{*display:block} #Turkialawlqy ul li#fbWidget.on{*margin:0 5px 0 0} #Turkialawlqy ul li#fbWidget.off .Turkialawlqy{} #Turkialawlqy ul li .Turkialawlqy .Turkialawlqy-content{background:#fff;margin:5px;padding:8px;-moz-border-radius:5px;-webkit-border-radius:5px} #Turkialawlqy ul li .Turkialawlqy #youtubeWrapper.Turkialawlqy-content{max-height:410px;overflow:hidden;*width:290px} #Turkialawlqy ul #youtubeWrapper ul li{background:#fff;clear:both;display:none;font-size:.85em;margin:0} #Turkialawlqy ul #youtubeWrapper ul li+li{display:block} #Turkialawlqy ul #youtubeWrapper ul li a{display:inline;float:right} #Turkialawlqy ul #youtubeWrapper ul li label{color:#666;display:inline;float:left;font-size:.9em;line-height:1.1em;margin:5px;max-height:70px;overflow:hidden;width:130px} #Turkialawlqy ul #youtubeWrapper #playerContainer{height:180px;margin:0 0 77px} #Turkialawlqy ul #youtubeWrapper #videos2{height:90px;margin-top:8px;overflow-y:auto} #Turkialawlqy ul li .youtube{height:35px;padding:3px;min-width:275px;*width:275px} #Turkialawlqy ul li .youtube h4{float:right} #Turkialawlqy ul li .youtube button{background:url(images/youtube-subscribe.png) no-repeat 0 0;border:0;color:#000;cursorointer;float:left;fo nt-size:12px;font-weight:bold;line-height:.9em;*line-height:1.8em;margin:-2px;*margin-right:45px;min-height:25px;padding:0;width:80px} #Turkialawlqy ul li .youtube button:hover{color:#fff} </style> </head> <body> <div id="Turkialawlqy"> <ul> <li id="uTubeWidget" onmouseover="loadTurkialawlqy('youtube');this.clas sName='on';" onmouseout="this.className='off'" class="off"> <div class="Turkialawlqy"> <div id="youtubeWrapper" class="Turkialawlqy-content"> <div id="playerContainer"> <object type="" width="290" height="250" id="player" style="visibility: visible; "></object> </div> <div id="videos2"></div> </div> </div> </li> </ul> </div> <script type="text/javascript" src="https://gdata.youtube.com/feeds/users/ibrahimqdeah/uploads?alt=json-in-script&callback=showMyVideos2&max-results=20"></script> </body> </html> ساقوم الان بشرح الاكواد السابقة .. اولاً : رمز Code: <script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script> هذا الكود لجلب ملف swfobject.js الخاص بتشغيل مقاطع اليوتيوب ثانياً : رمز Code: <script type="text/javascript"> function loadVideo(playerUrl, autoplay) { swfobject.embedSWF( playerUrl + '&rel=1&border=0&fs=1&autoplay=' + (autoplay?1:0), 'player', '290', '250', '9.0.0', false, false, {allowfullscreen: 'true'}); } function showMyVideos2(data) { var feed = data.feed; var entries = feed.entry || []; var html = ['<ul class="videos">']; for (var i = 0; i < entries.length; i++) { var entry = entries[i]; var title = entry.title.$t; //2011-01-16T15:05:56.000Z var published = entry.published.$t; var totalSeconds = entry.media$group.yt$duration.seconds; var minutes = Math.floor(totalSeconds/60); var seconds = totalSeconds % 60; if(minutes<10) minutes = "0" + minutes; if(seconds<10) seconds = "0" + seconds; var duration = minutes + ":" + seconds; var description = entry.media$group.media$description.$t; var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url; thumbnailUrl = thumbnailUrl.replace("http","https"); var playerUrl = entries[i].media$group.media$content[0].url; html.push('<li><a href="javascript:loadVideo(\'', playerUrl, '\', true)"><img src="', thumbnailUrl, '" width="130" height="97" /></a><label>', title, '...<br />', description, '<br /><span>',duration,'</span><br /></label></li>'); } html.push('</ul><br style="clear: left;"/>'); document.getElementById('videos2').innerHTML = html.join(''); if (entries.length > 0) { loadVideo(entries[0].media$group.media$content[0].url, false); } } </script> هذا الكود ينقسم الى اجزاء سوف اشرحها في خطوات بسيطه لكي يكون الامر سهلاً 1- الكود الخاص بتشغيل الفيديو الذي يتم اختياره وهو كالتالي رمز Code: function loadVideo(playerUrl, autoplay) { swfobject.embedSWF( playerUrl + '&rel=1&border=0&fs=1&autoplay=' + (autoplay?1:0), 'player', '290', '250', '9.0.0', false, false, {allowfullscreen: 'true'}); } طبعاً واضح في الكود حجم الفيديو 290*250 2- الجزء الخاص بعرض معلومات مقطع الفيديو * عنوان الفيديو * وصف الفيديو * وقت الفيديو رمز Code: function showMyVideos2(data) { var feed = data.feed; var entries = feed.entry || []; var html = ['<ul class="videos">']; for (var i = 0; i < entries.length; i++) { var entry = entries[i]; var title = entry.title.$t; //2011-01-16T15:05:56.000Z var published = entry.published.$t; var totalSeconds = entry.media$group.yt$duration.seconds; var minutes = Math.floor(totalSeconds/60); var seconds = totalSeconds % 60; if(minutes<10) minutes = "0" + minutes; if(seconds<10) seconds = "0" + seconds; var duration = minutes + ":" + seconds; var description = entry.media$group.media$description.$t; var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url; thumbnailUrl = thumbnailUrl.replace("http","https"); var playerUrl = entries[i].media$group.media$content[0].url; html.push('<li><a href="javascript:loadVideo(\'', playerUrl, '\', true)"><img src="', thumbnailUrl, '" width="130" height="97" /></a><label>', title, '...<br />', description, '<br /><span>',duration,'</span><br /></label></li>'); } html.push('</ul><br style="clear: left;"/>'); document.getElementById('videos2').innerHTML = html.join(''); if (entries.length > 0) { loadVideo(entries[0].media$group.media$content[0].url, false); } } وهو ايضاً ينقسم الى عدة اقسام سنشرحها في نقاط مختصره +---| انشاء متغير لجلب البيانات من موقع اليوتيوب ( feed ) رمز Code: var feed = data.feed; var entries = feed.entry || []; +---| انشاء قائمة تحمل كلاس videos لكي يتم عرض الفيديوهات ومعلومات الفيديو في القائمة رمز Code: var html = ['<ul class="videos">']; +---| وفي الكود التالي قمنا بعمل حلقة تكرار ومن حلقة التكرار هذه نستخرج الفيديو ومعلوماته رمز Code: for (var i = 0; i < entries.length; i++) { var entry = entries[i]; var title = entry.title.$t; //2011-01-16T15:05:56.000Z var published = entry.published.$t; var totalSeconds = entry.media$group.yt$duration.seconds; var minutes = Math.floor(totalSeconds/60); var seconds = totalSeconds % 60; if(minutes<10) minutes = "0" + minutes; if(seconds<10) seconds = "0" + seconds; var duration = minutes + ":" + seconds; var description = entry.media$group.media$description.$t; var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url; thumbnailUrl = thumbnailUrl.replace("http","https"); var playerUrl = entries[i].media$group.media$content[0].url; html.push('<li><a href="javascript:loadVideo(\'', playerUrl, '\', true)"><img src="', thumbnailUrl, '" width="130" height="97" /></a><label>', title, '...<br />', description, '<br /><span>',duration,'</span><br /></label></li>'); } +-----|| نلاحظ في الحلقة var title وهو متغير لجلب عنوان الفيديو +-----|| نلاحظ في الحلقة var published وهو متغير لجلب وصف الفيديو +-----|| نلاحظ في الحلقة var totalSeconds وهو متغير يعرض لنا وقت الفيديو هذه هي اهم متغيرات الكود السابق طبعاً الاغلبية لديه خبره في اكواد css و html ولهذا السبب لم اتطرق لشرحها مطلقاً لمشاهدة مثال على العمل طµظ†ط¯ظˆظ‚ ط§ظ„ط§ط¹ط¬ط§ط¨ ط§ظ„ط´ط§ظ…ظ„ ط§ظ„ط§طµط¯ط§ط± 4 فقط اختر قائمة اليوتيوب لكي تشاهد ماقمنا بشرحه هنا اتمنى انني افدتكم ولو بشيئ بسيط |
||||||||||||||||||||||||||||||||||
14.07.2012, 03:19 | المشاركة رقم: 2 | ||||||||||||||||||||||||||||||||||
|
كاتب الموضوع :
لوجين
المنتدى :
بقعة لغات البرمجة
|
||||||||||||||||||||||||||||||||||
مواقع النشر (المفضلة) |
الكلمات الدلالية (Tags) |
من, الخاصة, الجافا, ادراج, باليوتيوب, شرح, سكريت, عن, فيديو, طريق, قناتك, كيفية |
أدوات الموضوع | |
انواع عرض الموضوع | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
فلاش لانشودة الاكثر مشاهدة باليوتيوب لا تفوتكم | مريم وسام | بقعة الاناشيد | 1 | 11.06.2012 02:31 |
برنامج فيه كل أسرار الحاسب | sofia | ~ ..آڸڪمـْبيۉٺژ ۉآڸبژآمـْج .. ~ ღ | 0 | 17.03.2010 05:11 |
كيفية إدراج نص في Microsoft Word عن طريق الفيجوال بيسك | ابتسم للحياة | بقعة لغات البرمجة | 3 | 12.03.2010 05:19 |
كيفية رعاية الاطفال ذوى الاحتياجات الخاصة | غرام | فلاشات الأطفال | 4 | 28.09.2009 11:39 |
تعلم البرمجة بلغة الجافا | ابتسم للحياة | بقعة لغات البرمجة | 4 | 11.09.2009 10:13 |