เล่น audio เมื่อ play เสร็จแล้วหรือเล่นไปได้สัก 5 นาที จะขึ้นลิงค์ให้กดไปหน้าอื่น

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา เล่น audio เมื่อ play เสร็จแล้วหรือเล่นไปได้สัก 5 นาที จะขึ้นลิงค์ให้กดไปหน้าอื่น

เล่น audio เมื่อ play เสร็จแล้วหรือเล่นไปได้สัก 5 นาที จะขึ้นลิงค์ให้กดไปหน้าอื่น

หาวิธี เล่น audio หรือ วีดีโอ เมื่อ play เสร็จแล้วหรือเล่นไปได้สัก 5 วินาที ให้ขึ้นปุ่มเพื่อลิงค์ไปหน้าอื่น



Yuii Thiya 119.160.212.xxx 31-10-2016 13:12:24

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

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


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


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

 ความคิดเห็นที่ 1
ศึกษา videojs มีความสามารถมาก  สามารถปรับแต่งได้หลายจุด ต้องอ่านคู่มือการใช้ประกอบ

http://docs.videojs.com/docs/api/player.html

เว็บไซต์

http://videojs.com/

ใช้แบบ CDN

http://videojs.com/getting-started/#download-cdn

ตัวอย่างโค้ด

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="http://vjs.zencdn.net/5.11.9/video-js.css" rel="stylesheet">    
    <!-- If you'd like to support IE8 -->
    <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>    
	<script src="http://vjs.zencdn.net/5.11.9/video.js"></script>
</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="mov_bbb.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="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

  
        
</div>  
    

<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));		
			}
		}		
	});
	myPlayer.on('ended',function(){
		// ทำงานเมื่อเล่นจบ
		var whereYouAt = myPlayer.currentTime();
		console.log("Ended AT "+whereYouAt.toFixed(0));		
	});	
});
    
</script>      
</body>
</html>




ninenik 1.47.139.xxx 31-10-2016
 ความคิดเห็นที่ 2
 ขอบคุณค่ะ  แล้วถ้าไม่ต้องการแทนที่วิดีโอนั้นละค่ะ แบบจะให้มาโชว์ข้างๆวิดีโอต้องทำยังไงคะ



Yuii Thiya 119.160.212.xxx 01-11-2016 09:17
 ความคิดเห็นที่ 3
แทรกโค้ดไปนิดหน่อย ที่เหลือก็ปรับแต่งตามต้องการ

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


ตัวอย่าง




ตัวอย่าง DEMO

ninenik 180.183.44.xxx 01-11-2016
 ความคิดเห็นที่ 4
แล้วถ้าต้องเปลี่ยนเป็น mp3 ต้องทำยังไงบ้างคะ


Yuii Thiya 119.160.212.xxx 02-11-2016 09:01
 ความคิดเห็นที่ 5

เปลี่ยน video tag เป็น audio tag

 
  <video id="my-video" class="video-js" controls preload="auto"   
  poster="MY_VIDEO_POSTER.jpg" data-setup="{}">  
..........
.......
  </video>  
 
เป็น
 
  <audio id="my-video" class="video-js" controls preload="auto"   
  poster="MY_VIDEO_POSTER.jpg" data-setup="{}">  
..........
....... 
 </audio>
 
 

เปลี่ยน source ไฟล์เป็น ไฟล์เสียง และกำหนดไฟล์เสียงใน type  เช่น เปลี่ยนจาก

 
<source src="http://www.w3schools.com/TAGS/movie.mp4" type='video/mp4'>  
 
เป็น 
 
<source src="MY_AUDIO_FILE.mp3" type='audio/mp3'>  
 
ดู type ของ audio เพิ่มเติมได้ที่
 
 
หากต้องการแสดง audio ไฟล์แบบแถบเล็กๆ ไม่สูงเหมือน video สามารถกำหนดความสูง และกว้าง
เข้าไป เช่น height="30" width="300"
 
    <audio id="my-video" class="video-js" controls preload="auto"
           data-setup='{}' height="30" width="300">
    <source src="http://www.w3schools.com/tags/horse.ogg" type='audio/ogg'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </audio>
 
ต้องการซ่อนปุ่ม play ใหญ่ และให้แสดงปุ่ม play ในด้านล่าง video ให้กำหนด css เป็นดังนั้

.vjs-big-play-button {
  display: none !important;
} 
.vjs-control-bar {
	display: -webkit-box !important;
	display: -webkit-flex !important;
	display: -ms-flexbox !important;
	display: flex !important;
}
 
ส่วนโค้ดการเรียกใช้งาน ก็ใช้ สคริปปกติเหมือนเดิม
 

โค้ดตัวอย่าง

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


    <audio id="my-video" class="video-js" controls preload="auto"
           data-setup='{}' height="30" width="300">
    <source src="http://www.w3schools.com/tags/horse.ogg" type='audio/ogg'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </audio>
  <div class="hide_link">
  Show Link
  </div>

  
        
</div>  
    

<script src="http://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>
 

ตัวอย่าง

 
Show Link


 


ninenik 180.183.143.xxx 02-11-2016
 ความคิดเห็นที่ 6
ขอบคุณมากเลยได้ ได้ทำไปใช้จริงด้วยขอบคุณมากค่ะ


Yuii Thiya 119.160.212.xxx 09-11-2016 10:43
 ความคิดเห็นที่ 7
สวัสดีครับแอดมิน ถ้าแบบว่า อยากให้เปิดมาแล้วเล่นวีดีโออัตโนมัติ กับ เวลาวีดีโอจบแล้ว หรือใกล้จบ ให้มีปุ่ม 2 ปุ่มขึ้นมาซ้ายขวาจ้องยังไงครับ เช่นปุ่มซ้าย หมายถึงย้อนกลับไปหน้าที่เรามา ปุ่มขวาไปวีดีโอถัดไป ขอความอนุเคราะห์ ด้วยเถิดด


ฑีฆาวุฒิ ปิติวงศ์หิรัญกุล 124.120.204.xxx 15-08-2020 07:47
1






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ