اذهب إلى المحتوى
  • 0

لا أستطيع التحكم في دالة setInterval

Ahmed Monaiem

بواسطة Ahmed Monaiem

 مشاركة

السؤال

Ahmed Monaiem عضو نشيط

Ahmed Monaiem

نشر
نشر (معدل)

بعد تشغيل الفيديو هيظهر تنبيه يظهر اعلان بعد 10 ثوانى

ثم يظهر الاعلان و يرجع الفيديو يعمل مرة اخرى

لكن عداد الثوانى لا يعمل بعد ثانية بعد الاخرى لكنه يقفز بالثانيتين ...فما الخطأ

و هل هناك طريقة انى اعرض الاعلانات على الفيديو بشكل عشوائى من بين مجموعة فيديوهات؟

و هل هناك طريقة انه فى حين توقيف الفيديو يقف العداد على الشاشة و العداد اسفل الفيديو فى لحظة توقيف الفيديو؟

الفانكش mainVideo.onplay

تم التعديل في بواسطة شرف الدين2
توضيح العنوان
رابط هذا التعليق
شارك على الشبكات الإجتماعية

15 أجوبة على هذا السؤال

Recommended Posts

  • 0
Ahmed Monaiem عضو نشيط

Ahmed Monaiem

نشر
  • الكاتب
نشر
بتاريخ 2 ساعات قال شرف الدين2:

برجاء إرفاق الشفرة البرمجية التي يوجد بها المشكلة في تعليق حتى نتمكن من معاينتها

انا باعت الملف و اسم الفانكشن و الفكرة كلها..

حضرتك عاوزنى اعمل ايه..

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
شرف الدين حفني عضو نشيط

شرف الدين حفني

نشر
نشر
بتاريخ الآن قال Ahmed Monaiem:

انا باعت الملف و اسم الفانكشن و الفكرة كلها..

حضرتك عاوزنى اعمل ايه..

يبدو أنك قد نسيت إرفاق الملف. + أرجو بدلًا من وضع الملف وضع الشفرة البرمجية في تعليق

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Ahmed Monaiem عضو نشيط

Ahmed Monaiem

نشر
  • الكاتب
نشر (معدل)

تمام..هبعتها حالا

بتاريخ 30 دقائق مضت قال شرف الدين2:

يبدو أنك قد نسيت إرفاق الملف. + أرجو بدلًا من وضع الملف وضع الشفرة البرمجية في تعليق 

let counter1html = document.getElementById('counter1');

let add1 = document.getElementById('add1');

  let add2 = document.getElementById('add2');

  let add3 = document.getElementById('add3');

 let counterTitle1 = document.getElementById('counterTitle1');

  let counterTitle2 = document.getElementById('counterTitle2');

  let skip = document.getElementById('skip');

  let create = document.getElementById('create');

  let timerhtml = document.getElementById('mainTimer');




videoImg.onclick = function () {

  videoImg.style.display = 'none';

  mainVideo.play();

  content.style.display = 'none';



}






mainVideo.onplay = function () {



  function counter1 () {



    let mainTimer = document.getElementById('mainTimer').innerText -= 1;

   let counter1 = document.getElementById('counter1').innerText -=1;



   if(mainTimer == 190){

     counter1html.style.display = 'block';

     counter1html.innerHTML = 10;

     counterTitle1.style.display = 'block';

   }



  if(mainTimer == 180){

    counterTitle1.style.display = 'none';

     counterTitle2.style.display = 'block';

     counterTitle2.style.zIndex = '20';

     counter1html.style.display = 'block';

     counter1html.style.zIndex = '20';

     counter1html.innerHTML = 10;

     mainVideo.pause();

     add1.style.display = 'block';

     add1.play();



  }



  if(mainTimer == 170){

    add1.pause();

    counterTitle2.style.display = 'none';

    counter1html.style.display = 'none';

    add1.style.display = 'none';

    mainVideo.play();

  }





  if(mainTimer == 150){

    counter1html.style.display = 'block';

    counterTitle1.style.display = 'block';

    counterTitle1.style.zIndex = '20';

    counter1html.innerHTML = 10;

   

  }



  if(mainTimer == 140){

   counterTitle2.style.display = 'block';

   counterTitle1.style.display = 'none';

   counter1html.innerHTML = 61;

   add2.style.display = 'block';

   add2.play();

   mainVideo.pause();



  }



  if(mainTimer == 130 && counter1html.innerHTML == 51){

    skip.style.display = 'block';

  }



  if(mainTimer == 79){

    add2.style.display = 'none';

    add2.pause();

    mainVideo.play();

     counterTitle2.style.display = 'none';

     counter1html.style.display = 'none';

     skip.style.display = 'none'

  }



  if(mainTimer == 50){

     counterTitle1.style.display = 'block';

     counter1html.style.display = 'block';

     counter1html.innerHTML = 10;

  }



  if(mainTimer == 40){

      counterTitle1.style.display = 'none';

      counterTitle2.style.display = 'block';

      counter1html.innerHTML = 83;

      mainVideo.pause();

      add3.style.display = 'bock';

      add3.play()

  }



  if(mainTimer == 30){

      skip.style.display = 'block'

  }



  if(mainTimer == -33){

     add3.style.display = 'none';

     add3.pause();

     counter1html.style.display = 'none';

     counterTitle2.style.display = 'none';

     skip.style.display = 'none';

     mainVideo.play()

  }



  skip.onclick = function () {

    skip.style.display = 'none';

    counter1html.style.display = 'none';

    counterTitle2.style.display = 'none';

    add1.style.display = 'none';

    add1.pause();

    add2.style.display = 'none';

    add2.pause();

    add3.style.display = 'none';

    add3.pause();

    mainVideo.play();

  }




 }



 setInterval(counter1,1000);




}

لو مش واضحه ممكن ابعت ملف الصفحة فقط

تم التعديل في بواسطة شرف الدين2
تنسيق الشفرة البرمجية
  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
سامح أشرف عضو نشيط

سامح أشرف

نشر
نشر
بتاريخ 6 ساعات قال Ahmed Monaiem:

تمام..هبعتها حالا

لو مش واضحه ممكن ابعت ملف الصفحة فقط

هل يمكنك إضافة كود HTML كذلك لأن هناك بعض العناصر لا يتضح معنها من مجرد قراءة id الخاص بها فقط

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Ahmed Monaiem عضو نشيط

Ahmed Monaiem

نشر
  • الكاتب
نشر
بتاريخ 16 ساعات قال سامح أشرف:

هل يمكنك إضافة كود HTML كذلك لأن هناك بعض العناصر لا يتضح معنها من مجرد قراءة id الخاص بها فقط

تفضل.. 

<div class="mainVideo">

  <video id="mainVideo" src="video/animal.mp4" controls autoplay ></video>
  <span id="counterTitle1" class="counterTitle1">يظهر اعلان بعد</span>
  <div class="counter1" id="counter1">10</div>
  <span id="counterTitle2" class="counterTitle2">ينتهى الاعلان بعد</span>
  <div class="mainTimer" id="mainTimer">200</div>

  <video class="add1 one" id="add1" src="video/ad.mp4"></video>
  <video class="add2 one" id="add2" src="video/ad2.mp4"></video>
  <video class="add3 one" id="add3" src="video/ad3.mp4"></video>
  <button id="skip" class="btn btn-dark" >SKIP ADD</button>
  <div id="create" class="create">How to create a div in javascript...</div>
  <div id="content" class="content">محتوى الفيديو لا يعبر عن الواقع..لعدم توفر الفيديوهات  ..أحمد منعم..
  </div>
  <div class="mainVideoAnimate" id="mainVideoAnimate">
    <div class="spinner-border text-danger" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>

  <div id="videoImg" class="videoImg">
    <i class="fab fa-youtube logo" id="logo"></i> 
  </div>

  <div id="mainTitle" class="mainTitle">
    How you learn and remember..
  </div>
  <div class="mainWatchNumber mt-2 mb-1">
    <div class="row">
      <div class="col-4 mainDate">30 June, 2011 </div>
      <div class="col-8 text-right">
        <div class="mainIcon">
          <i class="fal fa-thumbs-up main_icon1"></i>
          <span class=" main_like">100K</span>
          <i class="fal fa-thumbs-down main_icon2"></i>
          <span class=" main_deslike">Deslike</span>
          <i class="fal fa-share"></i>
          <i class="fal fa-layer-plus"></i>
          <span class="">SAVE</span>
          <i class="far fa-ellipsis-h"></i>
        </div>
      </div>
    </div>
  </div>
</div>

ask.zip

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
سامح أشرف عضو نشيط

سامح أشرف

نشر
نشر
بتاريخ 14 ساعات قال Ahmed Monaiem:

تفضل..

بالنسبة لمشكلة أن العداد counter يُسرع ويتخطى بعض الثواني، فالسبب هو أنك تضيف الحدث setInterval جديد في كل مرة يعمل فيها الفيديو، فعلى سبيل المثال إذا قمت بتشغيل الفيديو في أول مرة ولم تقم بإيقافه على يدويًا فسوف تجد أن العداد يعمل بشكل سليم، ولكن إذا قمت بإيقاف الفيديو وقمت بتشغيله أكثر من مرة فسوف تجد أن العداد يُسرع أكثر وأكثر، والسبب هو أنك تجعل الدالة counter1 تعلم أكثر من مرة، حيث أنك أضفت الكود التالي: 

// في كل مرة يعمل الفيديو (أو يكمل التشغيل بعد إيقافه) سوف يعمل الكود التالي بالكامل
// وبالتي سوف يتم تشغيل أكثر من دالة setInterval بالتوازي
mainVideo.onplay = function () {
  function counter1() {
	// ...
  }

	setInterval(counter1, 1000)
}

لحل هذه المشكلة يمكن أن تقوم بتشغيل الدالة setInterval عند تحميل الصفحة وتُخرج الدالة counter1 خارج الحدث onplay بالشكل التالي: 

function counter1() {
  // ...
}

document.addEventListener('DOMContentLoaded', () => setInterval(counter1, 1000))

أما لتحديد إعلان عشوائي من بين الإعلانات الموجودة في الصفحة، فيجب أن تقوم بإستخدام الأصناف classes وليس المعرفات IDs بالشكل التالي: 

let ads = document.querySelectorAll('.one');
let adsLength = ads.length;
let randomAdIndex = Math.floor(Math.random() * adsLength)
let randomAd = ads[randomAdIndex];

ولكي تجعل العداد يتوقف عند إيقاف الفيديو الرئيسي عليك تعديل الدالة counter1 لكي تعمل فقط عندما يكون الفيديو يعمل، على النحو التالي: 

function counter1() {
  let mainTimer = document.getElementById('mainTimer').innerText;

  // نوقف الدالة عندما يكون الفيديو متوقف ولا يوجد إعلان يعمل
  const adNotEnded = randomAd.currentTime !== randomAd.duration;
  if (mainVideo.paused && randomAd.paused && adNotEnded) {
    return
  }

  document.getElementById('mainTimer').innerText -= 1
  
  // ..
}

وبالتالي يصبح الكود بالكامل بالشكل التالي: 

let ads = document.querySelectorAll('.one');	// نحدد كل الفيديوهات
let adsLength = ads.length;
let randomAdIndex = Math.floor(Math.random() * adsLength)
let randomAd = ads[randomAdIndex];	// فيدفيو عشوائي

function counter1() {
  let mainTimer = document.getElementById('mainTimer').innerText;

  // نوقف الدالة إذا كان الفيديو الرئيسي متوقف والإعلان متوقف (في حالة لم ينتهي الإعلان)
  const adNotEnded = randomAd.currentTime !== randomAd.duration;
  if (mainVideo.paused && randomAd.paused && adNotEnded) {
    return
  }

  document.getElementById('mainTimer').innerText -= 1
  document.getElementById('counter1').innerText -= 1;

  if (mainTimer == 190) {
    counter1html.style.display = 'block';
    counter1html.innerHTML = 10;
    counterTitle1.style.display = 'block';
  }

  if (mainTimer == 180) {
    counterTitle1.style.display = 'none';
    counterTitle2.style.display = 'block';
    counterTitle2.style.zIndex = '20';
    counter1html.style.display = 'block';
    counter1html.style.zIndex = '20';
    counter1html.innerHTML = 10;
    mainVideo.pause();
    randomAd.style.display = 'block';
    randomAd.play();
  }

  if (mainTimer == 170) {
    randomAd.pause();
    counterTitle2.style.display = 'none';
    counter1html.style.display = 'none';
    randomAd.style.display = 'none';
    mainVideo.play();
  }
}

document.addEventListener('DOMContentLoaded', () => setInterval(counter1, 1000));

 

  • أعجبني 2
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Ahmed Monaiem عضو نشيط

Ahmed Monaiem

نشر
  • الكاتب
نشر
بتاريخ منذ ساعة مضت قال سامح أشرف:

بالنسبة لمشكلة أن العداد counter يُسرع ويتخطى بعض الثواني، فالسبب هو أنك تضيف الحدث setInterval جديد في كل مرة يعمل فيها الفيديو، فعلى سبيل المثال إذا قمت بتشغيل الفيديو في أول مرة ولم تقم بإيقافه على يدويًا فسوف تجد أن العداد يعمل بشكل سليم، ولكن إذا قمت بإيقاف الفيديو وقمت بتشغيله أكثر من مرة فسوف تجد أن العداد يُسرع أكثر وأكثر، والسبب هو أنك تجعل الدالة counter1 تعلم أكثر من مرة، حيث أنك أضفت الكود التالي: 


// في كل مرة يعمل الفيديو (أو يكمل التشغيل بعد إيقافه) سوف يعمل الكود التالي بالكامل
// وبالتي سوف يتم تشغيل أكثر من دالة setInterval بالتوازي
mainVideo.onplay = function () {
  function counter1() {
	// ...
  }

	setInterval(counter1, 1000)
}

لحل هذه المشكلة يمكن أن تقوم بتشغيل الدالة setInterval عند تحميل الصفحة وتُخرج الدالة counter1 خارج الحدث onplay بالشكل التالي: 


function counter1() {
  // ...
}

document.addEventListener('DOMContentLoaded', () => setInterval(counter1, 1000))

أما لتحديد إعلان عشوائي من بين الإعلانات الموجودة في الصفحة، فيجب أن تقوم بإستخدام الأصناف classes وليس المعرفات IDs بالشكل التالي: 


let ads = document.querySelectorAll('.one');
let adsLength = ads.length;
let randomAdIndex = Math.floor(Math.random() * adsLength)
let randomAd = ads[randomAdIndex];

ولكي تجعل العداد يتوقف عند إيقاف الفيديو الرئيسي عليك تعديل الدالة counter1 لكي تعمل فقط عندما يكون الفيديو يعمل، على النحو التالي: 


function counter1() {
  let mainTimer = document.getElementById('mainTimer').innerText;

  // نوقف الدالة عندما يكون الفيديو متوقف ولا يوجد إعلان يعمل
  const adNotEnded = randomAd.currentTime !== randomAd.duration;
  if (mainVideo.paused && randomAd.paused && adNotEnded) {
    return
  }

  document.getElementById('mainTimer').innerText -= 1
  
  // ..
}

وبالتالي يصبح الكود بالكامل بالشكل التالي: 


let ads = document.querySelectorAll('.one');	// نحدد كل الفيديوهات
let adsLength = ads.length;
let randomAdIndex = Math.floor(Math.random() * adsLength)
let randomAd = ads[randomAdIndex];	// فيدفيو عشوائي

function counter1() {
  let mainTimer = document.getElementById('mainTimer').innerText;

  // نوقف الدالة إذا كان الفيديو الرئيسي متوقف والإعلان متوقف (في حالة لم ينتهي الإعلان)
  const adNotEnded = randomAd.currentTime !== randomAd.duration;
  if (mainVideo.paused && randomAd.paused && adNotEnded) {
    return
  }

  document.getElementById('mainTimer').innerText -= 1
  document.getElementById('counter1').innerText -= 1;

  if (mainTimer == 190) {
    counter1html.style.display = 'block';
    counter1html.innerHTML = 10;
    counterTitle1.style.display = 'block';
  }

  if (mainTimer == 180) {
    counterTitle1.style.display = 'none';
    counterTitle2.style.display = 'block';
    counterTitle2.style.zIndex = '20';
    counter1html.style.display = 'block';
    counter1html.style.zIndex = '20';
    counter1html.innerHTML = 10;
    mainVideo.pause();
    randomAd.style.display = 'block';
    randomAd.play();
  }

  if (mainTimer == 170) {
    randomAd.pause();
    counterTitle2.style.display = 'none';
    counter1html.style.display = 'none';
    randomAd.style.display = 'none';
    mainVideo.play();
  }
}

document.addEventListener('DOMContentLoaded', () => setInterval(counter1, 1000));

 

شكرا جدا تعمل الأن...

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
سامح أشرف عضو نشيط

سامح أشرف

نشر
نشر
بتاريخ 3 دقائق مضت قال Ahmed Monaiem:

لكن ما هى DOMContentLoaded

الحدث DOMContentLoaded مقصود به عند الإنتهاء من تحميل الصفحة Document Content Loaded، يمكنك الإطلاع على مزيد من التفاصيل عن هذا الحدث من خلال هذه المقالة:

 

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Ahmed Monaiem عضو نشيط

Ahmed Monaiem

نشر
  • الكاتب
نشر
بتاريخ 5 دقائق مضت قال سامح أشرف:

الحدث DOMContentLoaded مقصود به عند الإنتهاء من تحميل الصفحة Document Content Loaded، يمكنك الإطلاع على مزيد من التفاصيل عن هذا الحدث من خلال هذه المقالة:

شكرااا جدااا..

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Ahmed Monaiem عضو نشيط

Ahmed Monaiem

نشر
  • الكاتب
نشر
بتاريخ 2 ساعات قال Ahmed Monaiem:

 

 

بتاريخ 2 ساعات قال سامح أشرف:

الحدث DOMContentLoaded مقصود به عند الإنتهاء من تحميل الصفحة Document Content Loaded، يمكنك الإطلاع على مزيد من التفاصيل عن هذا الحدث من خلال هذه المقالة:

 

شكرا لتعب حضرتك..

لكن لو الاعلانات اللى هتتحط مدتها مختلفه كيف اتحكم فى العداد على الشاشه

لاننى وضعت له قيمه مسبقة و هى 10

كنت استطيع ان اغيرها حينما كنت اضع الاعلانات ستاتيك..

اما فى حالة الظهور العشوائى فلا اعلم ايهم سيظهر اولا لتحديد الوقت على الشاشه..

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
سامح أشرف عضو نشيط

سامح أشرف

نشر
نشر
بتاريخ منذ ساعة مضت قال Ahmed Monaiem:

شكرا لتعب حضرتك..

لكن لو الاعلانات اللى هتتحط مدتها مختلفه كيف اتحكم فى العداد على الشاشه

لاننى وضعت له قيمه مسبقة و هى 10

كنت استطيع ان اغيرها حينما كنت اضع الاعلانات ستاتيك..

اما فى حالة الظهور العشوائى فلا اعلم ايهم سيظهر اولا لتحديد الوقت على الشاشه..

يمكنك التحكم في مدة عرض الإعلان من خلال إضافة خاصية جديد في كل عنصر video خاص بالإعلانات وليكن اسمها data-duration، بالشكل التالي: 

<video class="add1 one" id="add1" src="video/ad.mp4" data-duration="5"></video>
<video class="add2 one" id="add2" src="video/ad2.mp4" data-duration="7"></video>
<video class="add3 one" id="add3" src="video/ad3.mp4" data-duration="10"></video>

ثم في كود JavaScript نقوم بتغير قيمة العداد بحسب القيمة الموجودة في الخاصية data-duration في الإعلان الذي تم إختياره عشوائيًا: 

let ads = document.querySelectorAll('.one');
let adsLength = ads.length;
let randomAdIndex = Math.floor(Math.random() * adsLength)
let randomAd = ads[randomAdIndex];

// نقوم بجلب القيمة الموجودة في العنصر video ونحولها إلى رقم
// parseInt عبارة عن دالة تحول النص إلى رقم
// "10" => 10
const adDuration = parseInt(randomAd.getAttribute('data-duration'));
document.getElementById('counter1').innerHTML = adDuration

ثم نستخدم قيمة الخاصية data-duration كذلك في حساب مدة عرض الإعلان وعرض العداد: 

if (mainTimer == 180) {
  counterTitle1.style.display = 'none';
  counterTitle2.style.display = 'block';
  counterTitle2.style.zIndex = '20';
  counter1html.style.display = 'block';
  counter1html.style.zIndex = '20';
  counter1html.innerHTML = adDuration;	// نغير قيمة العداد في كل ثانية
  mainVideo.pause();
  randomAd.style.display = 'block';
  randomAd.play();
}

// إخفاء الإعلان عند إنتهاء المدة
if (mainTimer == (180 - adDuration)) {
  randomAd.pause();
  counterTitle2.style.display = 'none';
  counter1html.style.display = 'none';
  randomAd.style.display = 'none';
  mainVideo.play();
}

بهذا الشكل سوف يظهر في كل مرة إعلان عشوائي ونستطيع التحكم في مدة عرض كل إعلان من خلال تغير قيمة الخاصية data-duration

  • أعجبني 2
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Ahmed Monaiem عضو نشيط

Ahmed Monaiem

نشر
  • الكاتب
نشر
بتاريخ 3 دقائق مضت قال سامح أشرف:

يمكنك التحكم في مدة عرض الإعلان من خلال إضافة خاصية جديد في كل عنصر video خاص بالإعلانات وليكن اسمها data-duration، بالشكل التالي: 


<video class="add1 one" id="add1" src="video/ad.mp4" data-duration="5"></video>
<video class="add2 one" id="add2" src="video/ad2.mp4" data-duration="7"></video>
<video class="add3 one" id="add3" src="video/ad3.mp4" data-duration="10"></video>

ثم في كود JavaScript نقوم بتغير قيمة العداد بحسب القيمة الموجودة في الخاصية data-duration في الإعلان الذي تم إختياره عشوائيًا: 


let ads = document.querySelectorAll('.one');
let adsLength = ads.length;
let randomAdIndex = Math.floor(Math.random() * adsLength)
let randomAd = ads[randomAdIndex];

// نقوم بجلب القيمة الموجودة في العنصر video ونحولها إلى رقم
// parseInt عبارة عن دالة تحول النص إلى رقم
// "10" => 10
const adDuration = parseInt(randomAd.getAttribute('data-duration'));
document.getElementById('counter1').innerHTML = adDuration

ثم نستخدم قيمة الخاصية data-duration كذلك في حساب مدة عرض الإعلان وعرض العداد: 


if (mainTimer == 180) {
  counterTitle1.style.display = 'none';
  counterTitle2.style.display = 'block';
  counterTitle2.style.zIndex = '20';
  counter1html.style.display = 'block';
  counter1html.style.zIndex = '20';
  counter1html.innerHTML = adDuration;	// نغير قيمة العداد في كل ثانية
  mainVideo.pause();
  randomAd.style.display = 'block';
  randomAd.play();
}

// إخفاء الإعلان عند إنتهاء المدة
if (mainTimer == (180 - adDuration)) {
  randomAd.pause();
  counterTitle2.style.display = 'none';
  counter1html.style.display = 'none';
  randomAd.style.display = 'none';
  mainVideo.play();
}

بهذا الشكل سوف يظهر في كل مرة إعلان عشوائي ونستطيع التحكم في مدة عرض كل إعلان من خلال تغير قيمة الخاصية data-duration

يا أخى ربنا يبارك لك..شكرا جداا..

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Ahmed Monaiem عضو نشيط

Ahmed Monaiem

نشر
  • الكاتب
نشر
بتاريخ On 18‏/3‏/2022 at 23:45 قال Ahmed Monaiem:

تفضل.. 


<div class="mainVideo">

  <video id="mainVideo" src="video/animal.mp4" controls autoplay ></video>
  <span id="counterTitle1" class="counterTitle1">يظهر اعلان بعد</span>
  <div class="counter1" id="counter1">10</div>
  <span id="counterTitle2" class="counterTitle2">ينتهى الاعلان بعد</span>
  <div class="mainTimer" id="mainTimer">200</div>

  <video class="add1 one" id="add1" src="video/ad.mp4"></video>
  <video class="add2 one" id="add2" src="video/ad2.mp4"></video>
  <video class="add3 one" id="add3" src="video/ad3.mp4"></video>
  <button id="skip" class="btn btn-dark" >SKIP ADD</button>
  <div id="create" class="create">How to create a div in javascript...</div>
  <div id="content" class="content">محتوى الفيديو لا يعبر عن الواقع..لعدم توفر الفيديوهات  ..أحمد منعم..
  </div>
  <div class="mainVideoAnimate" id="mainVideoAnimate">
    <div class="spinner-border text-danger" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>

  <div id="videoImg" class="videoImg">
    <i class="fab fa-youtube logo" id="logo"></i> 
  </div>

  <div id="mainTitle" class="mainTitle">
    How you learn and remember..
  </div>
  <div class="mainWatchNumber mt-2 mb-1">
    <div class="row">
      <div class="col-4 mainDate">30 June, 2011 </div>
      <div class="col-8 text-right">
        <div class="mainIcon">
          <i class="fal fa-thumbs-up main_icon1"></i>
          <span class=" main_like">100K</span>
          <i class="fal fa-thumbs-down main_icon2"></i>
          <span class=" main_deslike">Deslike</span>
          <i class="fal fa-share"></i>
          <i class="fal fa-layer-plus"></i>
          <span class="">SAVE</span>
          <i class="far fa-ellipsis-h"></i>
        </div>
      </div>
    </div>
  </div>
</div>

ask.zip

السلام عليكم..

الاعلان على الفيديو يعمل و يظهر بشكل طبيعى

لكن عند تشغيل ةلفيديو بوضع ملء الشاشه لا يعمل فوق الفيديو على الرغم من توقف الفيديو

و بعد انتهاء الاعلان  يظهر ايضا صندوق البحث و زر تسجيل الدخول و هم فى الاصل مخفيين..

جربت zIndex منفعتش

ممكن اعمل ايه؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

×
 مشاركة
اذهب إلى قائمة الأسئلة

  • إعلانات

  • تابعنا على



×
×
  • أضف...