[أفكار] عرض فيديو من Youtube

جزاءك الله خيرا

بانتظارك ...

شكرا اخي

نحن بانتظارك

جزاك الله خيرا أخي محمد خليل

ما شاء الله دائما مواضيعك مميزة

نحن بأنتظارك

توكل علي الله ونتابعك

الله يجزيك الخير

معك للنهاية

أهلا بكم من جديد .. شكرا للتفاعل المسبق ...!

بداية يجب أن يكون لنا حساب في YouTube..

من هنا http://www.youtube.com/signup

بعد تسجييل كعضو جديد .. قم بالدخول لحسابك في youtube

اختر من الاعلى MyAccount

ستظهر لك صفحة جديدة تخص حسابك .. ستجد في الاسفل على جهة اليسار قائمة بإسم Account Settings

اختر منها Developer Profile

و قم بإنشاء Developer Key

سوف تجد نص كالذي حصلت عليه انا على شكل GRblcO5CVtE "قم باستخدام مفتاحك انت"

الان نعود لصفحة Default .. هناك جزئين

1- Default.aspx

2- Default.aspx.cs

الصفحة Default.aspx سوف تحوي فقط على

مربع للبحث TextBox و زر Button لاجراء عملية البحث و نحتاج ل DataList ستعرض النتائج كما قلنا بالاعلى

انا ظهرت معي كالتالي:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="YouTube._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
	<title>You tube - Video Browser</title>
</head>
<body>
	<form id="form1" runat="server">
	<div>

		 <asp:Image ID="Image1" runat="server" 
		ImageUrl="http://www.interactive-ltd.com/images/illogo.gif" /><br />
		<asp:Label ID="Label1" runat="server" Font-Names="Calibri" ForeColor="#336699" 
		Text="You Tube Search:"></asp:Label>
 <asp:TextBox ID="txtSearch" runat="server" BorderColor="#336699" 
		BorderStyle="Groove"></asp:TextBox>

		 <asp:Button ID="btnSearch" runat="server" Text="Search" 
		onclick="btnSearch_Click" Font-Names="Calibri" ForeColor="#336699" /></div>
		<table cellspacing="2" cellpadding="2" border="0">	   
<asp:Datalist id="resultDL" runat="server" Font-Names="Verdana" CellPadding="4" 
			ForeColor="#333333">
<FooterStyle BackColor="#507CD1" ForeColor="White" font-bold="True"></FooterStyle> 
	<alternatingitemstyle backcolor="White" />
	<itemstyle backcolor="#EFF3FB" />
	<selecteditemstyle backcolor="#D1DDF1" font-bold="True" forecolor="#333333" />
	<headerstyle backcolor="#507CD1" font-bold="True" forecolor="White" /> 
<ItemTemplate>
<tr  ><td colspan="2" align=center> <b><%# DataBinder.Eval(Container, "DataItem.title") %></b></td></tr>
  <tr>
<td style="width:100px;Height:20px;">

	<a href='DisplayVideo.aspx?url=<%# Eval("url") %>' >
	<asp:Image ID="Img" ImageUrl='<%#Eval("thumbnail_url") %>' runat="Server" />
	</a>
	</td> 
<td style="width:450px;Height:20px;"><%# DataBinder.Eval(Container, "DataItem.description") %></td>
		</tr>		
</ItemTemplate> 
</asp:Datalist>	  
</table>

	</form>
</body>
</html>

طبعا واضحة جدا .. نرى اننا قمنا بعمل Anchor يعني HyperLink تذهب بنا عند الضغط على الصورة لعرض الفيديو في صفحة DisplayVideo.aspx

الان كل ما يلزمنا في صفحة Default.aspx.cs هو Event للزر عندما نضغط على بحث يقوم بتفعيل الحدث OnClick الخاص به و سيكون محتويا على

protected void btnSearch_Click(object sender, EventArgs e)
		{
			string key = "GRblcO5CVtE";
			int resultCnt = 5;
			if (key.Length != 0)
			{			
			string url = "http://www.youtube.com/api2_rest?method=youtube.videos.list_by_tag";
			url += "&dev_id=" + key + "&tag=" + txtSearch.Text +"&page=1&per_page=" + resultCnt; 
			DataSet ds = new DataSet();
			ds.ReadXml(url);
			DataTable resultTable = ds.Tables[2];
			this.resultDL.DataSource = resultTable;
			resultDL.DataBind();
			}
		}

طبعا كل ما فعلنا هنا انه استدعينا ال YouTube API's تعيد لنا محتويات نتائج البحث داخل dataSet ثم قمنا بربط البيانات مباشرة لل DataList

طبعا انا اخترت ان تظهر فقط 5 نتائج و يمكنك ان تغير الرقم و بالأكيد أنا أفضل ان تقوم بعمل Paging لل DataList و لن اتطرق للموضوع هذا لانه قديم و قد تم تقديمه كثيرا في السابق ..

الان صفحة العرض DisplayVideo.aspx .. كل ما بها هو:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DisplayVideo.aspx.cs" Inherits="YouTube.DisplayVideo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
	<title>Untitled Page</title>
</head>
<body>
	<form id="form1" runat="server">
	<div>
	<object width="425" height="350"><param name="movie" value='<%=Request.QueryString["url"].ToString().Remove(Request.QueryString["url"].ToString().IndexOf("?"),1).Replace("=","/") %>' ></param><param name="wmode" value="transparent"></param><embed src='<%=Request.QueryString["url"].ToString().Remove(Request.QueryString["url"].ToString().IndexOf("?"),1).Replace("=","/") %>'type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>
	<br />
	<a href=./?>Home Page</a>
	</div>
	</form>
</body>
</html>

ربما يسألني البعض .. لقد قمت من الصفحة السابقة بتمرير العنوان الخاص بالفيديو URL على هيئة QueryString Key و لو نسخناه من المتصفح سوف يعمل الفيديو .. اقصد عندما تنسخ فقط ال url الخاص بالفيديو و ليس كل التطبيق .. فلماذا قمت باستخدام بعض الدوال مثل Remove و Replace و IndexOf؟

نعم الكلام صحيح ولكن لو لم تستخدمها واكتفيت بتمرير العنوان الخاص بالفيديو لل Object لن يظهر و عندما تعرض ال Page Source ستجد رموزا قد تم إضافتها مثل ؟ و / وهي تعطل العنوان و بالتالي اضطررت للتخلص منها ..

يعني العنصر الجديد والمهم في هذه الصفحة يتلخص هنا:

<object width="425" height="350"><param name="movie" value='<%=Request.QueryString["url"].ToString().Remove(Request.QueryString["url"].ToString().IndexOf("?"),1).Replace("=","/") %>' ></param><param name="wmode" value="transparent"></param><embed src='<%=Request.QueryString["url"].ToString().Remove(Request.QueryString["url"].ToString().IndexOf("?"),1).Replace("=","/") %>'type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

أتمنى أن أكون قدمت لكم فكرة جديدة و ساعود لأرفاق الكود و مناقشة بعض النقاط هنا على هامش نفس الموضوع كي تعم الفائدة

:) حظا موفقا للجميع و سامحوني على التأخير

متابع

وفقكم الله

اعزائي ها أنا قمت بإرفاق تجاربي في هذا الموضوع .. يمكنكم اخذ نظرة عليها

كما قلت سأعود لإضافة بعض التعليقات على ما جرى و كيف نستفيد اكثر من الكود السابق

YouTube.zip

شكرا لك اخي

موضوع جيد

شكرا مره اخرى

لكن في Web.config

ظهر لي اخطاء عند التشغيل قمت بحذفه واضافه

مره اخرى اشتغل دون مشاكل

انا مش فاهم الموجود داخل Web.config

شكرا

شكرا جزيلا أخ محمد

جزاك الله خيرا و شكرت على مجهودك

اخي مجهود جيد جدا

ولكن كيف اصنع انا صفحات مثل youtube

يعني يبقي عندي مجموعه فيديوهات وكل فيديو يوجد تحته التعليقات الخاصه به والتي طبعا مخزنه في قاعده بيانات

شكرا محمد

اخي HASHAD_MAHMOUD

اين المشكلة اذا؟

طالمان ان لديك اسم الفيديو والتعليقات الخاصة به موجود اين المشكلة ؟هل هي اضافة ملف الفلاش؟

عموما اغلب المواقع من هذا النوع تستخدم streaming technology والذي يحتاج سيرفر مجهز بهذه الخدمة وفيما يخص ماكروميديا او ادوبي فهي تفضل منتجها Flash Media Server غير ان هناك منتجات اخرى منها ما هو مفتوح المصدر ,,ولكن اعلب المواقع التي تستخدم سكربتات جاهزة لا تستخدم streaming service حقيقية لتكلفتة تشغيلها العالية وانما تستخدم طرق معينة للحصول على نتائج اقرب الى streaming عن طريق استخدام سكربت وحقن ملف flash video بـ metadata حتى يتم تقديم وتأخير الفيديو عند التشغيل (تشغيل الفيديو من النقطة التي تريدها)

الجزء الثاني من المهمة هو التعامل مع ملفات الفيديو والتي غالبا ما يحملها ويرفعها زوار الموقع والذين ليس لديهم فكرة حتى عن امتداد ملف الفيديو ,,, يرفعون الفيديو ليقوم موقعك بتحويله الى ملف فلاش فيديو في السيرفر وهذه العملية تحتاج تدخل برمجي

العملية في مجملها ليست معقدة

اخي الحبيب المشكله في استدعاء ملف بالفلاش ويكون اسفله تعليقاته الخاصه به من قاعده بيانات

فهي يستطيع الفلاش

استدعاء اسم ملف من قاعده بيانات؟؟

اذا تم استدعاء اسم الملف المخزن يكون سهلا استدعاء التعليق الخاص بكل فيديو

وانا لا اتحدث مطلقا عن الاستريم ليست هذه النقطه

النقطه هيه الاستدعاء من قاعده بيانات من خلال الفلاش

شكرا لاهتمامك

نعم اخي يمكن ذلك في فلاش ,, هناك ثلاث طرق يمكنك بحثها والسؤال عنها في قسم الفلاش

- flash remoting

- القراءة من XML يتم توليده من السيرفر حسب المعطيات المطلوبة والباراميترات الممررة

- الابسط والأسهل هو القراءة المباشرة من FlashVars وهي بارميترات يتم قراءتها من الصفحة او ال url الموجود فيه الفلاش ان كانت البيانات التي تريدها في فلاش قليلة وبسيطة مثل الصور او اسم ملف الفيديو وهو ما يستخدمه youtube

http://www.youtube.com/swf/l.swf?video_id=NC5s__B6WVQ

انا اسف لكثره الاسئله ولكني لا استطيع استخدام الفلاش فانا يا دوب لسه بعرف استخدمه بالعافيه

لو عندك اي مثال او اكواد تساعدني في عمل المطلوب

فاكون شاكر لك من قلبي