ننشئ مقاطع فيديو على صفحات مثل في صحيفة هاري بوتر الأسطورية.
لخلق أقصى قدر من الانغماس!
لإنشاء هذا ، نحن بحاجة إلى فيديو قصير واحد (معاينة) ، والذي سيتم حلقته وبدون صوت. الفيديو الثاني عبارة عن فيديو عادي به صوت سيتم تشغيله عند التمرير أو النقر أو التمرير.
كود HTML مضمن في الصفحة:
<div class="smartVideo graysv"> <video data-cprotate data-cprotatehover muted loop data-inits="autoplay" data-src="./test1.mp4" data-poster="./test.jpg" webkit-playsinline playsinline pip="false"></video> <video data-cprotate data-volume="1" data-src="./test2.mp4" data-poster="./test.jpg" webkit-playsinline playsinline pip="false"></video> </div>
يتم تمييز
مقطعين فيديو ملفوفين في
div بفئة smartVideo وتتم
إضافة فئة
graysv إذا كنت بحاجة إلى مرشح أبيض وأسود على الفيديو حتى يتم تشغيله أو بدون صوت!
بيانات cprotate - يخبر البرنامج النصي أنه سيكون هناك دوران للفيديو الرئيسي ومعاينة الفيديو.
data-src - المسار إلى ملف الفيديو.
ملصق البيانات - المسار إلى الصورة التي يتم عرضها أثناء تحميل الفيديو.
playinline - التشغيل التلقائي تحت الهواتف الذكية ، فإنه لن يبدأ بدونه.
pip = "false" - حتى لا تظهر المتصفحات زر التنزيل.
بالنسبة للمقطع الأول ، يجب أن
نضبط السمات
كتم صوت حلقة البيانات = التشغيل التلقائي ، مما يعني: بدون صوت ، حلقات ، وتشغيل تلقائي إذا كان مرئيًا على الشاشة.
بالنسبة إلى مقطع الفيديو الأول ، هناك
سمة cprotatehover للبيانات ، وهي اختيارية وتعني بدء الفيديو عند التمرير فوقه. لا تحتاج إلى وضعه على الفيديو الثاني!
يجب أن يحدد الفيديو الثاني
حجم وحدة تخزين البيانات = وحدة تخزين واحدة ، ولكن إذا كنت لا تريد الأصوات ، فستحتاج إلى تعيين
0 .
مثال على كيفية إجراء مراجعات على الصفحة.للاتصال ، تحتاج إلى إدراج أنماط CSS على الصفحة:
<style> .smartVideo{ width:300px; } .smartVideo video { width:100%; z-index:0; position: absolute; top:0; left:0; user-select:none; border:0; padding:0; margin:0; vertical-align:middle; cursor:pointer; outline:none; } .smartVideo > video:first-child { position:relative; z-index:1; } .smartVideo video:not([data-inits="autoplay"]){visibility:hidden;z-index:0;} .graysv video{ -webkit-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); } .graysv.cpsound video,.graysv:hover video:not([data-mouseout]){ -webkit-filter: none; -ms-filter: none; filter: none; } </style>
ونحن بحاجة إلى ملف JS الذي يجب أن يكون متصلاً قبل علامة نص الإغلاق.
<script src="/smartvideo.js"></script>
مصادر للتحميلتجمع السيناريو في عجلة من امرنا!
إذا كان هناك الكثير من المهتمين ، فسيكون من الممكن إنشاء مكتبة كاملة بمختلف الإعدادات ووضعها على جيثب!
مرة أخرى ، إذا كان شخص ما مهتمًا بالجانب التقني لجافا سكريبت ، فاكتب ، يمكنني أن أرسم شفرة جافا سكريبت JavaScript في المقالة التالية (على الرغم من أنني مضطر لتمشيطها جيدًا وتنظيفها قبل ذلك! :-)
النقاط الرئيسية للفيديو الذكي:
- يعمل تحت الهواتف الذكية والأجهزة اللوحية.
- يوقف الفيديو تلقائيًا إذا قام شخص بالتبديل إلى مكالمة أو التبديل بين علامات تبويب المتصفح.
- يتوقف أو يبدأ تشغيل الفيديو تلقائيًا عند التمرير في الصفحة!
- يبدأ تنزيل مقاطع الفيديو والملصقات فقط عندما يكون الفيديو على مرمى البصر.
ملاحظة: كيفية تنسيق كود html smartVideo لقارئات الشاشة؟
مع خالص التقدير ، خالق مصمم الهبوط لحسابهم الخاص CMS cPortfolio