มี 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 (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
มี video player มากมายให้เลือกนำไปใช้กับกับเว็บไซต์ มีทั้งฟรีและไม่ฟรี วันเราจะแนะนำ [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html5/2483-html5-video.html]video player[/url] ที่ฟรีอย่างหนึ่งที่เรียกว่า Plyr.io
[b]Plyr.io[/b] เป็น [url=https://www.mindphp.com/developer/36-jquery/287-jquery-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]Jquery[/url] plugin ที่น่าสนใจอย่างหนึ่ง ซึ่งทำหน้าที่จัดการวีดิโอหรือเป็นเครื่องเล่นวีดิโอ(video player)บนเว็บเบราเซอร์ได้
เราสามารถเล่นวีดิโอจากไฟล์ หรือ ใช้รูปแบบฝังโค้ดจาก youtube ก็ได้ (YouTube embed) หน้าตาจะมีความสวยงาม สบายตามากขึ้น
วิธีการใช้งาน เราสามารถเพิ่ม css ตามโค้ดด้านล่างนี้
[code]<link rel="stylesheet" href="https://cdn.plyr.io/3.4.7/plyr.css">[/code]
ในส่วนของสคริปต์ script source
[code]<script src="https://cdn.plyr.io/3.4.7/plyr.js"></script>[/code]
...หรือ...
[code]<script src="https://cdn.plyr.io/3.4.7/plyr.polyfilled.js"></script>[/code]
โค้ด html ในการเล่นวีดิโอ กรณีให้เล่นจากไฟล์ เราเพียงแค่ใส่ตำแหน่งไฟล์ของวีดิโอให้ถูกต้อง และสามารถเพิ่มรูปภาพพรีวิววีดิโอได้ตามความต้องการ
[code]<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>[/code]
นอกจากนั้น เราสามารถใส่วีดีโอในรูปแบบฝังได้ เพียงแค่ใส่โค้ดวีดิโอสำหรับฝัง
[code]<div class="plyr__video-embed" id="player">
<iframe src="https://www.youtube.com/embed/..(โค้ดสำหรับฝัง).." allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>[/code]
ผลัพธ์จะเป็นดังนี้
[attachment=0]plyr.io.png[/attachment]
เราสามารถเขียน [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-javascript/2724-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5%E0%B9%88-1-javascript-introduction.html]javascript[/url] เพิ่มเติมเพื่อเพิ่มลูกเล่นในมันได้
เช่นหากต้องการให้มันเล่นหรือทำงาน fullscreen โดยใช้ javascritp ก็สามารถทำได้ ดังโค้ดตัวอย่าง
[code]const player = new Plyr('#player', {
//ตัวอย่าง Methods
player.play(); // Start playback
player.fullscreen.enter(); // Enter fullscreen
});[/code]
นี้เป็นเนื้อหาส่วนหนึ่ง ซึ่งสามารถนำไปปรับแต่งเพิ่มเติมตามความต้องการให้เข้ากับโปรเจ็คของเราได้
หวังว่าบทความนี้จะเป็นประโยชน์สำหรับผู้สนใจไม่มากก็น้อยน่ะครับ
[b]ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery & Javascript[/b]
-[url=https://www.mindphp.com/forums/viewforum.php?f=78]สอนการใช้งาน jQuery & Ajax[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=18]ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax[/url]
-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-jquery.html]บทเรียน jQuery[/url]