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

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
โพสต์: 361
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย abdkode »

มี 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 1498 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

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 35