العودة   منتديات البقعة > اقسام البرامج > بقعة لغات البرمجة

اعلانات

بقعة لغات البرمجة يناقش هاذا المنتدى لغات البرمجة فيجوال بيسيك , فيجوال سي ++ , دلفي , أكسيس , أوراكل , جافا , الاسمبلي, بي اتش بي, HTML , ..

  انشر الموضوع
إضافة رد
 
أدوات الموضوع انواع عرض الموضوع
قديم 10.07.2012, 05:29   المشاركة رقم: 1
المعلومات
الكاتب:
الرتبة
الصورة الرمزية
 
الصورة الرمزية لوجين


البيانات
التسجيل: 02.12.2009
العضوية: 1965
المشاركات: 1,193 [+]
بمعدل : 0.23 يوميا
اخر زياره : [+]
معدل التقييم:
نقاط التقييم: 10

التوقيت

الإتصالات
الحالة:
لوجين غير متواجد حالياً
وسائل الإتصال:

المنتدى : بقعة لغات البرمجة
تعلمت اليوم كيف جلب مقاطع الفيديو من قناة اليوتيوب الخاصه بك بواسطة جافا سكربت .. واحببت ان اشارككم ماتعلمت ..


نبدأ على بركة الله ..

اولاً نقوم بانشاء صفحة 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
المعلومات
الكاتب:
الرتبة
الصورة الرمزية
 
الصورة الرمزية غرام


البيانات
التسجيل: 07.09.2009
العضوية: 1481
المشاركات: 1,396 [+]
بمعدل : 0.26 يوميا
اخر زياره : [+]
معدل التقييم:
نقاط التقييم: 10

التوقيت

الإتصالات
الحالة:
غرام غير متواجد حالياً
وسائل الإتصال:

كاتب الموضوع : لوجين المنتدى : بقعة لغات البرمجة
افتراضي

برنامج رائع جدا









عرض البوم صور غرام   رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
من, الخاصة, الجافا, ادراج, باليوتيوب, شرح, سكريت, عن, فيديو, طريق, قناتك, كيفية

أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
فلاش لانشودة الاكثر مشاهدة باليوتيوب لا تفوتكم مريم وسام بقعة الاناشيد 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


Powered by vBulletin®
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.