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

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

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

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

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

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

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

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

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

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ถ้า iframe คือส่วนของวิดีโอเนื้อหา ใช้วิธีสร้าง พื้นที่คลุมเนื้อหา iframe

แล้วสร้าง div มาวางซ้อนด้านบน div จะทำหน้าที่รับคำสั่งเมื่อคลิก รูปแบบประมาณนี้

</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,842

ninenik 19-01-2021

ความคิดเห็นที่ 2

กรณีที่จะกดข้ามไปอีกวีดีโอต้องทำยังไงหรอครับ กับอีกปุ่มเข้าเว็บไซต์ ผมลองแอดปุ่มแล้ว เปลี่ยน id แต่มันต้องรอตามที่เราตั้งไว้ ถึงจะกดได้

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

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน