จัดการวีดีโอโดยใช้ ปลักอิน Plyr.io
โพสต์แล้ว: 11/01/2019 11:15 am
มี video player มากมายให้เลือกนำไปใช้กับกับเว็บไซต์ มีทั้งฟรีและไม่ฟรี วันเราจะแนะนำ video player ที่ฟรีอย่างหนึ่งที่เรียกว่า Plyr.io
Plyr.io เป็น Jquery plugin ที่น่าสนใจอย่างหนึ่ง ซึ่งทำหน้าที่จัดการวีดิโอหรือเป็นเครื่องเล่นวีดิโอ(video player)บนเว็บเบราเซอร์ได้
เราสามารถเล่นวีดิโอจากไฟล์ หรือ ใช้รูปแบบฝังโค้ดจาก youtube ก็ได้ (YouTube embed) หน้าตาจะมีความสวยงาม สบายตามากขึ้น
วิธีการใช้งาน เราสามารถเพิ่ม css ตามโค้ดด้านล่างนี้
ในส่วนของสคริปต์ script source
...หรือ...
โค้ด html ในการเล่นวีดิโอ กรณีให้เล่นจากไฟล์ เราเพียงแค่ใส่ตำแหน่งไฟล์ของวีดิโอให้ถูกต้อง และสามารถเพิ่มรูปภาพพรีวิววีดิโอได้ตามความต้องการ
นอกจากนั้น เราสามารถใส่วีดีโอในรูปแบบฝังได้ เพียงแค่ใส่โค้ดวีดิโอสำหรับฝัง
ผลัพธ์จะเป็นดังนี้
เราสามารถเขียน javascript เพิ่มเติมเพื่อเพิ่มลูกเล่นในมันได้
เช่นหากต้องการให้มันเล่นหรือทำงาน fullscreen โดยใช้ javascritp ก็สามารถทำได้ ดังโค้ดตัวอย่าง
นี้เป็นเนื้อหาส่วนหนึ่ง ซึ่งสามารถนำไปปรับแต่งเพิ่มเติมตามความต้องการให้เข้ากับโปรเจ็คของเราได้
หวังว่าบทความนี้จะเป็นประโยชน์สำหรับผู้สนใจไม่มากก็น้อยน่ะครับ
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery & Javascript
-สอนการใช้งาน jQuery & Ajax
-ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax
-บทเรียน jQuery
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