مشغل فيديو HTML5
نشرت: 2019-09-05تم تصميم مواصفات مشغل Html5 للسماح بتشغيل مقاطع الفيديو المحددة في عنصر الفيديو أو المحتوى. تم استلهام فيديو HTML5 من قبل منشئيه لتصميمه بطريقة حديثة أو قياسية جديدة على الويب ، بدلاً من استخدام مكون Adobe Flash الإضافي الواقعي والمملوك سابقًا ، ومع ذلك ، فقد أعيق الدعوة المبكرة بسبب عدم وجود خصوصية حول تنسيقات ترميز الفيديو و يجب دعم تكوينات ترميز الصوت في متصفحات الإنترنت.
مثال بخصوص عنصر فيديو Html:
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> </video>
<video src="movie. webm" poster="movie.jpg" controls> This is fallback content to display for user agents that do not support the video tag. </video>
كيف تعمل؟
تضيف سمة الضوابط عناصر تحكم في الفيديو ، مثل التشغيل والإيقاف المؤقت والصوت
إنها دائمًا خطة من الدرجة الأولى تتضمن خصائص العرض والارتفاع. قد تتذبذب الصفحة أثناء تحميل الفيديو إذا كان الطول والعرض غير دقيقين.
يتيح لك عنصر <source> تحديد ملفات فيديو بديلة يمكن للمتصفح الاختيار منها. سوف يستخدم المتصفح تنسيقه المفضل.
قد يتم عرض المحتوى الموجود بين تسميات <video> و </ video> في البرامج التي لا تدعم عنصر <video>
HTML <video> مثال على التشغيل التلقائي:
<video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
فيديو HTML - التنسيقات والخصائص والأحداث:
يوضح Html5 وظيفة أو ميزات تنسيقات DOM وخصائصها وأحداثها لعنصر <video>. يتيح لنا ذلك تحميل مقاطع الفيديو وتشغيلها وإيقافها مؤقتًا ، بالإضافة إلى ضبط الطول والحجم.
فيديو HTML- دعم المستعرض:
في HTML5 ، هناك 3 تنسيقات فيديو مدعومة: MP4 و WebM و Ogg.
دعم المتصفح للتنسيقات المختلفة هو:
المستعرض | MP4 | WebM | عوج |
---|---|---|---|
متصفح الانترنت | نعم | رقم | رقم |
كروم | نعم | نعم | نعم |
ثعلب النار | نعم | نعم | نعم |
سفاري | نعم | رقم | رقم |
أوبرا | نعم | نعم | نعم |
علامات أو تسميات فيديو HTML5:
بطاقة شعار | وصف |
---|---|
<video> | يصف مقطع فيديو أو فيلمًا |
<source> | يصف أصول الوسائط المختلفة لمكونات الوسائط |
<track> | يصف مسارات المحتوى في مشغلات الوسائط |
مساعدو HTML (المكونات الإضافية)
تطبيقات HTML (الوحدات النمطية) هي برامج كمبيوتر تعمل على توسيع نطاق الاستخدام القياسي لمتصفح الإنترنت.
بعض التطبيقات التي يُنظر إليها عمومًا على أنها وحدات هي في الواقع تطبيقات Java الصغيرة.
يمكن تشغيل الوحدات أو المكونات الإضافية لعدة أسباب استثنائية: عرض الخرائط ، والفحص بحثًا عن الفيروسات ، والتحقق من معرف البنك الخاص بك ، وما إلى ذلك.
لإظهار الفيديو والصوت: استخدم علامتي <video> و <audio>.
تنسيقات الفيديو والصوت المدعومة:
لا ينص تعيين HTML5 على تنسيقات أو طرق الصوت والفيديو التي يجب أن تدعمها المتصفحات. لا يلتزم مالكو العملاء بدعم أي تنسيقات فيديو لا يريدون ذلك ، ولكن لا يمكن لكتاب المحتوى أن يحسبوا أنه سيتم الحصول على أي فيديو من قبل جميع مالكي العملاء ، لذلك في الوقت الحالي لا يوجد اتفاق على أن جميع وكلاء العميل لديهم مجموعة رموز مميزة من تنسيقات الفيديو والصوت لتقديمها.
فكرت فئة عمل HTML5 أنه من المستحسن الاستشهاد بتنسيق فيديو واحد على الأقل يجب على جميع مالكي العميل (المتصفحات) ضمانه. سيكون التنسيق الأساسي أو الطريقة المتعلقة:
- يجب أن تحتوي على عملية تشفير ، ومعيار صورة عالي ، واستخدام مبرمج منخفض فك التشفير.
- كن خالي من حقوق الملكية.
- بالإضافة إلى مفككات تشفير البرامج ، يجب أن توجد وحدة فك ترميز فيديو الأجهزة لهذه الطريقة ، حيث أن العديد من المعالجات المضمنة لا تملك ميزة فك تشفير الفيديو.
الاستخدام والفوائد:
يتزايد دعم المتصفح لفيديو HTML5 بسرعة في جميع أنحاء العالم ، في حين أن فيديو الفلاش غير قابل للبحث وليس لدى جميع العملاء متصفح سريع أو تمت ترقيته ، يتم تحديث فيديو HTML5 كثيرًا مقارنة بالفلاش. ينفذ البرنامج بشكل صحيح على الأدوات الإلكترونية والمتصفح الحديث ويسهل دمجه وتصميمه. مع التحسينات الصغيرة التي يتم إجراؤها على المتصفحات القديمة ، تدعم أيضًا HTML5.
استخدام HTML5 للفيديو الخاص بك وتريد أن يكون قابلاً للتشغيل على الأجهزة المحمولة هو أمر غير منطقي. لا يدعم كل هاتف خلوي الفلاش بشكل جيد. إذا كان لديك صفحة ويب تستخدم الكثير من مقاطع الفيديو ، فهذا شيء يجب أن تعرفه في مثل هذه الحالة التي لا تبدأ في استخدام HTML5 ، فقد يتخلى الأفراد عن صفحة الويب الخاصة بك أو يبدأون في ترك موقعك على أنه غير وظيفي مع خليتهم هاتف.
يمكن دمج HTML5 في موقع عن طريق استخدام كود أقل. يوفر إمكانية تضمين الفيديو مباشرة في المتصفح مع العديد من السمات والعلامات القابلة للتخصيص عليه ويوفر مزيدًا من التحكم في الفيديو والمشغل. يمكنك تشغيل حلقة ، والتشغيل التلقائي ، والملصق ، وعناصر التحكم ، والتحميل المسبق بشكل متناقض ، وليس هناك حاجة لإنشاء مشغل مخصص كما كان من قبل ، فبدلاً من تجميع عناصر التحكم المخصصة ، يكون فيديو HTML5 مدمجًا ، لذا فإن إضافة الفيديو أسرع من ذي قبل. إذا ميزنا إصدار الفلاش القديم مقابل تضمين فيديو HTML5 الجديد ، فهو رمز أقل ويجعله أكثر ملاءمة لإضافته إلى موقعك.
فيما يلي علامات أو سمات HTML5 التي تقدم وظائف حديثة.
سمات فيديو HTML5
ينسب | تفسير |
---|---|
عقدة | يتيح تشغيل الفيديو بشكل مستمر |
تشغيل تلقائي | عند فتح الصفحة ، سيتم تشغيل الفيديو مرة واحدة |
ملصق | لتكوين الصورة التي ستظهر عند تحميل مقطع فيديو |
ضوابط | تشغيل قياسي ، وقفة ، وضوابط الصوت |
التحميل المسبق | يمكن استخدامها لتنزيل الفيديو بغض النظر عما إذا كان الفيديو قد بدأ في التشغيل |
يمكن أن يدعم فيديو HTML5 CSS و CSS3 لتصميم علامة أو تسمية الفيديو. يمكنك تعديل الحدود والتعتيم والانعكاسات والتدرجات والانتقالات والتحولات وحتى الرسوم المتحركة.
عيوب:
هناك حقيقة أخرى حول HTML5 وهي أنه نظرًا لقضايا الترخيص أو التأهيل ، يجب توفير الوسائط بتنسيقات متعددة لتكون في متناول معظم المتصفحات. لذلك يجب استخدام صوت mp3 لمتصفحات WebKit (safari و chrome) و Ogg for Mozilla (Firefox) للمتصفحات.
هناك تعقيد آخر وهو أنه على الرغم من ثبات أجزاء من المواصفات بشكل كبير ، فإن اللغة نفسها تعتبر عملاً قيد التنفيذ ، ولا سيما أن أي عنصر من العناصر يمكن أن يتغير في أي وقت. لم يتم التخطيط للغة للاستقرار لفترة طويلة ، مما يعيق الأمور أكثر. لحسن الحظ ، يُنظر إلى قدر كبير من المواصفات على أنها مستقرة وجاهزة للاستخدام.