สวัสดีครับสอนเขียน JavaScript เกี่ยวกับการแทรกวีดีโอหน่อยได้มั้ย โดยกดไปที่ไอเฟรม แล้วให้ขึ้นเป็นโฆษณา 5 วิ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สวัสดีครับสอนเขียน JavaScript เกี่ยวกับการแทรกวีดีโอหน่อยได้มั้ย โดยกดไปที่ไอเฟรม แล้วให้ขึ้นเป็นโฆษณา 5 วิ

สวัสดีครับสอนเขียน JavaScript เกี่ยวกับการแทรกวีดีโอหน่อยได้มั้ย โดยกดไปที่ไอเฟรม แล้วให้ขึ้นเป็นโฆษณา 5 วิ

คือมีไอเฟรมอยู๋1อัน 

<iframe></iframe>

ต้องการให้แบบคลิ๊ก แล้วมี player ขึ้นมาเป็นแอด 5 วิ ก่อนเข้าชมวีดีโอการเรียนการสอน



ฑีฆาวุฒิ ปิติวงศ์หิรัญกุล 19-01-2021 17:31:17

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
ถ้า iframe คือส่วนของวิดีโอเนื้อหา ใช้วิธีสร้าง พื้นที่คลุมเนื้อหา iframe
แล้วสร้าง div มาวางซ้อนด้านบน div  จะทำหน้าที่รับคำสั่งเมื่อคลิก รูปแบบประมาณนี้
 
<div class="wrap-iframe"> 
<div class="click-area"></div>
<video class="video-ads"></viideo>
<iframe class="iframe-video"></iframe>
</div>
 
wrap-iframe จะกำหนดพื้นที่ทั้งหมดของวิดีโอใน iframe
click-area จะกำหนดพื้นที่ที่จะให้คลิก หรือพื้นที่ทั้งหมดที่วางไว้ด้านบนของ iframe-video - ซ้อนอยู่บนสุดใช้ opacity 0
video-ads จะให้แสดงวิดีโอโฆษณา - ซ้อนอยู่ถัดมา ซ่อนไว้ก่อนเมื่อคลิกที่ด้านบน ก็ค่อยแสดง แสดงเสร็จก็มให้ซ่อนไป
iframe-video แสดงวิดีโอเนื้อหา - ซ้อนอยู่ด้านล่างสุด

ดูตัวอย่างโค้ดนี้เป็นแนวทาง

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ads Video</title>
</head>
<body>
<style>
  .wrap-iframe{
    position: relative;
    width:560px;
    height: 315px;
  }
  .wrap-iframe .video-ads{
    position: absolute;
    top:0px;
    width:560px;
    height: 315px;    
    z-index: 900005;
    opacity: 0;
  }
  .wrap-iframe .click-area{
    position: absolute;
    top:0px;
    width:560px;
    height: 315px;
     z-index: 900006;
    opacity: 0;
  }  
  .wrap-iframe .iframe-video{
    position: absolute;
    top:0px;
    left:0px;
    width:560px;
    height: 315px;
   
  }    
  </style>
  <div class="wrap-iframe">
    <div class="click-area"></div>
    <video class="video-ads" 
        src="https://www.ninenik.com/video/small.mp4" 
         >
      Your browser does not support HTML5 video.
    </video>
    <iframe class="iframe-video" src="https://www.youtube.com/embed/iaSYN9xYoyc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
   
  <script>
  $(function(){
    $(".click-area").on("click",function(){
      var adsVideo = $(".video-ads").css("opacity",1);
      adsVideo[0].play();
    });
    $(".video-ads").on("ended",function(e){
        $(".click-area").remove();
        $(".video-ads").remove();
    });     
  });
  </script>
</body>
</html>

ตัวอย่าง DEMO

บทความแนะนำที่เกี่ยวข้อง
รู้จัก property position ของ css ให้มากขึ้น ด้วย ตัวอย่าง และคำอธิบายอ่าน 52,367
ninenik 19-01-2021
 ความคิดเห็นที่ 2
กรณีที่จะกดข้ามไปอีกวีดีโอต้องทำยังไงหรอครับ กับอีกปุ่มเข้าเว็บไซต์ ผมลองแอดปุ่มแล้ว เปลี่ยน id แต่มันต้องรอตามที่เราตั้งไว้ ถึงจะกดได้


ฑีฆาวุฒิ ปิติวงศ์หิรัญกุล 24-01-2021 20:46






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ