现在如果要在页面中使用 video 标签 ， 需要考虑三种情况 支持 支持 ogg theora 或者 vp8 （如果这玩意儿没出事的话） 的 （opera 、 mozilla 、 、） ， 支持 h.264 的 （safari 、 ie 9 、 Chrome) لا يدعم (IE6 ، 7 ، 8). حسنًا ، دعنا نفهم مقطع الفيديو HTML 5 من المستوى الفني ، بما في ذلك استخدام علامات الفيديو ، وسمات الوسائط والأساليب التي يمكن أن تستخدمها كائنات الفيديو ، وأحداث الوسائط.
استخدام تسمية الفيديوتحتوي علامات الفيديو على SRC ، الملصق ، التحميل المسبق ، التشغيل التلقائي ، الحلقة ، عناصر التحكم ، العرض ، الارتفاع والسمات الأخرى ، بالإضافة إلى تسمية <Source> المستخدم داخليًا. بالإضافة إلى تسمية <Source> ، يمكن أن تتضمن علامة الفيديو أيضًا المحتوى الذي تم إرجاعه عند عدم تشغيل الفيديو المحدد.
(1) سمات SRC وسمات poserهل يمكنك أن تتخيل ما تستخدمه سمة SRC للقيام به. مثل التسمية <img> ، يتم استخدام هذه السمة لتحديد عنوان الفيديو. يتم استخدام سمة الملصقات لتحديد صورة ، عرض (مخطط معاينة) عندما تكون بيانات الفيديو الحالية غير صالحة. قد تكون بيانات الفيديو غير الصالحة هو أنه يتم تحميل الفيديو ، والذي قد يكون خطأ عنوان الفيديو.
<عرض الفيديو = 658 الارتفاع = 444 src = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png toplay> </bide>(2) سمة التحميل المسبق
يمكن أيضًا فهم هذه السمة من خلال الاسم. هناك ثلاث قيم اختيارية: لا شيء ، بيانات التعريف ، السيارات. إذا لم يتم استخدام هذه السمة ، فإن الافتراضي هو تلقائي.
<عرض الفيديو = 658 الارتفاع = 444 src = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png toplay preload = none> </video >
لا شيء: لا تحميل مسبق. قد يكون استخدام قيمة السمة هذه أن منتجي الصفحات يعتقدون أن المستخدمين لا يتوقعون هذا الفيديو ، أو تقليل طلبات HTTP.
البيانات الوصفية: الحمل الجزئي قبل الحمل. باستخدام قيمة السمة هذه ، يعتقد منتج الصفحة أن المستخدمين لا يتوقعون هذا الفيديو ، لكنهم يوفرون للمستخدمين بعض البيانات الوصفية (بما في ذلك الحجم والإطار الأول وقائمة المسار والمدة وما إلى ذلك).
السيارات: كل ما قبل التحميل.
(3) سمة اللعب التلقائيسمة أخرى تعتمد على الاسم تعرف الغرض. يتم استخدام سمة التشغيل التلقائي لتعيين الفيديو ما إذا كان الفيديو يتم تشغيله تلقائيًا ، وهو سمة منطقية. عندما يظهر ، يعني ذلك التشغيل التلقائي ، مما يعني أنه لا يتم تشغيله.
<عرض الفيديو = 658 الارتفاع = 444 src = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png toplay preload = none> </video >
لاحظ أن قيمة سمات منطقية في HTML ليست صحيحة وخطورة. الاستخدام الصحيح هو أن استخدام هذه السمة في الملصق يشير إلى صواب في هذا الوقت. )) ؛
(4) سمة حلقة<عرض الفيديو = 658 الارتفاع = 444 src = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png toplay loop = loop> </video >
من الواضح في لمحة أن سمة الحلقة تستخدم أيضًا لتحديد ما إذا كان الفيديو قد تم تعميمه ، وهو أيضًا سمة منطقية.
(5) سمة الضوابط<عرض الفيديو = 658 الارتفاع = 444 src = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png toplay preload = none concludes = none concerts = </video>
تُستخدم سمات عناصر التحكم للإشارة إلى المتصفح للإشارة إلى أن منتج الصفحة لا يستخدم البرنامج النصي لإنشاء وحدة تحكم تشغيل ، ويحتاج المتصفح إلى استخدام شريط التحكم في التشغيل.
يجب أن يتضمن شريط التحكم التحكم في الإيقاف المؤقت للعب ، والتحكم في التقدم في اللعب ، والتحكم في مستوى الصوت ، وما إلى ذلك.
يختلف شريط التحكم في التشغيل الافتراضي لكل متصفح على الواجهة. نظرًا للمشاكل الغريبة في متصفحي ، فإن تسمية الفيديو لـ Firefox و Safari ليست طبيعية ، لذلك يمكن لهذين الاثنين العثور على لقطات شاشة عبر الإنترنت فقط.
(6) سمات العرض وسمات الارتفاعتنتمي السمة العالمية إلى الملصق ، لذلك ليست هناك حاجة لقول هذا.
(7) علامة المصدر<عرض الفيديو = 658 الارتفاع = 444 ملصق = http://www.youname.com/images/firs/png autoplay = autoplay preload = none controls> <source s> <source s rc = http: //www.youname. com/images /firtst.ogv/> <source src = http://www.youname.com/images/first.ogg/> </view>
يتم استخدام تسمية المصدر لتحديد خيارات متعددة (لأنه يمكن أن تتضمن علامات الصوت أيضًا هذه التسمية ، لذا استخدم الوسائط بدلاً من الفيديو) (يمكن للمتصفح اختيار واحد فقط في النهاية) عند استخدام سمات SRC.
يمكن للمستعرض اكتشاف ما إذا كان يمكن تشغيل الفيديو المحدد بواسطة ملصق المصدر (ربما لا يدعم تنسيق الفيديو ، ولا يوجد الفيديو ، وما إلى ذلك). تستخدم هذه الطريقة في الغالب لمتصفحات مختلفة. علامة المصدر نفسها لا تعني أي معنى ولا يمكن أن تظهر بمفردها.
تتضمن هذه التسمية ثلاث سمات: SRC ، النوع ، والوسائط.
سمات SRC: تستخدم لتحديد عنوان الوسائط ، مثل تسمية الفيديو.
سمة النوع: يتم استخدامه لشرح نوع سمة SRC المحددة للوسائط ، مما يساعد المتصفح على تحديد ما إذا كان سيتم دعم تنسيق الوسائط هذا قبل الحصول على الوسائط.
سمات الوسائط: يتم استخدامه لشرح مكان استخدام الوسائط في الوسط ، والقيمة الافتراضية كلها عندما لا يتم تعيينها ، مما يعني دعم جميع الوسائط. هل تفكر في سمة الوسائط لتسمية <Style>؟ نفس الشيء.
(8) مثال كامل<عرض الفيديو = 658 الارتفاع = 444 ملصق = http://www.youname.com/images/firs/png autoplay = autoplay preload = none controls> <source s> <source s rc = http: //www.youname. com/images /firtst.ogv/> <source src = http://www.youname.com/images/first.ogg/> </view>
يحدد هذا الرمز مقطع فيديو في الصفحة. بكسل ، ارتفاع 240 بكسل جوهر
أول اختيار الفيديو الخاص بملصق المصدر الأول ، قيمة سمة SRC ، فئة الفيديو هي فيديو OGG ، وهو ترميز الترميز بالفيديو هو Theora ، ودلو الترميز الصوتي هو vorbis ، وسيلة التشغيل هي الشاشة الثانية ؛ لم يعد العنوان لم يعد عنوان الفيديو لم يعد متعبًا. إذا كان عليك أن تكون متوافقًا مع IE ، فيمكنك إضافة مجموعة التسمية لمشغل Flash بعد ملصق المصدر الأخير ، أو استخدام رمز JavaScript الصغير.
لخصما سبق هو ملخص لإدراج الفيديو في صفحة الويب HTML التي قدمها Xiaobian. شكرا جزيلا لدعمكم لموقع VEVB Wulin!