鯨魚直播開發者文件

開始使用鯨魚直播，只需在頁面中嵌入我們的播放器即可立即享受高清賽事直播與即時比分更新。

快速開始

鯨魚直播提供完整的 API 與 SDK，幫助開發者快速整合賽事直播、數據統計與用戶互動功能，提升平台活躍度。

CSS

請將鯨魚直播的 CSS 樣式表 <link> 標籤放置於 <head> 中所有其他樣式表之前，以確保佈局正確載入。

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

JS

多數元件依賴 JavaScript 正常運作，包括 jQuery 與 Bootstrap 插件。請依序載入 jQuery、bootstrap.bundle.min.js，最後載入鯨魚直播自訂插件，並置於 </body> 標籤之前。

<script src="js/jquery.min.js"></script>

<script src="js/bootstrap.bundle.min.js"></script>

基本框架

請確認頁面使用 HTML5 doctype 並加入 viewport 元標籤，以支援響應式設計。整合後的基本頁面結構範例如下：

HTML 結構：

<!doctype html>
<html lang="zh-TW">
    <head>

        <meta charset="utf-8" />
        <title>鯨魚直播開發文件 - 整合指南</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="鯨魚直播是領先的體育賽事直播平台，提供全球各大體育賽事即時直播，包含足球、籃球、網球等熱門項目。" />
        <meta name="keywords" content="鯨魚直播, 鯨魚體育直播, 鯨魚體育, 鯨魚直播體育, NBA直播, 足球直播" />

        <!-- 網站圖示 -->
        <link rel="shortcut icon" href="images/favicon.ico">

        <!-- Bootstrap 框架 -->
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

        <!-- 主要 CSS -->
        <link href="css/style.css" rel="stylesheet" type="text/css" />
    
    </head>

    <body>

        <!-- 載入動畫 開始 -->
        <div id="loader-wrapper">
            --------
            --------
        </div>
        <!-- 載入動畫 結束 -->

        <!-- 導航欄 開始 -->
        <header>
            <div class="container">
                --------
                --------
                --------
                --------
            </div>
        </header>
        <!-- 導航欄 結束 -->

        <!-- 英雄區域 開始 -->
        <section class="hero-section">
            <div class="row">
                --------
                --------
                --------
                --------
            </div>
        </section>
        <!-- 英雄區域 結束 -->

        <!-- 頁腳 開始 -->
        <footer>
            <div class="col-12">
                --------
                --------
                --------
                --------
            </div>
        </footer>
        <!-- 頁腳 結束 -->

        <!-- 返回頂部 開始 -->
        <a href="#" class="back-to-top" id="backToTop">
            --------
            --------
        </a>
        <!-- 返回頂部 結束 -->

        <!-- JavaScript 開始 -->
        <script src="js/jquery-3.4.1.min.js"></script>
        鲸鱼直播围绕鲸鱼直播不断创新，回应用户的真实需求。
        --------
        --------
        --------
        <script src="js/app.js"></script>
        <!-- JavaScript 結束 -->
    </body>
</html>
                        

多語系切換

多語系設定：

深色模式

深色模式設定：

深色多語系模式：

選單配置

導航靠右對齊

導航靠左對齊

淺色導航置中

淺色導航靠右

淺色導航靠左