Plyr.io เป็น Jquery plugin ที่น่าสนใจอย่างหนึ่ง ซึ่งทำหน้าที่จัดการวีดิโอหรือเป็นเครื่องเล่นวีดิโอ(video player)บนเว็บเบราเซอร์ได้
เราสามารถเล่นวีดิโอจากไฟล์ หรือ ใช้รูปแบบฝังโค้ดจาก youtube ก็ได้ (YouTube embed) หน้าตาจะมีความสวยงาม สบายตามากขึ้น
วิธีการใช้งาน เราสามารถเพิ่ม css ตามโค้ดด้านล่างนี้
โค้ด: เลือกทั้งหมด
<link rel="stylesheet" href="https://cdn.plyr.io/3.4.7/plyr.css">
โค้ด: เลือกทั้งหมด
<script src="https://cdn.plyr.io/3.4.7/plyr.js"></script>
โค้ด: เลือกทั้งหมด
<script src="https://cdn.plyr.io/3.4.7/plyr.polyfilled.js"></script>
โค้ด: เลือกทั้งหมด
<video poster="poster.jpg" id="player" playsinline controls> <!-- ส่วนของรูปภาพพรีวิวของวีดิโอ -->
<!-- แหล่งของวีดิโอ -->
<source src="/path/to/video.mp4" type="video/mp4">
<!-- รองรับวีดิโอนามสกุลต่างๆ -->
<source src="/path/to/video.webm" type="video/webm">
<!-- Captions are optional ,สามารถเพิ่ม caption หรือ subtitle ได้-->
<track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default>
</video>
โค้ด: เลือกทั้งหมด
<div class="plyr__video-embed" id="player">
<iframe src="https://www.youtube.com/embed/..(โค้ดสำหรับฝัง).." allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>
เช่นหากต้องการให้มันเล่นหรือทำงาน fullscreen โดยใช้ javascritp ก็สามารถทำได้ ดังโค้ดตัวอย่าง
โค้ด: เลือกทั้งหมด
const player = new Plyr('#player', {
//ตัวอย่าง Methods
player.play(); // Start playback
player.fullscreen.enter(); // Enter fullscreen
});
หวังว่าบทความนี้จะเป็นประโยชน์สำหรับผู้สนใจไม่มากก็น้อยน่ะครับ
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery & Javascript
-สอนการใช้งาน jQuery & Ajax
-ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax
-บทเรียน jQuery