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

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

Mario 29-03-2020 12:37:09

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

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

<!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>

HTML5 Video

Media events

HTML Audio/Video DOM Reference

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

ตัวอย่าง DEMO

ninenik 29-03-2020

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

ขอบคุณมากครับ

mario 30-03-2020 17:24

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

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

mario 22-06-2020 18:15

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

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

<!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

ขอบคุณมากครับ