1. 程式人生 > >ckplayer-超酷網頁視訊播放器的使用

ckplayer-超酷網頁視訊播放器的使用

現在網上做視訊播放的很多,我就用過ckplayer這一款,雖然不知道別的播放器怎麼樣,但ckplayer還是比較不錯的。呼叫簡單、說明清晰、可擴充套件性很強,我老喜歡了。

當然引用人家的東西一定得去人家的官網上看看,因為官網上才正規的幫助手冊,案例展示,詳細的配置方法。看過了配置說明,一般大家都能整合到自己的網站上。

一開始我是覺得ckplayer能免費修改自己的logo,並且面板也很好看,看了下呼叫的方法發現很簡單,就決定用它了,現在是越用越覺得好使。先展示下我整合到我的網站上的效果:

【展示效果】

【調整效果】

【分享效果】

發了這多效果圖只是因為心裡高興,這一上午算是沒白費。

我從官網上下了現在最新的版本v6.5,我記得我是從四點幾開始用的。說實話,那時候確實還有很多地方沒有符合我的需求,現在版本的基本上我的需求都能滿足了。

為了防止以後在官網上找不到這個版本了,我放到雲盤上讓大家下載吧:

我相信看了裡面的demo和配置方法,你肯定會用了。我下面就介紹下我整合的時候用到的東西,先看我的程式碼:

html下的程式碼:

<div id="a1"></div>
<input id="hidInfoId" type="hidden" runat="server" value="szcbb" />

<script type="text/javascript" src="

/Video/Js/offlights.js"></script>
<script type="text/javascript" src="/Video/Ckplayer/ckplayer.js" charset="utf-8"></script>

<script type="text/javascript">
  var flashvars={
    f:'/Video/Url.aspx?id=[$pat]',//視訊地址
    a:document.getElementById("hidInfoId").value,//呼叫時的引數,只有當s>0的時候有效
    s:'1',

//呼叫方式,0=普通方法(f=視訊地址),1=網址形式,2=xml形式,3=swf形式(s>0時f=網址,配合a來完成對地址的組裝)
    c:'0',//是否讀取文字配置,0不是,1是
    my_url:window.location.href
   };
  var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always'};//這裡定義播放器的其它引數如背景色(跟flashvars中的b不同),是否支援全屏,是否支援互動
  var video=[''];
  CKobject.embed('/Video/Ckplayer/ckplayer.swf','a1','ckplayer_a1','642','615',false,flashvars,video,params);

  //開關燈
  var box = new LightBox();
  function closelights(){//關燈
    box.Show();
    CKobject._K_('a1').style.width='642px';
    CKobject._K_('a1').style.height='615px';
    CKobject.getObjectById('ckplayer_a1').width=642;
    CKobject.getObjectById('ckplayer_a1').height=615;
  }
  function openlights(){//開燈
    box.Close();
    CKobject._K_('a1').style.width='642px';
    CKobject._K_('a1').style.height='615px';
    CKobject.getObjectById('ckplayer_a1').width=642;
    CKobject.getObjectById('ckplayer_a1').height=615;
  }
</script>

注意:

1.紅色標註的地方是要換成你的專案裡的地址

2.藍色標註的地方是為了實現視訊地址隱藏不暴露才這麼弄的。其中從url.aspx頁面下動態獲取視訊地址,所以f,a,s聯合使用,f傳入的id引數使用的就是a的值。

4.綠色標註的地方是表示視訊的大小值

5.要實現開關燈功能要記得引用offlights.js檔案

url.aspx.cs下的程式碼:

protected void Page_Load(object sender, EventArgs e)
{

  if (!string.IsNullOrEmpty(Request.QueryString["id"]))
  {
    //判斷id的值獲取相應的地址

    Response.Write("你的視訊地址");
  }

注意url.aspx下的html程式碼要全部刪除,因為需要返回的是純地址,不能帶有其它程式碼。頁面上就剩下這些就中

 還有一個地方要注意的就是分享功能的實現,要修改share.xml裡的內容中的一些檔案的路徑。

其它就不寫了,去官網看吧。

相關推薦

ckplayer-網頁視訊播放的使用

現在網上做視訊播放的很多,我就用過ckplayer這一款,雖然不知道別的播放器怎麼樣,但ckplayer還是比較不錯的。呼叫簡單、說明清晰、可擴充套件性很強,我老喜歡了。 當然引用人家的東西一定得去人家的官網上看看,因為官網上才正規的幫助手冊,案例展示,詳細的配置方法。

一段蛋疼的程式碼:不清視訊播放

今天分享的這段程式碼,看起來沒啥實際用處,而且有些反潮流,因為現如今大家看視訊都追求更高解析度的超清畫質,而我們這個,是一個“超不清”的視訊播放器: 在控制檯裡播放視訊,用字元來表示畫面 不過我覺得它至少可以有三個作用:1.用來練習視訊和影象處理的程式設計開發;2.在沒有圖形介面的伺服器上播

網頁視訊播放程式碼Vcastr2

  TIP:播放的視訊地址必須是線上的 第一種:js <p style="text-align: center;"> <script type="text/javascript"> var swf_width=70

flowplayer網頁視訊播放事例詳解--包含各種引數說明(自譯) flowplayer網頁視訊播放事例詳解--包含各種引數說明(自譯)

flowplayer網頁視訊播放器事例詳解--包含各種引數說明(自譯) <html xmlns= "http://www.w3.org/1999/xhtm

網頁視訊播放程式碼大全 + 21個為您的網站和部落格提供的免費視訊播放

核心提示:很多設計師在都會在他們的網站使用視訊播放器。線上視訊播放器無需為簡單的使用者和Web開發人員提供過多的介紹,它簡單易用,為您建站時提供了靈活性和創造性,您可以新增無限數量的視訊,並根據你的想法安排它們的專輯標題、藝術家的名字或年份,這些都完全取決於你! 很多設計師在都會在他們的網站使用視訊播放器。

iOS 好用的本地視訊播放推薦!

本地播放器作為日常生活中不可或缺的一款工具類APP,Windows、Android等平臺不乏一些功能與體驗兼優的產品,但 iOS 平臺的使用者就沒有那麼幸運了,優秀的產品鳳毛麟角,且多數收費。 這源於 iOS 平臺的特殊性,完美支援各種視訊格式並不容易,幾乎沒有大廠在這方面投入,QQ影音

、騰訊視訊播放介面引數說明

優酷: 優酷的視訊播放器介面連線為:http://open.youku.com/tools/ 裡面已經有教詳細的說明了。 在這裡也做一些說明吧:匯入js檔案: 1 <script type="text/javascript" src="http://player.youku.com/jsa

基於OpenCV從零開始的視訊播放!聘美騰訊,優等軟體的神器!

實現了在MFC中顯示圖片,再要顯示一個視訊就是輕而易舉的事了,本篇介紹使用Opencv製作一個簡易的播放器,實現開啟檔案、暫停、繼續播放、再次播放和總當前幀數顯示功能。 首先還是先看一下介面效果:   嗯,是不是很有MFC的感覺,簡潔大方、樸素典雅又實用~~,如果用一個字

關於網頁線上視訊播放ckplay的部分總結!

最近在搞一個網頁部分的線上播放視訊空間  這裡暫時用的是ckplay,官網 ckplay.com 去官網下載完成必須的檔案,這個官網有介紹, 想要相應的功能,就下載相應的控制元件 首先要要在頁面匯入 ckplay.js <script type="text/java

網頁視訊播放方案-jaris flv player和ckplayer

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt

網頁視訊播放jPlayer使用介紹

最近專案中需要播放音訊. 視訊之前的已經做了, 要加上播放音訊的功能, 還要相容ie8, 還要禁止下載. 禁止下載這個就不管了, 因為不可能禁止. 要相容ie8, 就不能用<audio>了, ie系列ie9+才支援audio, 具體相容性請看: ht

關於仿狗音樂播放開源:尋求一套音樂播放素材,讓仿狗開源

替換 log 設有 ext 軟件 水平 iss 開源 可靠 轉載請說明原出處,謝謝~~ 距離公布測試版的仿酷狗音樂播放器。已經幾個月過去了。期間非常多網友加我QQ來問我開源的問題,我也早有開源意向。但我也一直沒有得到可靠的信息,保證開

前端追著設計砍系列的9個網頁特效

動畫 src pos fda 酷炫 職業病 bae 分享 ffd 俗話說啊,一入前端深似海啊,小編在入門前端之前,看見酷炫的網頁效果,都會佩服一下設計師。直到入了前端這個坑,現在一點開網頁或者是啥app,再看到這些腦袋裏想的都是這些布局,動畫特效是如何實現的,完全已經越過了

第二十四篇-用VideoView製作一個簡單的視訊播放

這是一個播放本地視訊的播放器,videoUrl1是手機裡放置視訊的路徑 效果圖: MainActivity.java package com.example.aimee.videotest; import android.Manifest; import android.co

Lily_music 網頁音樂播放 -可搜尋(附歌詞聯動播放效果解說)

部落格地址:https://ainyi.com/#/59 寫在前面 這是我今年(2018)年初的小專案,當時也是手賤,不想用別的播放器,想著做一個自己的網頁播放器,有個歌曲列表、可關鍵詞搜尋、歌詞滾動播放的效果,於是乎,就做了這一個 Lily_music 當時的感慨 有好幾天沒有發表

基於NDK、C++、FFmpeg的android視訊播放開發實戰-夏曹俊-專題視訊課程

基於NDK、C++、FFmpeg的android視訊播放器開發實戰—1796人已學習 課程介紹         課程包含了對流媒體(拉流)的播放,演示了播放rtmp的香港衛視,支援rtsp攝像頭和h

Linux常用視訊播放

  1、SMplayer是一款跨平臺的視訊播放工具,可以支援大部分的視訊和音訊檔案。它支援音訊軌道切換、允許調節亮度、對比度、色調、飽和度、伽瑪值,按照倍速、4倍速等多種速度回放、還可以進行音訊和字幕延遲調整以同步音訊和字幕。 2、VLC是一款自由、開源的跨平臺多媒體播放器及

QtPlayer——基於FFmpeg的Qt音視訊播放

QtPlayer——基於FFmpeg的Qt音視訊播放器 本文主要講解一個基於Qt GUI的,使用FFmpeg音視訊庫解碼的音視訊播放器,同時也是記錄一點學習心得,本人也是多媒體初學者,也歡迎大家交流,程式執行圖如下: QtPlayer基於FFmpeg的Q

android,Exoplayer實現視訊播放

bundle配置: implementation 'com.google.android.exoplayer:exoplayer-core:2.8.1'implementation 'com.google.android.exoplayer:exoplayer-dash:2.8.1'implementati

qt實現視訊播放

本篇部落格介紹如何利用qMediaPlayer和qvideowidget實現視訊檔案(avi,mp4....)的播放,並且提供進度顯示,還可以通過拖動進度條來變換播放位置。相關程式碼可以在我的資源裡下載"基於qt的視訊播放器" pro檔案: #------------------------