จัดการวีดีโอโดยใช้ ปลักอิน Plyr.io

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: จัดการวีดีโอโดยใช้ ปลักอิน Plyr.io

จัดการวีดีโอโดยใช้ ปลักอิน Plyr.io

โดย abdkode » 11/01/2019 11:15 am

มี video player มากมายให้เลือกนำไปใช้กับกับเว็บไซต์ มีทั้งฟรีและไม่ฟรี วันเราจะแนะนำ video player ที่ฟรีอย่างหนึ่งที่เรียกว่า Plyr.io
Plyr.io เป็น Jquery plugin ที่น่าสนใจอย่างหนึ่ง ซึ่งทำหน้าที่จัดการวีดิโอหรือเป็นเครื่องเล่นวีดิโอ(video player)บนเว็บเบราเซอร์ได้
เราสามารถเล่นวีดิโอจากไฟล์ หรือ ใช้รูปแบบฝังโค้ดจาก youtube ก็ได้ (YouTube embed) หน้าตาจะมีความสวยงาม สบายตามากขึ้น

วิธีการใช้งาน เราสามารถเพิ่ม css ตามโค้ดด้านล่างนี้

โค้ด: เลือกทั้งหมด

<link rel="stylesheet" href="https://cdn.plyr.io/3.4.7/plyr.css">
ในส่วนของสคริปต์ script source

โค้ด: เลือกทั้งหมด

<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>
โค้ด html ในการเล่นวีดิโอ กรณีให้เล่นจากไฟล์ เราเพียงแค่ใส่ตำแหน่งไฟล์ของวีดิโอให้ถูกต้อง และสามารถเพิ่มรูปภาพพรีวิววีดิโอได้ตามความต้องการ

โค้ด: เลือกทั้งหมด

<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>
ผลัพธ์จะเป็นดังนี้
plyr.io.png
plyr.io.png (149.21 KiB) Viewed 1499 times
เราสามารถเขียน javascript เพิ่มเติมเพื่อเพิ่มลูกเล่นในมันได้
เช่นหากต้องการให้มันเล่นหรือทำงาน fullscreen โดยใช้ javascritp ก็สามารถทำได้ ดังโค้ดตัวอย่าง

โค้ด: เลือกทั้งหมด

const player = new Plyr('#player', {
   //ตัวอย่าง Methods 
   player.play(); // Start playback
   player.fullscreen.enter(); // Enter fullscreen
});
นี้เป็นเนื้อหาส่วนหนึ่ง ซึ่งสามารถนำไปปรับแต่งเพิ่มเติมตามความต้องการให้เข้ากับโปรเจ็คของเราได้
หวังว่าบทความนี้จะเป็นประโยชน์สำหรับผู้สนใจไม่มากก็น้อยน่ะครับ

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery & Javascript
-สอนการใช้งาน jQuery & Ajax
-ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax
-บทเรียน jQuery

ข้างบน