السلام عليكم ورحمة الله وبركاته.
المتابعون الكرام , تحية طيبة للجميع.
نستمر معكم في طرح مجموعة من الأمثلة البرمجية التي نستخدم فيها لغتَي html و java script
الغرض من نشر مثل هذه الأطروحات هو تشجيع المكفوفين العرب على زيادة الإطلاع في مواضيع البرمجة ومعرفة الفكرة العامة في كيفية بناء مواقع الإنترنت والبرامج المختلفة.
إذًا لنبدأ في صلب موضوعنا
أيها المتابع الكريم , لتعلم أن هناك في html كائنين يعملان على تشغيل الوسائط
الكائن الأول هو <audio> وهذا الكائن لا يعمل إلا على تشغيل المقاطع الصوتية فحسب.
أما الكائن الثاني فهو <video> وهذا يقوم بتشغيل الصوت والفيديو على حد سواء.
ما أريد الوصول إليه الآن أن ما ينطبق على <audio> من أوامر وأكواد فهو أيضًا يمضي على الكائن <video> باستثناء أن <audio> لا يقبل تشغيل ملفات الفيديو , وكذلك فإى الكائن <video> تستطيع التحكم في عرضه وارتفاعه.
لنتفق أننا سنتعامل مع الكائن video نظرًا لشموليته.
قبل التوغل في أكواد java script دعونا نتعرف على الصورة العامة لكائن <video>
الكائن <video> وكل الكائنات التي تكتب بعلامة أصغر من ثم اسم الكائن ثم علامة أكبر من هي كائنات html , وجرى العرف بتسمية الكائنات في html بالوسوم أو ما يعرف ب tags
يتم كتابة الكائن <video> على الشكل التالي:
<video>
</video>
لنشرح ما كتبناه.
أولًا كتبنا علامة < إشارة لبدء كتابة الكود
ثم كتبنا الكلمة video وهي اسم الكائن
ثم أغلقنا الوسم بكتابةعلامة أكبر من >
بعدها كتبنا </video> وهذا يكتب دائمًا لإنهاء كود معين
هذه هي الصورة العامة لكائن الوسائط.
سنجري بعض التعديلات عليه
<video id="player" src="https://1.top4top.net/m_1342qeont1.mp3">
</video>
قبل شرح الكود وما الذي قمنا بإضافته يجب أن تعلم عزيزي القارئ بأن لمعظم كائنات html خصائص
هذه الخصائص تكتب بعد اسم الكائن قبل علامة > مباشرة.
ويتم الفصل بينها بالمسافات
خصائص الكائن video كثيرة جدًا فلدينا خاصية src و autoplay و controls و currentTime وغير ذلك الكثير
إذًا لا بد وأنك قد استنتجت مما طرأ في الكود هو استعمال لبعض الخصائص.
فقد أضفنا الخاصية id وأعطيناها قيمة نصية هي player
تكمن فائدة الخاصية id في أننا سنستخدم قيمتها لاحقًا لربط الكائن video بأوامر java script
أيضًأ أضفنا خاصية أخرى هي src وتحمل أيضًا قيمة نصية , وهذه القيمة هي الرابط المباشر لمقطع الصوت أو الفيديو الذي سيعالجه الكائن video
عندما نقول أن القيمة التي تحملها الخاصية هي قيمة نصية فمعنى ذلك أن القيمة التي ستكتب بعد علامة اليساوي = يجب فرضًا أن توضع بين علامتي تنصيص.
الآن نحن لدينا كائنًا من كائنات video يحمل معرفًا فريدًا ورابطًا مباشر لمقطع صوتي
لكن لأخبركم بأن هذا الكائن الآن لا فائدة له إطلاقًا من وجهة نظر المستخدم , فهو لن يشاهد أي نتيجة تذكر للكائن.
إذًا: هيا لنشاهد الأمثلة البرمجية في استغلال هذا الكائن.
أيها المتابع الكريم , لتعلم أن هناك في html كائنين يعملان على تشغيل الوسائط
الكائن الأول هو <audio> وهذا الكائن لا يعمل إلا على تشغيل المقاطع الصوتية فحسب.
أما الكائن الثاني فهو <video> وهذا يقوم بتشغيل الصوت والفيديو على حد سواء.
ما أريد الوصول إليه الآن أن ما ينطبق على <audio> من أوامر وأكواد فهو أيضًا يمضي على الكائن <video> باستثناء أن <audio> لا يقبل تشغيل ملفات الفيديو , وكذلك فإى الكائن <video> تستطيع التحكم في عرضه وارتفاعه.
لنتفق أننا سنتعامل مع الكائن video نظرًا لشموليته.
قبل التوغل في أكواد java script دعونا نتعرف على الصورة العامة لكائن <video>
الكائن <video> وكل الكائنات التي تكتب بعلامة أصغر من ثم اسم الكائن ثم علامة أكبر من هي كائنات html , وجرى العرف بتسمية الكائنات في html بالوسوم أو ما يعرف ب tags
يتم كتابة الكائن <video> على الشكل التالي:
<video>
</video>
لنشرح ما كتبناه.
أولًا كتبنا علامة < إشارة لبدء كتابة الكود
ثم كتبنا الكلمة video وهي اسم الكائن
ثم أغلقنا الوسم بكتابةعلامة أكبر من >
بعدها كتبنا </video> وهذا يكتب دائمًا لإنهاء كود معين
هذه هي الصورة العامة لكائن الوسائط.
سنجري بعض التعديلات عليه
<video id="player" src="https://1.top4top.net/m_1342qeont1.mp3">
</video>
قبل شرح الكود وما الذي قمنا بإضافته يجب أن تعلم عزيزي القارئ بأن لمعظم كائنات html خصائص
هذه الخصائص تكتب بعد اسم الكائن قبل علامة > مباشرة.
ويتم الفصل بينها بالمسافات
خصائص الكائن video كثيرة جدًا فلدينا خاصية src و autoplay و controls و currentTime وغير ذلك الكثير
إذًا لا بد وأنك قد استنتجت مما طرأ في الكود هو استعمال لبعض الخصائص.
فقد أضفنا الخاصية id وأعطيناها قيمة نصية هي player
تكمن فائدة الخاصية id في أننا سنستخدم قيمتها لاحقًا لربط الكائن video بأوامر java script
أيضًأ أضفنا خاصية أخرى هي src وتحمل أيضًا قيمة نصية , وهذه القيمة هي الرابط المباشر لمقطع الصوت أو الفيديو الذي سيعالجه الكائن video
عندما نقول أن القيمة التي تحملها الخاصية هي قيمة نصية فمعنى ذلك أن القيمة التي ستكتب بعد علامة اليساوي = يجب فرضًا أن توضع بين علامتي تنصيص.
الآن نحن لدينا كائنًا من كائنات video يحمل معرفًا فريدًا ورابطًا مباشر لمقطع صوتي
لكن لأخبركم بأن هذا الكائن الآن لا فائدة له إطلاقًا من وجهة نظر المستخدم , فهو لن يشاهد أي نتيجة تذكر للكائن.
إذًا: هيا لنشاهد الأمثلة البرمجية في استغلال هذا الكائن.
إظهار مشغل الوسائط بدون استخدام أكواد java script
الكود:
<video id="player" src="https://1.top4top.net/m_1342qeont1.mp3" controls>
</video>
</video>
شرح سريع للكود:
لقد جلبنا نفس الكود السابق , فقط قمنا بإضافة خاصية ثالثة للكود وهي controls
تحمل هذه الخاصية قيمة منطقية , فهي إما أن تكون true , أو false , أي بالعربية صح أم خطأ.
لاحظتم بأني لم أكتب قيمة الخاصية
السبب وراء ذلك هو أن للخاصية قيمة افتراضية هي true وأنا أريد هذه القيمة نفسها, إذًأ لا داعي لكتابتها.
هذه الخاصية تستخدم لإظهار أدوات التحكم في المقطع الصوتي مثل التشغيل والإيقاف والتقديم والتأخير وغيره.
نتيجة الكود
السماح للمستخدم بإظهار وإخفاء أدوات التحكم بالمقطع
الكود:
<label> إظهار أدوات التحكم <input id="togle" type="checkbox" onchange="togleControls()"></label>
<!-- إنشاء مربع تحديد للتحكم في إظهار وإخفاء أدوات التحكم بالمقطع
الكائن المسؤول عن إنشاء مربع التحديد هو input , وقد أعطيناه مجموعة من الخصائص
id المعرف:وقد سبق الحديث عنه ,وهنا المعرف يحمل القيمة togle , حيث تستطيع إعطاؤه أي قيمة تشاء بشرط أن يكون في كلمة واحدة وباللغة الإنجليزية
type النوع : وهذه الخاصية لتحديد نوع الكائن input هل هو مربع لكتابة النصوص , أو زر , أو مربع تحديد أو غير ذلك , وهنا نوع الكائن هو checkbox أي مربع تحديد
onchange : هذه الخاصية تستخدم لربط الكائن بأمر معين من أوامر java script , حيث يتم استدعاء ذلك الأمر فور حدوث تغيير في هذا الكائن
بالنسبة لقيمة هذه الخاصية فهي عبارة عن اسم لأمر معين إما أن يكون من أوامر java script الجاهزة أو أن يكون اسم لأمر نحن ننشؤه , وفي هذه الحالة فالأمر togleControls() هو أمر نحن أنشأناه.
سنأتي على الموضع الذي أنشأنا فيه الأمر في الأسطر القادمة
تم وضع مربع التحديد بأكمله في كائن آخر هو <label> يحتوي هذا الكائن على تسمية للمربع بالإضافة إلى المربع نفسه.
-->
<br />
<!-- سطر جديد -->
<video src="https://1.top4top.net/m_1342qeont1.mp3" id="player"></video>
<!-- الكائن video الذي أسهبنا في الحديث عنه -->
<script type-text="javascript">
// بداية أوامر java script ; فالسطر السابق احفظه كما هو ولا تغير فيه أي شيء
var player = document.getElementById("player")
/* تستخدم الكلمة var لإخبار المتصفح بأننا سننشئ متغيرًا وما يلي هذه الكلمة سيكون اسمًا للمتغير , ثم تأتي بعد ذلك علامة يساوي = لإسناد قيمة المتغير
قيمة المتغير ستكون كائن video الذي كتبناه في الأعلى
يتم استدعاء كائن html إلى أكواد html من خلال معرف id الخاص به , وهناك دالة في java script تقوم بذلك
تكتب الدالة هكذا
document.getElementById("المعرف")
حيث ستستبدل كلمة المعرف الواقعة بين علامتي التنصيص بالمعرف الخاص بالكائن الذي تريد استدعاءه والذي سبق أن أعطيته للكائن عند الإنشاء
لقد وضعنا كلمة player بين علامتي التنصيص وذلك لنستدعي الكائن video , حيث أصبح الكائن video قيمة للمتغير player*/
var togle = document.getElementById("togle")
// نفس الكود السابق بالضبط , فقط هنا سنستدعي مربع التحديد الذي يحمل المعرف togle
function togleControls() {
/* تذكرون عندما تحدثنا عن قيمة الخاصية onchange وقلنا بأنها إما أن تكون أمرًا من أوامر java script , أو أن تكون أمرًا نحن ننشؤه , وتذكرون أيضًا أن قيمة الخاصية onchange كتبناها هكذا togleControls() , فالسطر السابق هو المسؤول عن إخبار المستخدم ببدء إنشاء الأمر togleControls()
فالكلمة function تستخدم للتعريف بالأوامر الجديدة , ثم يليها اسم ذلك الأمر ويحدده المبرمج نفسه ثم قوسين هلاليَين متقابلين يمكن وضع بعض المعاملات بداخلهما لكن هنا لا توجد أي معاملات لذلك كان القوس فارغًا.
بعد كتابة اسم الدالة يتم فتح قوس متعرج { وبداخل هذا القوس سنكتب الأوامر التي نريدها أن تعمل سويةً عند استدعاء الأمر المسمى ب togleControls() */
if (togle.checked == true) {
/* نقول في الجملة السابقة إذا كان مربع التحديد محددًا فنفذ الأوامر التالية التي بداخل القوس المتعرج, ويتبين لكم أنها جملة شرطية تنتظر جوابًا.
كتبنا أولًأ الكلمة if وهي إشارة لبدء الجملة الشرطية
ثم فتحنا قوسًا هلاليًا وكتبنا بداخله شرطًا
يحتوي الشرط على
togle.checked: وهنا استخدمنا المتغير togle الذي يحمل قيمة مربع التحديد وألحقناه بنقطة وذلك للتحقق من قيمة أحدى خواص هذا المربع وهي checked وكتبناها هي أيضًا
الخاصية checked إما أن تكون true في حالة التحديد أو false في حالة إلغاء التحديد
بعد كلمة togle.checked كتبنا علامة يساوي مرتين ثم كتبناا الكلمة true وأغلقنا القوس الهلالي وفتحنا قوس متعرج لكتابة جواب الشرط بداخله
أي إذا كانت قيمة الخاصية checked للكائن togle تساوي true فاعمل الآتي */
player.controls = true
/* ها هو جواب الشرط قد أتى , فقد قلنا له ان تحقق الشرط فاضبط قيمة الخاصية controls للكائن video المحمول في المتغير player ليساوي true
يعني ذلك كأننا نخبره بأن يظهر أدوات التحكم في حال كان المربع محددًا */
} else {
تعني كلمة else وإلا
أي في حال لم يتحقق الشرط الأول بأن تكون قيمة togle.checked هي true فنفذ الآتي*/
player.controls = false
/*اضبط قيمة الخاصية controls للكائن video المحمول في المتغير player ليساوي false
يعني ذلك كأننا نخبره بأن يخفي أدوات التحكم في حال كان المربع غير محددٍ*/
}
}
/* أغلقنا الأقواس المتعرجة الخاصة بالأمر togleControls() والجملة الشرطية
</script>
<!-- انتهاء تعليمات java script -->
<!-- إنشاء مربع تحديد للتحكم في إظهار وإخفاء أدوات التحكم بالمقطع
الكائن المسؤول عن إنشاء مربع التحديد هو input , وقد أعطيناه مجموعة من الخصائص
id المعرف:وقد سبق الحديث عنه ,وهنا المعرف يحمل القيمة togle , حيث تستطيع إعطاؤه أي قيمة تشاء بشرط أن يكون في كلمة واحدة وباللغة الإنجليزية
type النوع : وهذه الخاصية لتحديد نوع الكائن input هل هو مربع لكتابة النصوص , أو زر , أو مربع تحديد أو غير ذلك , وهنا نوع الكائن هو checkbox أي مربع تحديد
onchange : هذه الخاصية تستخدم لربط الكائن بأمر معين من أوامر java script , حيث يتم استدعاء ذلك الأمر فور حدوث تغيير في هذا الكائن
بالنسبة لقيمة هذه الخاصية فهي عبارة عن اسم لأمر معين إما أن يكون من أوامر java script الجاهزة أو أن يكون اسم لأمر نحن ننشؤه , وفي هذه الحالة فالأمر togleControls() هو أمر نحن أنشأناه.
سنأتي على الموضع الذي أنشأنا فيه الأمر في الأسطر القادمة
تم وضع مربع التحديد بأكمله في كائن آخر هو <label> يحتوي هذا الكائن على تسمية للمربع بالإضافة إلى المربع نفسه.
-->
<br />
<!-- سطر جديد -->
<video src="https://1.top4top.net/m_1342qeont1.mp3" id="player"></video>
<!-- الكائن video الذي أسهبنا في الحديث عنه -->
<script type-text="javascript">
// بداية أوامر java script ; فالسطر السابق احفظه كما هو ولا تغير فيه أي شيء
var player = document.getElementById("player")
/* تستخدم الكلمة var لإخبار المتصفح بأننا سننشئ متغيرًا وما يلي هذه الكلمة سيكون اسمًا للمتغير , ثم تأتي بعد ذلك علامة يساوي = لإسناد قيمة المتغير
قيمة المتغير ستكون كائن video الذي كتبناه في الأعلى
يتم استدعاء كائن html إلى أكواد html من خلال معرف id الخاص به , وهناك دالة في java script تقوم بذلك
تكتب الدالة هكذا
document.getElementById("المعرف")
حيث ستستبدل كلمة المعرف الواقعة بين علامتي التنصيص بالمعرف الخاص بالكائن الذي تريد استدعاءه والذي سبق أن أعطيته للكائن عند الإنشاء
لقد وضعنا كلمة player بين علامتي التنصيص وذلك لنستدعي الكائن video , حيث أصبح الكائن video قيمة للمتغير player*/
var togle = document.getElementById("togle")
// نفس الكود السابق بالضبط , فقط هنا سنستدعي مربع التحديد الذي يحمل المعرف togle
function togleControls() {
/* تذكرون عندما تحدثنا عن قيمة الخاصية onchange وقلنا بأنها إما أن تكون أمرًا من أوامر java script , أو أن تكون أمرًا نحن ننشؤه , وتذكرون أيضًا أن قيمة الخاصية onchange كتبناها هكذا togleControls() , فالسطر السابق هو المسؤول عن إخبار المستخدم ببدء إنشاء الأمر togleControls()
فالكلمة function تستخدم للتعريف بالأوامر الجديدة , ثم يليها اسم ذلك الأمر ويحدده المبرمج نفسه ثم قوسين هلاليَين متقابلين يمكن وضع بعض المعاملات بداخلهما لكن هنا لا توجد أي معاملات لذلك كان القوس فارغًا.
بعد كتابة اسم الدالة يتم فتح قوس متعرج { وبداخل هذا القوس سنكتب الأوامر التي نريدها أن تعمل سويةً عند استدعاء الأمر المسمى ب togleControls() */
if (togle.checked == true) {
/* نقول في الجملة السابقة إذا كان مربع التحديد محددًا فنفذ الأوامر التالية التي بداخل القوس المتعرج, ويتبين لكم أنها جملة شرطية تنتظر جوابًا.
كتبنا أولًأ الكلمة if وهي إشارة لبدء الجملة الشرطية
ثم فتحنا قوسًا هلاليًا وكتبنا بداخله شرطًا
يحتوي الشرط على
togle.checked: وهنا استخدمنا المتغير togle الذي يحمل قيمة مربع التحديد وألحقناه بنقطة وذلك للتحقق من قيمة أحدى خواص هذا المربع وهي checked وكتبناها هي أيضًا
الخاصية checked إما أن تكون true في حالة التحديد أو false في حالة إلغاء التحديد
بعد كلمة togle.checked كتبنا علامة يساوي مرتين ثم كتبناا الكلمة true وأغلقنا القوس الهلالي وفتحنا قوس متعرج لكتابة جواب الشرط بداخله
أي إذا كانت قيمة الخاصية checked للكائن togle تساوي true فاعمل الآتي */
player.controls = true
/* ها هو جواب الشرط قد أتى , فقد قلنا له ان تحقق الشرط فاضبط قيمة الخاصية controls للكائن video المحمول في المتغير player ليساوي true
يعني ذلك كأننا نخبره بأن يظهر أدوات التحكم في حال كان المربع محددًا */
} else {
تعني كلمة else وإلا
أي في حال لم يتحقق الشرط الأول بأن تكون قيمة togle.checked هي true فنفذ الآتي*/
player.controls = false
/*اضبط قيمة الخاصية controls للكائن video المحمول في المتغير player ليساوي false
يعني ذلك كأننا نخبره بأن يخفي أدوات التحكم في حال كان المربع غير محددٍ*/
}
}
/* أغلقنا الأقواس المتعرجة الخاصة بالأمر togleControls() والجملة الشرطية
</script>
<!-- انتهاء تعليمات java script -->
نتيجة الكود
باقي الأمثلة ستكون بنفس المفهوم مع اختلاف قيم الخواص , لذلك سأضع الكود والنتيجة فقط
السماح للمستخدم بتغيير رابط المقطع وتشغيل مقطع آخر
الكود
<label>ضع الرابط المباشر للمقطع: <input onchange="changeSource()" type="link" id="source"></label><br />
<video controls src="https://1.top4top.net/m_1342qeont1.mp3" id="player"></video>
<script type-text="javascript">
var player = document.getElementById("player")
var source = document.getElementById("source")
source.value = player.src
var defSource = player.src
function changeSource() {
if (source.value == "") {
player.src = source.value = defSource
} else {
player.src = source.value
}
}
</script>
<video controls src="https://1.top4top.net/m_1342qeont1.mp3" id="player"></video>
<script type-text="javascript">
var player = document.getElementById("player")
var source = document.getElementById("source")
source.value = player.src
var defSource = player.src
function changeSource() {
if (source.value == "") {
player.src = source.value = defSource
} else {
player.src = source.value
}
}
</script>
نتيجة الكود
استخدام java script لتشغيل وإيقاف المقاطع
الكود
<video src="https://1.top4top.net/m_1342qeont1.mp3" id="player"></video>
<button id="button" onclick="start()">تشغيل</button>
<button id="button" onclick="start()">تشغيل</button>
<script type-text="javascript">
var player = document.getElementById("player")
var button = document.getElementById("button")
function start() {
if (button.innerHTML == "تشغيل") {
button.innerHTML = "إيقاف"
player.play()
} else if (button.innerHTML == "إيقاف" ) {
player.pause()
button.innerHTML = "تشغيل"
}
}
</script>
نتيجة الكود
ختامًا: أرجو أن تكونوا قد استفدتم من هذا الطرح
إن كان لديكم سؤال أو مداخلة أسعد بتلقيها في قسم التعليقات , أو بإمكانكم التواصل معي عبر الوسائل التالية:
إن كان لديكم سؤال أو مداخلة أسعد بتلقيها في قسم التعليقات , أو بإمكانكم التواصل معي عبر الوسائل التالية:
جزاك الله خير اخى
ردحذف