discuz整合ckplayer增加dz遊客試看試播功能vip不限m3u8格式

ckplayerX新版本是有試看試播功能的,新版本不需要插件也可以播放m3u8格式.技術點主要是怎麼在文章中判斷使用者是vip會員組.

一,背景, 界面.編輯器設定,Discuz! 代碼,建立ck标簽,點選詳情,裡面的替換内容填以下代碼

<script type="text/javascript" src="ckplayer/ckplayer.js" charset="UTF-8"></script>
<div id="ckvideo" style="width: 760px;height: 500px;"></div>
<script type="text/javascript">
var videoObject={container:'#ckvideo',variable:'player',flashplayer:false,loaded: 'loadedHandler',video:{file:'{1}',type:'video/m3u8'}};
var player=new ckplayer(videoObject);
</script>
           

二,上傳到根目錄三個提示登入的小圖檔.

login_01.png

login_02.png

login_03.png

三,上傳ckplayer 插件

ckplayer目錄整體放在根目錄中.目錄中需要直接包含ckplayer.js檔案等其它一些檔案,目錄檔案結構為

四,修改模闆/template/使用中的模闆目錄/forum/viewthread_node_body.htm

打開上面的模闆.在最上面增加下面的幾行

注意,$_G[group][groupid]==21 的21表示分組編号為21的才行vip會員組,可以修改為其它會員組.

59行有個 t >= 4 表示試看4秒.可以修改

<!--{eval 
if($_G[group][groupid]==21)echo "<script>var loginOrNo = true; </script>";else echo "<script>var loginOrNo = false; </script>";
}-->  
<script type="text/javascript">

    var elementLogin = null; //是否存在提示層
    //var loginOrNo = false; //是否已登入，預設是沒有登入
    var loginShow = false; //提示層是否是顯示狀态
    function loadedHandler() { //播放器加載後會調用該函數
        player.addListener('time', timeHandler); //監聽播放時間,addListener是監聽函數，需要傳遞二個參數，'time'是監聽屬性，這裡是監聽時間，timeHandler是監聽接受的函數
        player.addListener('play', playHandler); //監聽播放狀态
        player.addListener('full', fullHandler); //監聽全屏切換
    }

    function playHandler() { //監聽播放狀态
        if(loginShow) {
            player.videoPause();
        }
    }

    function fullHandler(b) { //監聽全屏切換
        if(loginShow && elementLogin) {
            player.deleteElement(elementLogin);
            elementLogin = null;
            window.setTimeout('showLogin()', );
        }
    }

    function timeHandler(t) { //監聽播放時間
        if(t >=  && !loginOrNo) { //如果播放時間大于1，則又沒有登入，則彈出登入/注冊層
            player.videoPause();
            if(!loginShow && !elementLogin) {//elementLogin提示層
                showLogin();
            }
        }
    }

    function showLogin() { //顯示登入/注冊層
        loginShow = true;
        var meta = player.getMetaDate();
        var x = (meta['width'] - ) * ;
        var y = (meta['height'] - ) *  - ;
        var attribute = {
            list: [ //list=定義元素清單
                {
                    type: 'image', //定義元素類型：隻有二種類型，image=使用圖檔，text=文本
                    file: 'login_01.png', //圖檔位址
                    radius: , //圖檔圓角弧度
                    width: , //定義圖檔寬，必需要定義
                    height: , //定義圖檔高，必需要定義
                    alpha: , //圖檔透明度(0-1)
                    marginLeft: , //圖檔離左邊的距離
                    marginRight: , //圖檔離右邊的距離
                    marginTop: , //圖檔離上邊的距離
                    marginBottom:  //圖檔離下邊的距離
                },
                {
                    type: 'image', //定義元素類型：隻有二種類型，image=使用圖檔，text=文本
                    file: 'login_02.png', //圖檔位址
                    radius: , //圖檔圓角弧度
                    width: , //定義圖檔寬，必需要定義
                    height: , //定義圖檔高，必需要定義
                    alpha: , //圖檔透明度(0-1)
                    marginLeft: , //圖檔離左邊的距離
                    marginRight: , //圖檔離右邊的距離
                    marginTop: , //圖檔離上邊的距離
                    marginBottom: , //圖檔離下邊的距離
                    clickEvent: 'javaScript->userLogin()'
                },
                {
                    type: 'image', //定義元素類型：隻有二種類型，image=使用圖檔，text=文本
                    file: 'login_03.png', //圖檔位址
                    radius: , //圖檔圓角弧度
                    width: , //定義圖檔寬，必需要定義
                    height: , //定義圖檔高，必需要定義
                    alpha: , //圖檔透明度(0-1)
                    marginLeft: , //圖檔離左邊的距離
                    marginRight: , //圖檔離右邊的距離
                    marginTop: , //圖檔離上邊的距離
                    marginBottom: , //圖檔離下邊的距離
                    clickEvent: 'javaScript->userReg()'
                },
                {
                    type: 'image', //定義元素類型：隻有二種類型，image=使用圖檔，text=文本
                    file: 'login_04.png', //圖檔位址
                    radius: , //圖檔圓角弧度
                    width: , //定義圖檔寬，必需要定義
                    height: , //定義圖檔高，必需要定義
                    alpha: , //圖檔透明度(0-1)
                    marginLeft: , //圖檔離左邊的距離
                    marginRight: , //圖檔離右邊的距離
                    marginTop: , //圖檔離上邊的距離
                    marginBottom:  //圖檔離下邊的距離
                }
            ],
            x: x, //元件x軸坐标，注意，如果定義了position就沒有必要定義x,y的值了，支援數字和百分比
            y: y, //元件y軸坐标
            alpha: , //元件的透明度
            backgroundColor: '0x000000', //元件的背景色
            backAlpha: , //元件的背景透明度(0-1)
            backRadius:  //元件的背景圓角弧度
        }
        elementLogin = player.addElement(attribute);
    }

    function userLogin() {

    window.location.href="member.php?mod=register";
        //alert('點選了登入按鈕');
    }

    function userReg() {
    window.location.href="member.php?mod=register";
        //alert('點選了注冊按鈕');
    }

    function loginTrue() { //附加的處理使用者登入後執行的動作
        loginOrNo = true;
        if(loginShow && elementLogin) {
            player.deleteElement(elementLogin);
            elementLogin = null;
            loginShow = false;
            player.videoPlay();
        }
    }
        </script>