最近接的一個業務，寫一個直播系統使用說明的頁面（用時是2小時）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>使用說明</title><style> .helptext{ display:none;padding-left:30px; }.helptitle{background-color: #CCC;height: 40px;line-height: 40px;margin-bottom:10px;}.helptitle h4{font-size: 20px;}</style><script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> </head><body> <div id="maincontent"> <div class="helpcontent"> <div class="helptitle"><h4>1、建立直播活動</h4></div><div class="helptext"> <div class="wenben">建立直播活動：單擊“建立直播活動”—>選中“建立直播活動”，介面如：</div> <div><img src="images/image001.jpg"/></div> <div>直播活動建立成功，這時使用者可以根據自己喜歡配置直播播放器，設定播放限制條件，或者進行設 備直播，又或者進行錄屏直播。介面如：</div> <div><img src="images/image002.jpg"/></div></div></div><div class="helpcontent"> <div class="helptitle"><h4>2、裝置直播</h4></div><div class="helptext"> <div class="wenben">裝置直播：單擊“我的直播活動”—>選擇相應的直播活動單擊“直播”（下拉）—>單 擊“開始裝置直播”。介面如：</div> <div><img src="images/image003.jpg"/></div> <div>把直播裝置接入電腦—>安裝你所持直播裝置支援的直播驅動（可以詢問你的裝置購買商，或者閱讀 你購買的直播裝置的使用說明書）—>登入POLYV直播系統—>選擇相應的視頻源—>選擇相應的音頻源（耳 麥、立體混音、內建式麥克風、不直播音頻資料（即無聲））—>開始直播。介面如：：</div> <div><img src="images/image004.jpg"/></div> <div>直播進行中的介面如：</div> <div><img src="images/image005.jpg"/></div></div></div><div class="helpcontent"> <div class="helptitle"><h4>3、錄屏直播</h4></div><div class="helptext"> <div class="wenben">錄屏直播：單擊“我的直播活動”—>選擇相應的直播活動單擊“直播”（下拉）—>單 擊“開始錄屏直播”—>之後直播系統會進行硬體檢測。介面如：</div> <div><img src="images/image006.jpg"/></div> <div>單擊“開始錄屏直播”—>之後直播系統會進行硬體檢測，介面如：</div> <div><img src="images/image007.jpg"/></div> <div>安裝驅動：把已經下載下來的POLYV-SCR-v0.9.7錄屏驅動解壓，並安裝。介面如：</div> <div><img src="images/image008.jpg"/></div></div></div><div class="helpcontent"> <div class="helptitle"><h4>4、直播預覽</h4></div><div class="helptext"> <div class="wenben">直播預覽：單擊“我的直播活動”—>選擇相應的直播活動單擊“直播”（下拉）—>單 擊“直播預覽”。介面如：</div> <div><img src="images/image009.jpg"/></div> <div>拷貝播放代碼：單擊“我的直播活動”—>選擇相應的直播活動單擊“直播”（下拉）—>單擊“直播預覽 ”(把螢幕滾到最下面就能看到如下介面了)。</div> <div><img src="images/image010.jpg"/></div> <div>拷貝播放代碼示範：使用者可以將代碼拷貝到自己的網站的網頁中，就能將直播視頻推送到自己的 網站。示範如：</div> <div><img src="images/image011.jpg"/></div> <div><img src="images/image012.jpg"/></div></div></div><div class="helpcontent"> <div class="helptitle"><h4>5、刪除直播活動</h4></div><div class="helptext"> <div class="wenben">刪除直播活動：單擊“我的直播活動”—>選擇相應的直播活動單擊“管理”（下拉 ）—>單擊“刪除直播”。介面如：</div> <div><img src="images/image013.jpg"/></div></div><div class="helpcontent"> <div class="helptitle"><h4>6、播放器設定</h4></div><div class="helptext"> <div class="wenben">播放器設定：單擊“我的直播活動”—>選擇相應的直播活動單擊“管理”（下拉）—> 單擊“播放器設定”。介面如：</div> <div><img src="images/image014.jpg"/></div> <div>播放器顏色設定：單擊“我的直播活動”—>選擇相應的直播活動單擊“管理”（下拉）—>單擊“播放器 設定”—>選擇單擊“播放器顏色設定”。介面如：了)。</div> <div><img src="images/image015.jpg"/></div> <div>播放器Logo：單擊“我的直播活動”—>選擇相應的直播活動單擊“管理”（下拉）—>單擊“播放器設定 ”—>選擇單擊“播放器Logo”。介面如：</div> <div><img src="images/image016.jpg"/></div> <div>播放器Logo預覽效果，介面如：</div> <div><img src="images/image017.jpg"/></div> <div>直播封面圖片：單擊“我的直播活動”—>選擇相應的直播活動單擊“管理”（下拉）—>單擊“播放器 設定”—>選擇單擊“封面圖片”。介面如：</div> <div><img src="images/image018.jpg"/></div> <div>直播封面圖片：介面如下</div> <div><img src="images/image019.jpg"/></div> <div>直播等待圖片：單擊“我的直播活動”—>選擇相應的直播活動單擊“管理”（下拉）—>單擊“播放器 設定”—>選擇單擊“等待圖片”。介面如：</div> <div><img src="images/image020.jpg"/></div> <div>直播等待圖片（直播沒開始的時候顯示的圖片），介面如下：</div> <div><img src="images/image021.jpg"/></div> <div>直播斷流圖片：單擊“我的直播活動”—>選擇相應的直播活動單擊“管理”（下拉）—>單擊“播放器 設定”—>選擇單擊“斷流圖片”。介面如：</div> <div><img src="images/image022.jpg"/></div> <div>直播斷流圖片效果，介面如：</div> <div><img src="images/image023.jpg"/></div> </div></div><div class="helpcontent"> <div class="helptitle"><h4>7、廣告設定</h4></div><div class="helptext"> <div class="wenben">圖片廣告：單擊“我的直播活動”—>選擇相應的直播活動單擊“管理”（下拉）—>單 擊“廣告設定”—>選擇“圖片廣告”。介面如：</div> <div><img src="images/image024.jpg"/></div> <div>使用者可以自訂廣告顯示的寬度、高度、時間長度。介面如：</div> <div><img src="images/image025.jpg"/></div> <div>直播時播放廣告的效果，介面如：</div> <div><img src="images/image026.jpg"/></div> <div>視頻廣告：單擊“我的直播活動”—>選擇相應的直播活動單擊“管理”（下拉）—>單擊“廣告設定”—> 選擇“視頻廣告”。介面如：</div> <div><img src="images/image027.jpg"/></div> <div>直播開始時，播放FLV視頻廣告效果</div> <div><img src="images/image028.jpg"/></div></div></div><div class="helpcontent"> <div class="helptitle"><h4>8、觀看限制</h4></div><div class="helptext"> <div class="wenben"> 觀看限制：單擊“我的直播活動”—>選擇相應的直播活動單擊“管理”（下拉）—>單 擊“設定觀看條件”。介面如：：</div> <div><img src="images/image029.jpg"/></div> <div>同時線上人數的限制：</div> <div><img src="images/image030.jpg"/></div> <div>每日流量限制：</div> <div><img src="images/image031.jpg"/></div> <div>播放網站限制 <br /> 白名單：（觀眾只能通過白名單網站才能觀看直播內容，在白名單之外的網站不能播放）<br /> 黑名單：（觀眾在黑名單網站不能觀看直播內容） </div> <div><img src="images/image032.jpg"/></div> <div>播放地區限制（白名單、黑名單）如果使用者開啟了設定播放地區的白名單該項功能時，就只有白 名單選項裡被選中的地區才能播放直播。反之，如果使用者開啟了設定播放地區的黑名單該項功能時 ，黑名單選項裡被選中的地區就不能能播放直播。</div> <div><img src="images/image033.jpg"/></div> <div>設定播放密碼：如果使用者佈建了密碼並開啟該項功能時，觀眾就要輸入密碼才能觀看直播。</div> <div><img src="images/image034.jpg"/></div> <div>直播觀看密碼介面如下：</div> <div><img src="images/image035.jpg"/></div></div></div><div class="helpcontent"> <div class="helptitle"><h4>9、直播資料統計（統計單個直播活動的資料）</h4></div><div class="helptext"> <div class="wenben"> 直播資料統計：單擊“我的直播活動”—>選擇相應的直播活動單擊“統計”（下拉）—>單擊“即時人數觀看統計”。介面如：</div> <div><img src="images/image036.jpg"/></div> <div>即時觀看人數：單擊“我的直播活動”—>選擇相應的直播活動單擊“統計”（下拉）—>單擊“即時觀看人數”。介面如：</div> <div><img src="images/image037.jpg"/></div> <div>觀眾統計：單擊“我的直播活動”—>選擇相應的直播活動單擊“統計”（下拉）—>單擊“觀眾統計”。介面如：</div> <div><img src="images/image038.jpg"/></div> <div>流量統計：單擊“我的直播活動”—>選擇相應的直播活動單擊“統計”（下拉）—>單擊“流量統計”。介面如：</div> <div><img src="images/image039.jpg"/></div> <div>時間長度統計：單擊“我的直播活動”—>選擇相應的直播活動單擊“統計”（下拉）—>單擊“時間長度統計”。介面如：</div> <div><img src="images/image040.jpg"/></div> <div>地區分布：單擊“我的直播活動”—>選擇相應的直播活動單擊“統計”（下拉）—>單擊“地區分布”。介面如：</div> <div><img src="images/image041.jpg"/></div></div></div><div class="helpcontent"> <div class="helptitle"><h4>10、統計資料（統計使用者所有直播活動的資料）</h4></div><div class="helptext"> <div class="wenben"> 統計資料：點擊“統計資料”—>點擊“統計資料”，介面如：</div> <div><img src="images/image042.jpg"/></div> <div>觀眾統計：點擊“統計資料”—>點擊“觀眾統計”，介面如：</div> <div><img src="images/image043.jpg"/></div> <div>流量統計：點擊“統計資料”—>點擊“流量統計”，介面如：</div> <div><img src="images/image044.jpg"/></div> <div>時間長度統計：點擊“統計資料”—>點擊“時間長度統計”，介面如：</div> <div><img src="images/image045.jpg"/></div> <div>地區分布：點擊“統計資料”—>點擊“地區分布”，介面如：</div> <div><img src="images/image046.jpg"/></div></div></div><div class="helpcontent"> <div class="helptitle"><h4>11、使用者賬戶資訊設定</h4></div><div class="helptext"> <div class="wenben"> 帳號資訊查看：單擊“使用者帳號”（右上方）—>單擊“帳號資訊”。介面如：</div> <div><img src="images/image047.jpg"/></div> <div>帳號資訊設定：單擊“使用者帳號”（右上方）—>單擊“資訊設定”。介面如：</div> <div><img src="images/image048.jpg"/></div> <div>帳號密碼修改：單擊“使用者帳號”（右上方）—>單擊“密碼修改”。介面如：</div> <div><img src="images/image049.jpg"/></div></div></div></div> <script src="http://live.polyv.net/js/jquery.min.js"></script><script src="http://live.polyv.net/bootstrap/js/bootstrap.min.js"></script><script src="http://bxslider.com/lib/jquery.bxslider.js"></script><script> $(".helptitle").click(function(){$(this).next().toggle(300); });</script></body></html>
：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
