ขอคำเเนะนำเกี่ยวกับการใช้งาน jwplayer หน่อยครับ

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

ขอคำเเนะนำเกี่ยวกับการใช้งาน jwplayer หน่อยครับ

ดูจากลิ้งนี่ครับ เอาโค้ดมารันเเล้วไม่ได้

https://www.ninenik.com/เริ่มต้นการใช้งาน_jwplayer_jquery_plugin_แสดง_video_บนเว็บไซต์-361.html

Golff Sinlapachai 07-04-2020 19:01:23

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

น่าจะเก่ามากแล้ว ดู ตัวอื่นๆ เป็นแนวทาง best html5 video

ninenik 07-04-2020

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

พอจะ demo สักได้มั้ยครับผมไม่รู้ว่ามันเอามาใช้ยังไง ขอบคุณครับ

Golff Sinlapachai 09-04-2020 15:05

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

ผมโหลด https://github.com/sampotts/plyr มาไว้ในโฟเเดอร์เเล้วเเล้วเอาโค้ดมารัน ตัวทำไมไม่เหมือนกันครับ
โค้ด https://codepen.io/pen?template=bKeqpr
ขั้นตอนเอามาใช้งานต้องทำยังไงครับ

https://www.img.in.th/image/TGOL0s


<div class="container">
	<video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg">
		 <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576">
			<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
			<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">

			<!-- Caption files -->
			<track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
					default>
			<track kind="captions" label="Français" srclang="fr" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">
			<!-- Fallback for browsers that don't support the <video> element -->
			<a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a>
	</video>
</div>
<!-- Plyr resources and browser polyfills are specified in the pen settings -->
<script type="text/javascript">
	// Change the second argument to your options:
// https://github.com/sampotts/plyr/#options
const player = new Plyr('video', {captions: {active: true}});

// Expose player so it can be used from the console
window.player = player;

</script>

Golff Sinlapachai 11-04-2020 14:10

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

น่าจะต้องโหลดให้ css และ js ให้ครบตามตัวอย่างเขา ดู โค้ดด้าล่างเป็นแนวทาง

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
   <style teype="text/css">
    .container {
        margin: 50px auto;
        max-width: 500px;
    }     
  </style>
  <link href="https://unpkg.com/plyr@3/dist/plyr.css" rel="stylesheet">
  <script src="https://unpkg.com/plyr@3" type="text/javascript"></script>
  <script type="text/javascript" 
          src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values,URL">
  </script>

</head>
<body>

  <div class="container">
	<video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg">
		 <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576">
			<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
			<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">

			<!-- Caption files -->
			<track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
					default>
			<track kind="captions" label="Français" srclang="fr" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">
			<!-- Fallback for browsers that don't support the <video> element -->
			<a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a>
	</video>
</div>
  
  
<!-- Plyr resources and browser polyfills are specified in the pen settings -->
  
  <script type="text/javascript">
  // Change the second argument to your options:
  // https://github.com/sampotts/plyr/#options
  const player = new Plyr('video', {captions: {active: true}});

  // Expose player so it can be used from the console
  window.player = player;    
  </script>
  
</body>
</html>

>>> อัพเดท >>> 12-04-2020
------------------------------------------
ใน codepen settings จะมีบอกว่า ใช้ css หรือ js เพิ่มเติมจาก ภายนอกที่ใดบ้าง

ตัวอย่าง DEMO

ninenik 11-04-2020

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

โค้ดตรงนี้ไปเอามาจากไหนครับ

<link href="https://unpkg.com/plyr@3/dist/plyr.css" rel="stylesheet">
  <script src="https://unpkg.com/plyr@3" type="text/javascript"></script>
  <script type="text/javascript"
          src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values,URL">
  </script>

Golff Sinlapachai 12-04-2020 14:49

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

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

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