weschool - www w3schools com html5




الفيديو كخلفية للموقع؟ HTML 5 (2)

أريد استخدام فيديو كخلفية بدلاً من صورة تمتد تلقائيًا إلى الشاشة بأكملها (الخلفية).

أود أيضًا تدوير مقاطع الفيديو والصور .. حتى يتم عرض فيديو / صورة عشوائية بأي ترتيب.

سيكون من الجيد أيضًا معرفة كيفية تأخير تشغيل الفيديو ، بحيث يتم تشغيل الفيديو مرة واحدة فقط بعد 30 ثانية من تحميل الموقع.

شكرًا!


ألقِ نظرة على المكون الإضافي لـ jquery videoBG

http://syddev.com/jquery.videoBG/

جعل أي فيديو HTML5 خلفية موقع ... يحتوي على صورة احتياطية للمتصفحات التي لا تدعم html5

حقا سهل الاستخدام

اعلمني ان كنت في حاجة لاية مساعدة.


أولاً ، تبدو علامات HTML على النحو التالي:

<video id="awesome_video" src="first_video.mp4" autoplay />

ثانيًا ، ستبدو شفرة جافا سكريبت كالتالي:

<script type="text/javascript">
  var index = 1,
      playlist = ['first_video.mp4', 'second_video.mp4', 'third_video.mp4'],
      video = document.getElementById('awesome_video');

  video.addEventListener('ended', rotate_video, false);

  function rotate_video() {
    video.setAttribute('src', playlist[index]);
    video.load();
    index++;
    if (index >= playlist.length) { index = 0; }
  }
</script>

وأخيرًا وليس آخرًا ، CSS الخاص بك:

#awesome_video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

سيؤدي هذا إلى إنشاء عنصر فيديو في صفحتك يبدأ تشغيل أول مقطع فيديو على الفور ، ثم يتكرر عبر قائمة التشغيل المحددة بواسطة متغير جافا سكريبت. قد تتغير المسافة المقطوعة بالميل مع CSS اعتمادًا على CSS لبقية الموقع ، ولكن عرض / ارتفاع بنسبة 100٪ يجب أن يحدث على صفحة أساسية.







html5-video