建站技能get(1)— Asp.net MVC快速集成ckplayer網頁視頻播放器

       故事背景大概是這樣的,我廠兩年前給山西晉城人民政府作了一個門戶網站(地址:http://jccq.cn/),運行了一年多固若金湯,duang的有一天市場部門過來講,新聞管理模塊帶視頻的內容播放不了了。javascript

       迅雷不及掩耳,我打開網頁F12一看,由於找不到視頻播放的一個swf文件,仔細一看這個文件居然引用的是其餘網站的一個文件,立馬打開相對網站的主域名,原來是人家網站改版了,這個文件幹掉了,致使播放不了。java

       作這塊功能的同事實在是太粗心,不過顧不上了,爲了儘快解決線上問題,開始嘗試修復,隨即找了優酷的插件拿來替換,發現不行,又找了其餘幾個相似的,仍然很差用。ide

       條條大路通羅馬,我就不信邪,而後就嘗試用個全新的視頻播放插件,就是今天要說的這個網頁視頻播放器插件:ckplayer(官方地址ckplayer函數

       大概看了下官網的demo,發現裏面介紹和實現方式偏複雜化了,通過我本身分析測試,總結出只需簡單三步就能夠配置一個網頁播放器,以下:測試

  1. 下載ckplayer插件
    http://vdisk.weibo.com/lc/2jUo9DSIlRXvDAOV8ZD 密碼:BS6T

  2. 添加js引用並配置js(核心代碼說明:initCKPlayer('視頻所要顯示的容器通常定義個div', '視頻地址', '插件swf文件');
    <script type="text/javascript" src="/Scripts/ckplayer/ckplayer.js"></script>
          <script type="text/javascript"> $(function () { //設置視頻容器大小
     winResize(); $(window).resize(function () { winResize(); }); //初始化視頻容器
                initCKPlayer('video-box', '$!{Model.Address}', '/scripts/ckplayer/ckplayer.swf'); }); //改變大小函數
     function winResize() { if ($(".section").width() == 1180) { $(".video-box").width(840); $(".video-box").height(473); } else { $(".video-box").width(601); $(".video-box").height(338); } } //初始化視頻播放器需配合ckplayer.js使用
    function initCKPlayer(boxId, videoSrc, playerSrc){ var flashvars={ f:videoSrc, c:0, loaded:'loadedHandler' }; var video=[videoSrc]; CKobject.embed(playerSrc,boxId,'video_v1','100%','100%',false,flashvars,video); } </script>
    
    //定義一個容易展現視頻
    <div class="video-box" id="video-box">
    </div>  
  3. 查看效果地址以下:http://jccq.cn/Engine/VideoView?id=f929f21a-1c17-42ff-8c7e-0b96278359c0
相關文章
相關標籤/搜索