รบกวนสอบถามโค้ด ก่อนจะรับชมวิดีโอ อยากให้มีโฆษณาขึ้นมาประมาณ 5 วินาที แต่ขณะที่โฆษณาสามารถกดข้ามได้ ครับ

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

รบกวนสอบถามโค้ด ก่อนจะรับชมวิดีโอ อยากให้มีโฆษณาขึ้นมาประมาณ 5 วินาที แต่ขณะที่โฆษณาสามารถกดข้ามได้ ครับ


Mario 29-03-2020 12:37:09

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

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


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


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

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

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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" >
</head>
<body>
 
<style type="text/css">
.my-video{
    position:absolute;
    left:0;top:0;
    z-index:100;   
}
.wrap-video{
    position:relative;
    display:inline-block;
}  
.skip-ads{
    position:absolute;
    left:250px;top:50px;
    display:none;
    z-index: 102;
    cursor:pointer;
    width: 150px;
}
</style>
 
<div class="wrap-video">
    <div class="skip-ads btn btn-sm btn-dark">Skip in 3 seconds</div>
    <video class="my-video"
        data-video-ads="video/small.mp4"
        data-video="video/mov_bbb.mp4"
        width="400" controls autoplay>
      Your browser does not support HTML5 video.
    </video>
</div>
 
 
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 
    var adsVideo = null; // สร้างตัวแปร เก็บสถานะ โฆษณา
    $(".my-video")[0].src = $(".my-video").data("video-ads"); // แสดงวิดีโอโฆษณา
    $(".my-video").on("play",function(e){
        console.log("play");
        if(!adsVideo){ // เมื่อกำลังจะแสดงโฆษณาครั้งแรก
            $(".skip-ads").show(); // :แสดงปุ่ม skip
        }
    });
    $(".my-video").on("ended",function(e){
        console.log("end");
        if(!adsVideo){ // เมื่อแสดงโฆษณาครั้งแรก จบแล้ว
            $(this)[0].src = $(this).data("video");  // แสดง video จาก url
            adsVideo = true; // มีการแสดงโฆษณาแล้ว
        }
    });
    // เมื่อคลิกปุ่ม skip ข้ามวิดีโอ
    $(".skip-ads").click(function(){       
        $(".my-video")[0].src = $(".my-video").data("video");  // แสดงวิดีโอปกติ
        adsVideo = true; // มีการแสดงโฆษณาแล้ว
        $(".skip-ads").hide(); // :ซ่อนปุ่ม skip
    });
    $(".my-video").on("timeupdate",function(e){
        if($(this)[0].currentTime>=3){
            console.log($(this)[0].currentTime); // ทดสอบแสดงเวลา
            $(".skip-ads").hide(); // :ซ่อนปุ่ม skip
        }else{
            var textSkip = "Skip in "+(3-$(this)[0].currentTime.toPrecision(1)).toPrecision(1)+ " seconds";
            $(".skip-ads").text(textSkip);         
        }
    });    
     
});
</script>
 
</body>
</html>


 

หรือใช้งาน Videojs นำมาปรับใช้ก็ได้

ตัวอย่าง DEMO

ninenik 29-03-2020
 ความคิดเห็นที่ 2
ขอบคุณมากครับ


mario 30-03-2020 17:24
 ความคิดเห็นที่ 3
ถ้ากรณีต้องการบังคับให้ดูโฆษณาจนจบก่อน โดยที่ไม่ให้กดเลื่อนคลิปวิดีโอได้ มีวิธีปรับแก้โค้ดยังไงบ้างครับ


mario 22-06-2020 18:15
 ความคิดเห็นที่ 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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" >
</head>
<body>
  
<style type="text/css">
.my-video{
    position:absolute;
    left:0;top:0;
    z-index:100;   
}
.wrap-video{
    position:relative;
    display:inline-block;
} 
.wrap-control{
    position: absolute;
/*     background-color: #000; */
    width: 400px;
    height:300px;
    display:block;
    z-index:1000;
}
  .custom-play{
    display: flex;
    /* background-color: #7d1d1d; */
    justify-content:center;
    align-items:center;
    width: 400px;
    height:300px;   
  }
  .btn-play{
    padding:30px;
    background-color: #fff;
    border-radius:50%;
    cursor:pointer;
    opacity:0.7;
  }
</style>
  
<div class="wrap-video">
  <div class="wrap-control">
    <div class="custom-play">
      <div class="btn-play">Play</div>
    </div>
  </div>
    <video class="my-video"
        data-video-ads="small.mp4"
        data-video="mov_bbb.mp4"
        width="400" height="300" >
      Your browser does not support HTML5 video.
    </video>
</div>
  
  
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  
    const video = $(".my-video");
    const videoEle = video[0];
    var adsVideo = null; // สร้างตัวแปร เก็บสถานะ โฆษณา
    videoEle.src = video.data("video"); // กำหนด video เริ่มต้น
    video.on("ended",function(e){
        console.log("end");
        if(!adsVideo){ // เมื่อแสดงโฆษณาครั้งแรก จบแล้ว
            videoEle.src = $(this).data("video");  // แสดง video จาก url
            videoEle.play();
            adsVideo = true; // มีการแสดงโฆษณาแล้ว
            video.attr("controls",true);
        }
    });
 
    // เมื่อคลิกปุ่ม play
    $(".btn-play").one("click",function(e){
      $(".wrap-control").remove(); // ลบปุ่มควบคุมอก
      videoEle.src = $(".my-video").data("video-ads");  // แสดงวิดีโอโฆษณา
      videoEle.play();
    });   
   
      
});
</script>
  
</body>
</html>

ตัวอย่าง DEMO

ninenik 23-06-2020
 ความคิดเห็นที่ 5
ขอบคุณมากครับ


mario 23-06-2020 19:37
 ความคิดเห็นที่ 6
จากตัวอย่างที่ทาง admin สอนไว้ ผมลองใช้งานบนมือถือ แต่แสดงผลการทำงานไม่เหมือนในคอมพิวเตอร์ ปรับแก้ยังไง รบกวนแนะนำด้วยครับ


mario 25-06-2020 12:08
 ความคิดเห็นที่ 7

แอดมินครับ 

ถ้าหากอยากให้คลิปโฆษณา อยู่เล่นก่อน วีดีโอหลัก  อยากให้มี เล่นเอง 3-4 คลิป แล้วค่อยไปที่วีดีโอหลักต้องแก้ยังไงครับ 

ผมพยายามแล้ว มันไม่ได้เลยครับ  ขอบพระคุณล่วงหน้านะครับ



Amaterasu Omikami 10-11-2020 17:50
1







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