กรณีที่เราจะเพิ่มปุ่ม แบบนี้ยังไงหรอครับแอดมิน

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา กรณีที่เราจะเพิ่มปุ่ม แบบนี้ยังไงหรอครับแอดมิน

กรณีที่เราจะเพิ่มปุ่ม แบบนี้ยังไงหรอครับแอดมิน

จากกรณีที่ผมได้ทำตามตัวอย่าง http://niik.in/que_3143_6987
ได้แบบนี้ขึ้น
<iframe width="560" height="315" src="https://www.youtube.com/embed/hTrUI_jCO3M" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
คือผมอยากให้มีปุ่มแบบนี้ขึ้นมาและมีเค้าดาวน์ ลดจาก 10ถึง0 แล้วขึ้นเป็นข้ามพอกดข้ามก็จะไปอีกวีดีโอนึงหรือจบหายไป แบบนี้ต้องทำยังไงหรอครับ

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

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

<iframe width="560" height="315" src="https://www.youtube.com/embed/hTrUI_jCO3M" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

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

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

ดูแนวทางการประยุกต์จากตัวอย่างด้านล่าง

ถ้าเราต้องการเพิ่ม ส่วนที่ซ้อนด้านบน จะกำหนดว่าอยู่บนหรือล่างด้วย

ค่า z-index ค่ายิ่งเยอะจะอยู่ด้านบน ดังนั้นถ้าเราจะมีส่วนของปุ่มแสดง

ด้านบนก็ต้องสร้างเพิ่ม และกำหนด z-index ให้มีค่ามากว่า

<!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: 900004;
    opacity: 0;
  }
  .wrap-iframe .skip-area{
    position: absolute;
    top:0px;
    width:560px;
    height: 315px;    
    z-index: 900005;
    opacity: 0;
  }  
  .wrap-iframe .skip-area .skip-button{  
    position:absolute;
    bottom:50px;
    right: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>
    <div class="skip-area">
      <button class="skip-button" type="button">รอสักครู่..</button>
    </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(){
    var timeCount = 3;
    $(".click-area").on("click",function(){
      var adsVideo = $(".video-ads").css("opacity",1);
      adsVideo[0].play();
      $(".skip-area").css("opacity",1);
      let stepTime = setInterval(function(){
              timeCount--;   
              $(".skip-button").text("รอสักครู่.."+ timeCount);
              if(timeCount<1){
                clearInterval(stepTime);
                $(".skip-button").addClass("active").text("ข้าม");
                $(".click-area").remove();
              }
        },1000);
    });
    $(".video-ads").on("ended",function(e){
        $(".skip-area").remove();
        $(".click-area").remove();
        $(".video-ads").remove();
    });     
    $(document.body).on("click",".skip-button.active",function(){
        $(".skip-area").remove();
        $(".click-area").remove();
        $(".video-ads").remove();      
    });
  });
  </script>
</body>
</html>

ตัวอย่าง DEMO

บทความแนะนำที่เกี่ยวข้อง
รู้จัก property position ของ css ให้มากขึ้น ด้วย ตัวอย่าง และคำอธิบาย	อ่าน 52,472

ninenik 24-01-2021

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

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

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

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

ปรับจากโค้ดเดิมเล็กน้อย ลองทำความเข้าใจตัวอย่าง แล้วประยุกต์เพิ่มเติม

<!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: 900004;
    opacity: 0;
  }
  .wrap-iframe .skip-area{
    position: absolute;
    top:0px;
    width:560px;
    height: 315px;    
    z-index: 900005;
    opacity: 0;
  }  
  .wrap-iframe .skip-area .skip-button{  
    position:absolute;
    bottom:50px;
    right:0;
  }
   .wrap-iframe .skip-area .link-button{  
    position:absolute;
    bottom:100px;
    right: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>
    <div class="skip-area">
      <a class="link-button" href="https://www.ninenik.com" target="_blank">เข้าเว็บไซต์</a>
      <button class="skip-button" type="button">รอสักครู่..</button>
    </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(){
    var timeCount = 3;
    $(".click-area").on("click",function(){
      var adsVideo = $(".video-ads").css("opacity",1);
      adsVideo[0].play();
      $(".skip-area").css("opacity",1);
      $(".click-area").remove();
      let stepTime = setInterval(function(){
              timeCount--;   
              $(".skip-button").text("รอสักครู่.."+ timeCount);
              if(timeCount<1){
                clearInterval(stepTime);
                $(".skip-button").addClass("active").text("ข้าม");               
              }
        },1000);
    });
    $(".video-ads").on("ended",function(e){
        $(".skip-area").remove();
        $(".click-area").remove();
        $(".video-ads").remove();
    });     
    $(document.body).on("click",".skip-button.active",function(){
        $(".skip-area").remove();
        $(".click-area").remove();
        $(".video-ads").remove();      
    });
  });
  </script>
</body>
</html>

ตัวอย่าง DEMO

ninenik 25-01-2021

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

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

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