當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

介绍一款JavaScript播放器 - Dewplayer

發布時間：2024/4/13 javascript 30 豆豆

生活随笔收集整理的這篇文章主要介紹了介绍一款JavaScript播放器 - Dewplayer 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

????網頁播放器一般都是很簡陋的，比如51cto的等等。Dewplayer是一款很不錯的播放器，支持xml，方便后臺管理，這里我寫了一個后臺接入的類，自己調用就可以對播放器進行增刪改查的管理，導入導出。

????首先是播放器的樣式代碼：

????樣式1：

????

????樣式2：

????

????樣式3：

????

????樣式4：

????

????樣式5：

????

????樣式6：

????

????樣式7：

????

????下面是playlist.xml的格式：

<?xml?version="1.0"?encoding="UTF-8"?>???? <playlist?version="1"?xmlns="http://xspf.org/ns/0/">???? <trackList>???? <track>???? <location>music/mp3/1.mp3</location>???? <title>我是真的愛你?-?魏雪漫</title>???? </track>???? <track>???? <location>music/mp3/2.mp3</location>???? <title>往未來飛的客機?-?郭靜</title>???? </track>???? <track>???? <location>music/mp3/4.mp3</location>???? <title>好好(想把你寫成一首歌)?-?五月天</title>???? </track>???? <track>???? <location>music/mp3/6.mp3</location>???? <title>達爾文?-?蔡健雅Tanya</title>???? </track>???? <track>???? <location>music/mp3/3.mp3</location>???? <title>遇見?-?孫燕姿</title>???? </track>???? <track>???? <location>music/mp3/5.mp3</location>???? <title>我?-?蘇運瑩</title>???? </track>???? </trackList>???? </playlist>

????下面是后臺管理xml的類xmlhelper(.NET版)：

using?System; using?System.Collections.Generic; using?System.Linq; using?System.Web; using?System.Xml; using?System.Data; using?System.IO;namespace?Blog.XML {public?class?xmlhelper{//XML添加方法public?void?AddXML(string?text11,?string?text3,?string?fileName){string?id?=?text11;string?title?=?text3;string?location?=?@"music/"?+?fileName;//在第一個前面插入一條信息XmlDocument?doc?=?new?XmlDocument();doc.Load(HttpContext.Current.Server.MapPath("XML/xmltodataset.xml"));XmlNode?trackList?=?doc.SelectSingleNode("/playlist/trackList");XmlElement?track?=?doc.CreateElement("track");XmlElement?ele_id?=?doc.CreateElement("id");ele_id.InnerText?=?id;track.AppendChild(ele_id);XmlElement?ele_title?=?doc.CreateElement("title");ele_title.InnerText?=?title;track.AppendChild(ele_title);XmlElement?ele_location?=?doc.CreateElement("location");ele_location.InnerText?=?location;track.AppendChild(ele_location);trackList.InsertBefore(track,?trackList.FirstChild);doc.Save(HttpContext.Current.Server.MapPath("XML/xmltodataset.xml"));}//XMl刪除public?void?Delete(string?id){//通過id獲取信息XmlDocument?doc?=?new?XmlDocument();doc.Load(HttpContext.Current.Server.MapPath("XML/xmltodataset.xml"));XmlNode?trackList?=?doc.SelectSingleNode("/playlist/trackList");foreach?(XmlNode?track?in?trackList.ChildNodes){XmlNode?node_id?=?track.FirstChild;if?(node_id.InnerText?==?id){track.ParentNode.RemoveChild(track);}}doc.Save(HttpContext.Current.Server.MapPath("XML/xmltodataset.xml"));}//XML修改public?void?Update(string?id,?string?title){string?ID?=?id;//通過id獲取信息，然后更改信息XmlDocument?doc?=?new?XmlDocument();doc.Load(HttpContext.Current.Server.MapPath("XML/xmltodataset.xml"));XmlNode?trackList?=?doc.SelectSingleNode("/playlist/trackList");foreach?(XmlNode?track?in?trackList.ChildNodes){XmlNode?temp_node?=?track.FirstChild;if?(temp_node.InnerText?==?ID){track.ChildNodes[1].InnerText?=?title;doc.Save(HttpContext.Current.Server.MapPath("XML/xmltodataset.xml"));break;}}}//XML獲取id進行修改public?string?GetEntity(string?id){string?entity?=?"";XmlDocument?doc?=?new?XmlDocument();doc.Load(HttpContext.Current.Server.MapPath("XML/xmltodataset.xml"));XmlNode?trackList?=?doc.SelectSingleNode("/playlist/trackList");foreach?(XmlNode?track?in?trackList.ChildNodes){XmlNode?temp_node?=?track.FirstChild;if?(temp_node.InnerText?==?id){foreach?(XmlNode?item?in?track.ChildNodes){entity?+=?item.InnerText?+?"|";}entity?=?entity.Substring(0,?entity.Length?-?1);break;}}return?entity;}} }

????最終效果：

????樣式1：(麻蛋51CTO把路徑屏蔽了，只能直接拿才能用。)

????

? ? 樣式2：（這個就可以~唉~）
????

????代碼地址：https://github.com/geeklx/geeklx.github.com/tree/master/music

????

轉載于:https://blog.51cto.com/liangxiao/1868837

超強干貨來襲云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的介绍一款JavaScript播放器 - Dewplayer的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： spring aop 环绕通知aroun
下一篇： AngularJS笔记之创建服务方式比较