สร้างเครื่องเล่นมีเดียบนเว็บไซต์ด้วย jMediaelement

:: สร้างเครื่องเล่นมีเดียบนเว็บไซต์ด้วย jMediaelement

โพสโดย : Administrator เมื่อ : 24 ธันวาคม 2554 11:03:16

การแสดงผลไฟล์มีเดียบนเว็บไซต์ในปัจจุบันมีเครื่องมือมากมายให้เราได้ใช้งานกัน ซึ่งแต่ละตัวก็รองรับการใช้งานที่แตกต่างกันออกไป ข้นอยู๋กับการใช้งานของเรา จนมีหลายท่านถามว่าอันไหนดีที่สุด สำหรับนักพัฒนาเว็บไซต์วันนี้ผมมีอีกหนึ่งตัวมาให้เลือกใช้งาน

jMediaelement เป็นชุดคำสั่งสำหรับแสดงเครื่องเล่นมีเดียที่ค่อนข้างครบครันไปด้วยฟังก์ชั่นที่เหมาะกับการใช้งาน ไม่ว่าจะเป็น รองรับการเล่นย้อนกลับ แสดงผลเต็มจอ การควบคุมด้วยคีย์บอร์ด รองรับซับไตเติ้ล ปรับแต่งสกินได้ และอื่นๆ โดยเจ้าตัวนี้จะทำงานด้วยคำสั่ง javascript บน jQuery ที่โด่งดัง

คุณสมบัติของเจ้า jMediaelement

รองรับมัลติมีเดียทั้งภาพและเสียง ไม่ว่าจะเป็น .ogg h.264 MP3 MP4 .flv และนามสกุลไฟล์อื่นๆผ่าน VLC-Plugin
สามารถเล่นได้บนบราวเซอร์เกือบทุกบราวเซอร์ Firefox 3.5+, Opera 10.5+, Chrome 3+ และบราวเซอร์ทุกชนิดที่รองรับ VLC-Plugin นั่นคือสามารถแสดงได้บน ios อย่าง ipad และ iphone
มีขนาดเล็ก 5Kb ในแบบเวอร์ชั่น mini และ 10Kb ในเวอร์ชั่น full
ง่ายต่อการใช้งาน เพียงแค่กำหนดการแสดงผลด้วย HTML5 ปกติและเรียกใช้ j-media element ผ่านทาง jQuery เท่านั้น
รองรับการควบคุมผ่านคำสั่ง API เพื่อควบคุมเครื่องเล่นได้
สามารถปรับแต่งรูปแบบหน้าตารวมไปถงคอนโทรลเลอร์ได้ เพื่อให้สามารถสร้างเครื่องเล่นในแบบที่ไม่ซ้ำใคร
รองรับการเพิ่มความสามารถด้วย Plugin

การใช้งาน

สำหรับการใช้งานเจ้า j-media element จะมี2 แบบครับ คือ แบบ mini และแบบ full โดยที่แบบ full จะสามารถควบคุมผ่านคำสั่ง API ได้ แต่ไฟล์ก็มีขนาดใหญ่เป็น 2 เท่าครับ สามารถดาวน์โหลดได้ที่ mm.embed.js และ mm.full.js

ตัวอย่าง

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jMediaElement Demo : SMART-PHP.COM</title>
<script type="text/javascript" src="http://github.com/aFarkas/jMediaelement/raw/master/packages/mm.embed.min.js"></script>
<script type="text/javascript">
$(function(){
	$('video').jmeEmbed();
});
</script>
</head>

<body>
<video poster="http://praegnanz.de/html5video/player/shot.png" controls="controls">
    <source src="http://praegnanz.de/html5video/player/video_SD.mp4" type="video/mp4" />
</source>
</body>
</html>

ถ้าหากสนใจก็ลองไปศึกษาและดาวน์โหลดมาเล่นกันได้ที่ https://github.com/aFarkas/jMediaelement/wiki/

เข้าชม : 103 ครั้ง

ป้ายกำกับ : jMediaelement, mediaplayer, iosplayer, vlcplayer, html5, jquery, flashplayer

ความคิดเห็นบทความ

» แสดงความคิดเห็น «

ทางเว็บไซต์ไม่มีส่วนสนับสนุน และไม่ขอรับผิดชอบต่อข้อมูลที่เกิดจากการโพสของสมาชิกทั้งหมด เช่น ข่าวสาร บทความ ความคิดเห็น เป็นต้น หากพบข้อความที่ผิดกฏระเบียบทางเว็บไซต์ หรือข้อความที่ไม่เหมาะสม กรุณาแจ้งผู้ดูแลเว็บไซต์

แสดงความคิดเห็น

สำหรับสมาชิกเท่านั้น ! กรุณาเข้าสู่ระบบก่อน

| สมัครสมาชิก