Ckplayer播放器播放視訊

阿新 • • 發佈：2019-01-21

CKplayer作為是非常好用的視訊播放外掛，但是目前我只能讓他播放已經有的網路視訊資源：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@taglib uri="/struts-tags"  prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>按列表顯示框進行順序自動播放-ckplayer應用示例</title>
    <meta name="keywords" content="flv播放器,f4v,mp4,hlv,rtmp播放器,網頁視訊播放器,ckplayer官網,視訊流,播放器" />
    <meta name="description" content="ckplayer(超酷網頁視訊播放器),支援http協議下的flv,f4v,mp4,支援rtmp視訊流和rtmp視訊回放，支援m3u8格式，是你做視訊直播，視訊點播的理想播放器 " />
    <meta name="author" content="ckplayer,超酷網頁視訊播放器" />
    <meta name="copyright" content="ckplayer,超酷網頁視訊播放器" />
    <script type="text/javascript" src="/static/js/jq1.9.1.js"></script>
    <script type="text/javascript" src="/static/js/help.js"></script>
    <link href="/static/css/example.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        /* CSS Document */
        body, h1, h2, h3, h4, h5, h6, hr, p,
        blockquote, /* structural elements 結構元素 */
        dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
        pre, /* text formatting elements 文字格式元素 */
        form, fieldset, legend, button, /* form elements 表單元素 */
        th, td, /* table elements 表格元素 */
        img {
            border: medium none;
            margin: 0;
            padding: 0;
        }

        li, ol {
            list-style: none;
            vertical-align: bottom;
        }

        em {
            font-style: normal;
        }

        img {
            vertical-align: middle;
        }

        a, input, textarea, select, option, button, .logo, #icon_num li, #icon_num_top li, .blk_29 .LeftBotton, .blk_29 .RightBotton, #cal #cm .cell, .work_lcontent img, .work_detail img, .brow img {
            cursor: pointer;
        }


        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        *html .clearfix {
            height: 1%;
        }

        * + html .clearfix {
            height: 1%;
        }

        .clearfix {
            display: inline-block;
        }
        /* Hide from IE Mac */
        .clearfix {
            display: block;
        }

        #playerlist a {
            text-decoration: none;
            outline: none;
            color: #FFF;
        }

        #a1 {
            width: 770px;
            height: 480px;
            float: left;
        }
        #a2, #a3 {
            width: 10px;
            height: 480px;
            float: left;
            color: #FFF;
            background-color: #666;
            line-height: 480px;
            cursor:pointer;
        }
        #playerlist {
            width: 190px;
            height: 480px;
            overflow: auto;
            float: left;
            background: #262626;
            font-size: 12px;
        }

        #playerlist li {
            list-style: none;
            height: 40px;
            line-height: 40px;
            padding-bottom: 2px;
            border-bottom: 1px solid #333;
            overflow: hidden;
            padding-left: 5px;
            cursor:pointer;
        }

        #playerlist li:last-child {
            border-bottom: none;
        }

        #playerlist li.crent {
            background: #1C1C1C;
        }

        #playerlist li.crent a {
            color: #FF7900;
        }

        #playerlist li a {
            display: block;
            color: #fff;
        }

        #playerlist li img {
            vertical-align: middle;
            height: 40px;
            margin: 0 20px 0 0;
        }
    </style>

</head>
<body>
<script type="text/javascript" src="/static/js/laycode/laycode2.js"></script>
<script src="ckplayer_6.6/ckplayer/ckplayer.js"></script>

<div class="clearfix">
    <div id="a1"></div>
    <div id="a2" onclick="Close();" title="收起列表">>></div>
    <div id="a3" onclick="Open();" style="display:none" title="展開列表"><<</div>
    <ul id="playerlist" style="text-align: left;width: 250px">
     <s:bean id="sort" name="com.sdibt.lcc.comparator.SortComparatorCourse"></s:bean>    
       <s:sort source="#allCourses" comparator="sort">              
       <s:iterator status="st">      
        <li id="vli_<s:property value='#st.index'/>"  onclick="playvideo(<s:property value='#st.index'/>)">
        <i class="glyphicon glyphicon-film" style="font-size:16px;color:orange;margin:10px"></i><font size="3" color="skyblue"> <s:property value="coureseName"/></font><i class="glyphicon glyphicon-bookmark" style="font-size:10px;color:orange;text-align: right;margin-left:30px"></i>
        
        </li>        
       </s:iterator>
       </s:sort>
        

    </ul>
</div>

<script type="text/javascript">
    function playerstop() {
        setTimeend();
    }
    function setTimeend() {//獲取下一部視訊的播放ID
        nowD++;
        if (nowD >= videoarr.length ) {
            nowD = 0;
        }
        playvideo(nowD);
    }
    function Close() {//關閉播放列表
        CKobject._K_('a2').style.display = 'none';
        CKobject._K_('playerlist').style.display = 'none';
        CKobject._K_('a3').style.display = 'block';
        CKobject._K_('a1').style.width = '970px';
        CKobject.getObjectById('ckplayer_a1').width = 970;
    }
    function Open() {//開啟播放列表
        CKobject._K_('a2').style.display = 'block';
        CKobject._K_('playerlist').style.display = 'block';
        CKobject._K_('a3').style.display = 'none';
        CKobject._K_('a1').style.width = '770px';
        CKobject.getObjectById('ckplayer_a1').width = 770;
    }
    var nowD = 0;//目前播放的視訊的編號(在數組裡的編號)
    var frontTime = false;//前置廣告倒計時是否在執行中
    var frontHtime = false;//後置廣告是否在進行中
    var videoarr = new Array();//新建一個數組來存flash端視訊地址，新增方法就像下面一樣
    <%
    String coursestring=(String)session.getAttribute("courselocation");    
    String[]  coursesarray=coursestring.split(";");
    System.out.print(coursesarray.length);
    for(int i=0;i<coursesarray.length;i++){   	
    	  %>videoarr.push(<%=coursesarray[i]%>);    	
   <% }%>

    var html5arr = new Array();//新建一個數組來儲存HTML5端用到的視訊地址，注意，因為本演示只有一種mp4檔案，所以html5下所有用到的視訊地址都是相同的，請見諒，另外，該陣列是一個二維陣列
    html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);
    html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);
    html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);
    html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);
    function playvideo(n) {
        nowD = n;
        var flashvars = {
            f: videoarr[n],
            c: 0,
            p: 1,
            e: 0,
            my_url: encodeURIComponent(window.location.href)
        };
        for (i = 0; i < videoarr.length; i++) {//這裡是用來改變右邊列表背景色
            if (i != nowD) {
                CKobject._K_('vli_' + i).style.backgroundColor = '#262626';
            }
            else {
                CKobject._K_('vli_' + i).style.backgroundColor = '#DAF2FF';
            }
        }

        var video = ['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];
        CKobject.embed('ckplayer_6.6/ckplayer/ckplayer.swf', 'a1', 'ckplayer_a1', '100%', '100%', false, flashvars, html5arr[n]);
    }
    playvideo(0);
</script>
</body>
</html>

也可以參考：線上除錯

還有基於ckplayer6的例項：點選開啟連結

原始碼：我等會看能不能上傳

寫完之後介面：

Ckplayer播放器播放視訊

CKplayer作為是非常好用的視訊播放外掛，但是目前我只能讓他播放已經有的網路視訊資源：<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%&

使用Flvplayer.swf播放器播放 .flv 格式的視訊

1.首先下載一個 Flvplayer.swf 播放器用於播放.flv格式的視訊。大家可以到我上傳的所有資源中尋找這個資源“FlvplayerSwf.zip”進行下載： https://download.csdn.net/download/qq_27607579/10764111 或

頁面中H5的使用標籤如音訊播放器和視訊播放器

1.音訊播放器使用的標籤為： <audio src="音訊的地址" controls="controls" preload="auto" autoplay="autoplay" loop="loop"> 屬性中src 為音訊的地址路徑，loop 是迴圈播放，如

iOS音視訊—FFmepg基礎知識：視訊播放流程&視訊播放器&播放器資訊檢視工具

FFmepg基礎知識視訊播放流程通常我們看到的視訊格式：mp4,mov,flv,wmv等等，稱之為封裝格式，通過解封裝之後，同時拿到音訊壓縮資料和視訊壓縮資料。分別對其進行音訊視訊解碼得到音訊取樣

jqm視訊播放器,html5視訊播放器,html5音樂播放器,html5播放器,video開發demo,html5視訊播放示例,html5手機視訊播放器

最近在論壇中看到了很多實用html5開發視訊播放,音樂播放的功能，大部分都在尋找答案。因此我就在這裡做一個demo，供大家相互學習。html5開發越來越流行了，而對於視訊這一塊也是必不可少的一部分。如何

播放器/短視訊 SDK 架構設計，點播服務 (Demo)

在Android中，我們可以直接使用MediaRecord來進行錄影，但是在很多適合MediaRecord並不能滿足我們的需求，比如我們需要對錄製的視訊加水印或者其他處理後，所有的平臺都按照同一的大小傳輸到伺服器等。用Android4.1增加的API MediaCode

微信H5同層播放器以及視訊自動播放

iOS之前已經解決了視訊播放預設全屏，且浮在頁面最頂端的問題 playsinline webkit-playsinline 這樣就可以在視訊之上進行一些操作，實現諸如彈幕、自定義播放控制元件等的效果。但是安卓端卻一直遲遲沒有一種比較完美的解決方案

如何用在自己的網頁中嵌入騰訊視訊網頁播放器播放一些檔案

在需要呼叫視訊的地方寫上如下程式碼。 <embed wmode="Opaque" flashvars="vid=9kFOkWIbQ4g&autoplay=1&list=2&am

Android 呼叫系統播放器播放視訊

1.呼叫播放器播放本地視訊錯誤演示： Intent intent = new Intent(Intent.ACTION_VIEW); intent.setDataAndType(Uri.parse(Environment.getExternalStorageDirect

解決Android7.0系統呼叫系統相機、系統播放器播放視訊、切圖相容問題，報異常android.os.FileUriExposedException

Android7.0以前獲取本地檔案uri用的Uri.fromFile(new File(filePath)); 後會得到一個file://，這種方式呢7.0及以後的系統版本就用不了，且會報一個異常：

Android筆記：視訊播放器播放本地視訊和網路視訊

這篇博文主要是記錄一下VideoView的使用，這個demo使用VideoView來播放本地視訊和網路視訊。先來看一下效果圖：接下來說程式碼： 1。佈局檔案： <?xml ve

安卓線上視訊播放器，視訊路徑為中文

最近在寫一個視訊APP，做播放器時發現伺服器中視訊路徑為中文還有很多“《”，“》”，“-”等等這樣的特殊符號，安卓播放器無法識別中文字元，所以就想著將路徑轉碼成UTF-8格式的。一般我們都會用到URL

利用pot播放器將視訊的音訊檔案抽離。

當我們需要將一個視訊的音訊抽離出來的時候，最先想到的就是Au，但這種比較“重”的方法就不適合我這種“懶人”，哈哈。好了，言歸正傳，現在和大家分享一個比較簡單的辦法。利用potPlayer這款軟體，軟體地址：連結：https://pan.baidu.co

流播放器音視訊同步的一點思考

音視訊同步是一個坑，一個繞不過去的坑，一個無可奈何的坑，一個主動跳進去的坑。時間戳是前提。沒有時間戳或者時間戳錯誤，一切播放端音視訊同步的方法基礎都是不牢靠的。生成的音視訊流要音視訊同步。可以轉成檔案要本地播放器來驗證一下 rtmp播放器特點： 1，不能堆積資料。

播放器播放視頻畫面均變暗（但網頁視頻正常）的解決方案

.com size png image tps -s div 解決 hid 參考資料：https://zhidao.baidu.com/question/42139543.html播放器播放視頻畫面均變暗（但網頁視頻正常）的解決方案

多個audio播放器播放,暫停,時間控制

<audio>標籤可以在HTML5瀏覽器中播放音訊檔案。 <audio>預設提供一個控制面板，但是有些時候我們只需要播放聲音，控制面板由我們自己來定義其顯示的狀態。這裡我使用jQuery來進行控制的程式碼如下： <?php if(!empty($

EasyPlayer-RTSP-Android安卓播放器播放RTSP延遲優化策略，極低延時！

EasyPlayer-RTSP-Android安卓RTSP播放器低延遲播放延時優化策略 EasyPlayer-RTSP-Android播放器是一款專門針對RTSP協議進行過優化的流媒體播放器，其中我們引以為傲的兩個技術優勢就是起播速度快和播放延遲低。最近我們遇到一些需求，其對延遲要求

Android 監聽系統音樂播放器播放的音樂的方法

　　最近在做專案的時候遇到一個小問題，就是需要自己寫一個View來控制系統音樂播放器的播放行為，並且要能得到正在播放的音樂的資訊，可能剛開始是想省點時間，所以就沒有直接去看原始碼，而是上網搜尋了一下，但令我十分驚訝的是網上竟然沒有這個，難道說沒有童鞋做過這個？嘿嘿，啥

02-python練習:列印歌詞(字串操作練習),播放器播放歌詞方式(到時間出現對應歌詞)

方法1: musicLrc = r"""[00:03.50]傳奇[00:19.10]作詞：劉兵作曲：李健[00:20.60]演唱：王菲[00:26.60] [04:40.75][02:39.90][00:36.25]只是因為在人群中多看了你一眼[04:49.00] [02

android音樂播放器播放音樂卡

自己在練習時寫了一個音樂播放器，但是放音樂的時候會卡經過調查，才知道是在設定seekbar監聽的onProgressChanged這個方法中設定了player.seekTo(seekBar.getProgress());這樣就造成了音樂播放進度條改變，然後進度條的改變又會

Ckplayer播放器播放視訊

相關推薦