พี่ครับขอวิธีนี้หน่อยได้มั้ยครับ

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

พี่ครับขอวิธีนี้หน่อยได้มั้ยครับ

ต้นกระทู้ครับ http://niik.in/que_2190_5096 พี่ครับ กรณีหาเวลา ได้ ให้แสดงปุ่ม แล้วถ้าหยุดวีดีโอด้วยแล้วรอให้กดพอกดเสร็จวีดีโอก๋เล่นต่อ หรือหยุดไปค้างscreenนั้น ต้องทำยังไงหรอครับ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="//vjs.zencdn.net/5.11.9/video-js.css" rel="stylesheet">    
    <!-- If you'd like to support IE8 -->
    <script src="//vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>    
    <script src="//vjs.zencdn.net/5.11.9/video.js"></script>
    <style type="text/css">
    .hide_link{
        display: none;
    }
    </style>
</head>
<body>
 
<div style="margin:auto;width:80%;">

  <video id="my-video" class="video-js" controls preload="auto"
  poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
    <source src="//www.w3schools.com/TAGS/movie.mp4" type='video/mp4'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="//videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
  <div class="hide_link">
  Show Link
  </div>

  
        
</div>  
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>      
<script type="text/javascript">

var timeCheck=null;
var myPlayer = videojs('my-video'); // สร้างวิดีโอใน video id ว่า  id="my-video"
myPlayer.ready(function(){ // วิดีโอพร้อม
    myPlayer.on('timeupdate',function(){
        var whereYouAt = myPlayer.currentTime(); // หาเวลาที่เล่นปัจจุบัน
        if(timeCheck==null){
            if(whereYouAt.toFixed(0)==5){ // ถ้าเข้าวินาทีที่ 5
                timeCheck=whereYouAt.toFixed(0); // ยกเลิการเช็ค ให้ timeCheck ไม่เท่ากับ null
                // ทำงานที่ต้องการในวินาที่ที่ 5
                console.log(whereYouAt.toFixed(0)); 
                $(".hide_link").show();  // แสดงส่วนที่ซ่อนไว้
            }
        }       
    });
    myPlayer.on('ended',function(){
        // ทำงานเมื่อเล่นจบ
        var whereYouAt = myPlayer.currentTime();
        console.log("Ended AT "+whereYouAt.toFixed(0));     
    }); 
});
    
</script>      
</body>
</html>

ฑีฆาวุฒิ ปิติวงศ์หิรัญกุล 20-08-2020 22:37:09

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

ไม่เข้าใจที่ถามเท่าไหร่ ลองดูประมาณนี้ ปรับนิดหน่อย

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="//vjs.zencdn.net/5.11.9/video-js.css" rel="stylesheet">    
    <!-- If you'd like to support IE8 -->
    <script src="//vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>    
    <script src="//vjs.zencdn.net/5.11.9/video.js"></script>
    <style type="text/css">
    .hide_link{
        display: none;
    }
    </style>
</head>
<body>
  
<div style="margin:auto;width:80%;">
 
  <video id="my-video" class="video-js" controls preload="auto"
  poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
    <source src="//www.w3schools.com/TAGS/movie.mp4" type='video/mp4'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="//videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
  <div class="hide_link">
    <a href="#" onclick="v_play()">Show Link</a>
  </div>
 
   
         
</div>  
     
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>      
<script type="text/javascript">
 
var timeCheck=null;
var myPlayer = videojs('my-video'); // สร้างวิดีโอใน video id ว่า  id="my-video"
myPlayer.ready(function(){ // วิดีโอพร้อม
    myPlayer.on('timeupdate',function(){
        var whereYouAt = myPlayer.currentTime(); // หาเวลาที่เล่นปัจจุบัน
        if(timeCheck==null){
            if(whereYouAt.toFixed(0)==5){ // ถ้าเข้าวินาทีที่ 5
                timeCheck=whereYouAt.toFixed(0); // ยกเลิการเช็ค ให้ timeCheck ไม่เท่ากับ null
                // ทำงานที่ต้องการในวินาที่ที่ 5
                console.log(whereYouAt.toFixed(0)); 
                $(".hide_link").show();  // แสดงส่วนที่ซ่อนไว้
                myPlayer.pause();
            }
        }       
    });
    myPlayer.on('ended',function(){
        // ทำงานเมื่อเล่นจบ
        var whereYouAt = myPlayer.currentTime();
        console.log("Ended AT "+whereYouAt.toFixed(0));     
    }); 
});
function v_play(){
  myPlayer.play();
  $(".hide_link").hide();
}  
     
</script>      
</body>
</html>

ตัวอย่าง DEMO

Ninenik 21-08-2020

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

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

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