มีวิธีทำอย่างไรครับ กรณีมีไฟล์วิดีโออยู่บน google drive จะนำไฟล์นั้นมาเล่นบนเว็บไซต์โดยให้มีโฆษณาเล่นก่อน

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา มีวิธีทำอย่างไรครับ กรณีมีไฟล์วิดีโออยู่บน google drive จะนำไฟล์นั้นมาเล่นบนเว็บไซต์โดยให้มีโฆษณาเล่นก่อน

ผมได้แนบโค้ดวิดีโอ เป็นไฟล์ที่เก็บไว้บน google drive มาให้ด้วยครับ

<iframe src="https://drive.google.com/file/d/1--DQIYgW2nUGmeOlVOgw0dRAemNEvRnP/preview" width="640" height="480"></iframe>

Mario 15-07-2020 19:33:08

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

ประยุกต์จากที่เคยถามเล็กน้อย

http://niik.in/que_3033_6769

วาง iframe ของ video ใน google drive ไว้ถัดจาก video โฆษณา เมื่อเลนจบหรือข้าม

ก็แสดง video ใน iframe

<!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;
}
.gd-video{
	visibility:hidden;
}
</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"
        width="640" height="480" controls autoplay>
		Your browser does not support HTML5 video.
    </video>
    <iframe class="gd-video" 
    src="https://drive.google.com/file/d/1--DQIYgW2nUGmeOlVOgw0dRAemNEvRnP/preview" 
    width="640" height="480"></iframe>  
</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){ // เมื่อแสดงโฆษณาครั้งแรก จบแล้ว
            $(".my-video").fadeOut(); //
            $(".my-video").next("iframe").css("visibility","visible");
            $(this)[0].src = $(this).data("video");  // แสดง video จาก url 
            adsVideo = true; // มีการแสดงโฆษณาแล้ว
        }
    }); 
    // เมื่อคลิกปุ่ม skip ข้ามวิดีโอ
    $(".skip-ads").click(function(){        
        $(".my-video")[0].pause();
        $(".my-video").hide();
        $(".my-video").next("iframe").css("visibility","visible");
        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>

ตัวอย่าง DEMO

ninenik 15-07-2020

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

ขอบคุณมากเลยครับ ถ้าสะดวกอยากให้ @line ผม @mario2415 ครับ จะได้คุยงานกันครับ

mario 16-07-2020 13:12

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

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

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