首頁  >  文章  >  CMS教程  >  織夢dedecms怎麼整合加入ckplayer播放器支援flv,mp4等播放功能

織夢dedecms怎麼整合加入ckplayer播放器支援flv,mp4等播放功能

藏色散人
藏色散人原創
2020-01-13 09:34:243407瀏覽

織夢dedecms怎麼整合加入ckplayer播放器支援flv,mp4等播放功能

織夢dedecms怎麼整合加入ckplayer播放器支援flv,mp4等播放功能?

現在很多DEDE開發的影片網站使用的播放器是ckplayer,這個播放器功能非常強大,支援flv,mp4,swf等各種類型的檔案播放器。這篇文章主要介紹了織夢dedecms整合添加ckplayer播放器支援flv,mp4等播放功能,有興趣的小夥伴們可以參考一下

  

推薦學習:織夢cms

現在很多DEDE開發的影片網站使用的播放器是ckplayer,這個播放器功能非常強大,支援flv,mp4,swf等各種類型的檔案播放器。當我們的影片不想上傳到youku等影片網站時,可以使用這個播放器,這樣可以自己控制自己的影片長度,清晰度,還可以為自己的影片添加上播放前的廣告,我們都知道影片網站都都是以廣告形式來生存的,所以,我們在上傳了我們的影片後,就等於給這些影片網站提供了廣告載體。如果您想自己在影片上面做廣告,或是自己想擁有自己的個性的播放器,您可能會使用ckplayer。

但是,ckplayer整合到DEDE稍微有點難度,這裡就詳細講一下如何正確整合。

織夢整合ckplaery播放器步驟:

第一步:下載播放器程式碼,官方網站是http://www.ckplayer.com

##把下載下來的程式碼解壓縮後,把資料夾ckplayer放到網站根目錄(當然,您可以依照自己的需求放到對應原目錄裡面,我這裡以放到網站根目錄為例子)。

如果你的播放需要 白天/黑夜 功能也一起把js資料夾放到網站根目錄裡面。我這裡不需要這個功能,所以,只上傳ckplayer到網站根目錄。

第二步:在織夢系統加入字段ckurl,用來上傳mp4檔案用的字段,如下圖所示:

織夢dedecms怎麼整合加入ckplayer播放器支援flv,mp4等播放功能

資料類型選擇-多媒體檔案

第三步:修改播放器程式碼路徑與新增標籤:

播放器程式碼是:

 

<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
  var flashvars={
    f:&#39;http://www.bnxb.com/upload/180105/12389514.mp4&#39;,
    c:0,
    b:1,
    i:&#39;http://www.ckplayer.com/static/images/cqdw.jpg&#39;
    };
  var params={bgcolor:&#39;#FFF&#39;,allowFullScreen:true,allowScriptAccess:&#39;always&#39;,wmode:&#39;transparent&#39;};
  CKobject.embedSWF(&#39;ckplayer/ckplayer.swf&#39;,&#39;a1&#39;,&#39;ckplayer_a1&#39;,&#39;600&#39;,&#39;400&#39;,flashvars,params);
  /*
  CKobject.embedSWF(播放器路径,容器id,播放器id/name,播放器宽,播放器高,flashvars的值,其它定义也可省略);
  下面三行是调用html5播放器用到的
  */
  var video=[&#39;http://www.bnxb.com/upload/180105/12389514.mp4&#39;];
  var support=[&#39;iPad&#39;,&#39;iPhone&#39;,&#39;ios&#39;,&#39;android+false&#39;,&#39;msie10+false&#39;];
  CKobject.embedHTML5(&#39;a1&#39;,&#39;ckplayer_a1&#39;,600,400,video,flashvars,support);
  
  
  function closelights(){//关灯
    alert(&#39; 本演示不支持开关灯&#39;);
  }
  function openlights(){//开灯
    alert(&#39; 本演示不支持开关灯&#39;);
  }
  </script>

這段程式碼是ckplayer提供的示範的例子裡面的程式碼,您可以根據ckplayer播放器官方提供的例子,自己產生不同的播放器風格,如果您想做成一個比較個性的播放器,請到官方網站去配置播放器吧,這裡不再一一講解,配置很簡單。

這裡要改的檔案是js檔案和一個播放器檔案的路徑,也就是 ckplayer.js和ckplayer.swf的路徑為根目錄。

寫上上面我們添加的字段,即寫上織夢標籤調用,分別是:

f:&#39;{dede:field.vurl/}&#39;,
 
var video=[&#39;{dede:field.vurl/}&#39;];

改好的程式碼是:

<div id="a1"></div>
 
<script type="text/javascript" src="/ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
  var flashvars={
    f:&#39;{dede:field.vurl/}&#39;,
    c:0,
    b:1,
    i:&#39;http://www.ckplayer.com/static/images/cqdw.jpg&#39;
    };
  var params={bgcolor:&#39;#FFF&#39;,allowFullScreen:true,allowScriptAccess:&#39;always&#39;,wmode:&#39;transparent&#39;};
  CKobject.embedSWF(&#39;/ckplayer/ckplayer.swf&#39;,&#39;a1&#39;,&#39;ckplayer_a1&#39;,&#39;600&#39;,&#39;400&#39;,flashvars,params);
  /*
  CKobject.embedSWF(播放器路径,容器id,播放器id/name,播放器宽,播放器高,flashvars的值,其它定义也可省略);
  下面三行是调用html5播放器用到的
  */
  var video=[&#39;{dede:field.vurl/}&#39;];
  var support=[&#39;iPad&#39;,&#39;iPhone&#39;,&#39;ios&#39;,&#39;android+false&#39;,&#39;msie10+false&#39;];
  CKobject.embedHTML5(&#39;a1&#39;,&#39;ckplayer_a1&#39;,600,400,video,flashvars,support);
  
  
  function closelights(){//关灯
    alert(&#39; 本演示不支持开关灯&#39;);
  }
  function openlights(){//开灯
    alert(&#39; 本演示不支持开关灯&#39;);
  }
  </script>

上面標紅的就是改後的內容,你可以比較一下就可以看出我修改過的程式碼了,如果您也是把ckplayer放在根目錄裡面,您加入的欄位也是vurl的話,你可以直接使用上面我改好的程式碼。

第四步:把上面的程式碼加到模檔裡面,我把上面的程式碼加入了article_article.htm裡面,要在哪個欄位裡面使用影片播放就在哪個欄位裡面對應的內容頁模板加入上面的程式碼。

第五步:上傳影片或新增mp4url位址進行測試

1)加入mp4影片:

影片檔是:http://www.bnxb.com /upload/180105/12389514.mp4->video/mp4

如下圖所示:

織夢dedecms怎麼整合加入ckplayer播放器支援flv,mp4等播放功能

效果如下:

織夢dedecms怎麼整合加入ckplayer播放器支援flv,mp4等播放功能

#已經加入成功了,這是一個外鏈,但是,我們通常都是上傳mp4影片檔。

2) 上傳一個mp4影片:

上傳前需要對織夢作如下更改,在織夢後台> 系統>基本參數>附件設定>允許的多媒體文件類型,後面加上|mp4,如下圖所示:

織夢dedecms怎麼整合加入ckplayer播放器支援flv,mp4等播放功能

這樣我們上傳一個mp4文件,但是,我們上傳文件後結果找不到這個文件,如下圖所示:

織夢dedecms怎麼整合加入ckplayer播放器支援flv,mp4等播放功能

正常是我們上傳一個檔案要當在這個清單裡面,然後,我們點擊選擇後,就可以把上傳的檔案加入的影片檔案框裡面,但是,現在連找都找不到,更不用說添加影片到文字框中了。

出现这个问题的原因是织梦在处理上传的文件时,并没有mp4格式的,所以,程序在把今天上传的文件显示出来的时候自然就会把 mp4格式的文件给略掉了,也就看不到了。

解决方法:

找到文件include/dialog/select_media.php

把代码:else if(preg_match("#.(swf|fly|fla|flv)#i", $file))

改为

else if(preg_match("#.(swf|fly|fla|flv|mp4)#i", $file))

即 在上面的代码上面添加了 |mp4

添加完后我们再看看效果,如下图所法:

織夢dedecms怎麼整合加入ckplayer播放器支援flv,mp4等播放功能

这就是我上传的视频文件,点击这个文件后就添加到 视频 文本框里面了,这样就搞定了。

若你的不能播放或出现问题可能是以下几种情况:

1. 你的服务器需要配置mime类型,不会请找空间商给处理。

2. 如果你路径有问题就无法播放,所以,如果你的ckplayer文件夹在网站根目录的话,直接使用上面的代码最好,已经测试过了。

以上是織夢dedecms怎麼整合加入ckplayer播放器支援flv,mp4等播放功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn