هل تريد تشغيل فيديو بملء الشاشة على صفحتك الرئيسية؟ يُستخدم هذا الفيديو كخلفية لصفحة الويب ولا يؤثر على التصفح العادي لمحتوى الويب. دعني أخبرك أن هناك مكتبة جافا سكريبت تناسب احتياجاتك وهي Bideo.js.
مميزةالضبط التلقائي: يمكن لـ Bideo.js ضبط حجم الفيديو تلقائيًا وفقًا لحجم نافذة المتصفح الحالية، وعندما يتم ضبط نافذة المتصفح، فسوف تتكيف مع حجم النافذة، ويمكن لكل من جانبي الهاتف المحمول والكمبيوتر الشخصي ضبط الفيديو تلقائيًا يمكن استخدامها كخلفية وعرضها في وضع ملء الشاشة.
التراكب: بعد استخدام الفيديو كخلفية لصفحة الويب، يمكننا وضع أي محتوى HTML أعلى الفيديو.
غلاف الفيديو: عند فتح الصفحة، قد يستغرق تحميل الفيديو بضع ثوانٍ، ثم يمكننا تعيين صورة كغلاف للفيديو والانتظار حتى يتم تحميله قبل التشغيل.
HTMLأضف كود HTML التالي إلى نص صفحتك. من الواضح أن العلامة <video> تُستخدم لتحميل مقاطع الفيديو، وتشير حلقة السمة إلى تكرار الفيديو، ويشير كتم الصوت إلى وضع كتم الصوت، أي أن مستوى الصوت هو 0. #video_cover هو غلاف الفيديو الافتراضي. #overlay هي طبقة القناع التي يتم عرض كافة محتويات الصفحة الأخرى عليها.
<div id=container> <video id=background_video حلقة كتم الصوت></video> <div id=video_cover></div> <div id=overlay></div> <div id=video_controls> <span id=play> <img src=play.png> </span> <span id=pause> <img src=pause.png> </span> </div> <section id=main_content> <div id=head> <h1>ينفذ HTML5 خلفية فيديو بملء الشاشة بسهولة - Bideo.js</h1> <p class=sub_head>مكتبة Javascript يمكنها بسهولة إضافة فيديو خلفية بملء الشاشة إلى الصفحة </p> <p class=info>(انتظر لحظة، سيستغرق تحميل الفيديو بعض الوقت.)</p> </div> </section></div>
أضفنا أيضًا #عناصر_التحكم_بالفيديو والتي تستخدم للتحكم في تشغيل الفيديو وإيقافه مؤقتًا، وهي مناسبة للهواتف المحمولة. وأخيرًا، يمكنك إضافة أي محتوى HTML تريد عرضه في القسم التالي.
CSSيعد CSS أيضًا أمرًا بالغ الأهمية. وأهم الأشياء التي يجب الانتباه إليها هي إعدادات #container و #background_video. يمكن أخذ كود CSS التالي مباشرة دون شرح:
* { الحشو: 0؛} html، body { width: 100%; : 0؛ أسفل: 0؛ الارتفاع: 100%؛}#background_video { الموضع: مطلق؛ الأعلى: 50%؛ اليسار: 50%؛ -50%)؛ ملاءمة الكائن: الارتفاع: 100%؛ العرض: 100%؛}#video_cover { الموضع: العرض: 100% الارتفاع: 100% الخلفية: url('video_cover.jpeg') no - كرر حجم الخلفية: الغطاء؛ موضع الخلفية: المركز؛ } #overlay { الموضع: أعلى: 0؛ يسار: 0؛ rgba(0,0,0,0.5);} جافا سكريبتقم أولاً بتحميل مكتبة Bideo:
<script src=bideo.js></script>
ثم قم بإنشاء مثيل لـ bido: new Bideo()، ثم قم بتهيئة التحميل مباشرة وضبط الخيارات التالية:
(function () { var bv = new Bideo(); bv.init({ // عنصر الفيديو videoEl: document.querySelector('#background_video')، // حاوية عنصر الحاوية: document.querySelector('body')، / / تغيير حجم الضبط التكيفي: صحيح، // التشغيل التلقائي: خطأ، isMobile: window.matchMedia('(max-width: 768px)').matches, playButton: document.querySelector('#play')، PauseButton: document.querySelector('#pause')، // قم بتحميل مصدر الفيديو واستبدل ملف مصدر الفيديو الخاص بك وفقًا للأعمال الفعلية src: [ { src: http://ak4.picdn.net/shutterstock/videos/4170274/preview/stock-footage-beautiful-girl-lying-on-the-meadow-and-dreaming-enjoy-nature- Close-up-slow-motion -footage.mp4'، اكتب: 'video/mp4' }، {src: 'night.webm'، اكتب: 'video/webm;codecs=vp8, vorbis' } ], // بمجرد تحميل الفيديو، سيتم إخفاء غلاف الفيديو onLoad: function () { document.querySelector('#video_cover').style.display = 'none '; } } );}());بهذه الطريقة تمامًا، اكتملت صفحة فيديو خلفية عالية المظهر مرحبًا بك لعرض العرض التوضيحي عبر الإنترنت وتنزيل الكود المصدري. لمزيد من المعلومات حول Bideo.js، يرجى الاطلاع على عنوان مشروع جيثب: https://github.com/rishabhp/bideo.js.
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.