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

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

กรณีที่เราจะเพิ่มปุ่ม แบบนี้ยังไงหรอครับแอดมิน
จากกรณีที่ผมได้ทำตามตัวอย่าง 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

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

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


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


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

 ความคิดเห็นที่ 1
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 ให้มีค่ามากว่า

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!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,837
ninenik 24-01-2021
 ความคิดเห็นที่ 3
กรณีที่จะกดข้ามไปอีกวีดีโอต้องทำยังไงหรอครับ กับอีกปุ่มเข้าเว็บไซต์ ผมลองแอดปุ่มแล้ว เปลี่ยน id แต่มันต้องรอตามที่เราตั้งไว้ ถึงจะกดได้ ขอบคุณครับ


ฑีฆาวุฒิ ปิติวงศ์หิรัญกุล 24-01-2021 22:00
 ความคิดเห็นที่ 4
ปรับจากโค้ดเดิมเล็กน้อย ลองทำความเข้าใจตัวอย่าง แล้วประยุกต์เพิ่มเติม

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!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
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ