From da7f60fe07ae0801f8525abcc9067104f16f658f Mon Sep 17 00:00:00 2001
From: CHENJIN <chenjin@kingsoft.com>
Date: Fri, 25 Nov 2016 18:41:59 +0800
Subject: [PATCH] update docs for first release

---
 demo/index.html | 36 ++++++++++++++++++------------------
 doc/example.md  |  2 +-
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index d3d4289..b4beb19 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -4,7 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>ksplayer demo</title>
-    <link rel="stylesheet" href="style/ksplayer.min.css">
+    <!--<link rel="stylesheet" href="style/ksplayer.min.css">-->
+    <link href="//ksplayer.video.ksyun.com/v1/ksplayer.min.css" rel="stylesheet">
 
     <style>
         body {
@@ -68,7 +69,7 @@ <h1>KSPlayer Demo</h1>
 <p>KSPlayer让您可以在所有主要的桌面和移动端浏览器上播放mp4，m3u8格式的点播视频和rtmp、hls、http-flv协议的直播视频</p>
 <div class="video-container">
     <!--two choices for style:  vjs-default-skin or vjs-sublime-skin-->
-    <video id=example-video  class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="264">
+    <video id=example-video  class="video-js mobile-first-skin" controls preload="auto" width="640" height="264">
         <source src="http://vjs.zencdn.net/v/oceans.mp4"
                 type="video/mp4">
     </video>
@@ -77,7 +78,8 @@ <h1>KSPlayer Demo</h1>
     <input id="video-url" placeholder="输入视频URL"> <button id="change-video">加载</button>
 </div>
 
-<script src="js/ksplayer.min.js"></script>
+<!--<script src="js/ksplayer.min.js"></script>-->
+<script src="//ksplayer.video.ksyun.com/v1/ksplayer.min.js"></script>
 
 <!--<script>-->
     <!--ksplayer.options.flash.swf = "ksplayer.swf";-->
@@ -88,33 +90,30 @@ <h1>KSPlayer Demo</h1>
 
     var player = ksplayer('example-video',{
         language: 'zh-CN',
-        responsive: true,
         autoHeight: true,
+        autoWidth: true,
         fluid: true,  //响应式
         bigPlayButton: false,
-        autoplay:false
+        autoplay:false,
+        controlBar: {
+            volumeMenuButton: {
+                inline: false,
+                vertical: true
+            }
+        }
 //        "playbackRates": [1, 1.5, 2]
     });
 
 
     var bigBtn = player.addChild("BigPlayButton");
     //player.removeChild("BigPlayButton");
-    var el = bigBtn.el();
+
     player.ready(function() {
-        bigBtn.addClass('wider-style');
+        //bigBtn.addClass('wider-style');
         setTimeout(function() {
             console.log('lengthOfVideo: ' + player.duration());
         },1);
 
-      /*  if(player.currentSrc() == 'http://vjs.zencdn.net/v/oceans.mp4') {
-            var trackElement = player.addRemoteTextTrack({
-                kind: 'Captions',
-                label:'打开字幕',
-                language: 'zh',
-                src: './captions.vtt',
-                default: true
-            });
-        }*/
 
         $("#change-video")[0].addEventListener('click', function(){
             var newUrl = $('#video-url')[0].value.trim();
@@ -187,11 +186,11 @@ <h1>KSPlayer Demo</h1>
 
 
     player.on("useractive", function(event) {
-        console.log( event );
+        //console.log( event );
     });
 
     player.on("userinactive", function(event) {
-        console.log( event );
+        //console.log( event );
     });
 
     player.on("volumechange", function(event) {
@@ -206,6 +205,7 @@ <h1>KSPlayer Demo</h1>
        console.log(event);
     });
 
+
 </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/doc/example.md b/doc/example.md
index 9d491a3..66ccb57 100644
--- a/doc/example.md
+++ b/doc/example.md
@@ -48,7 +48,7 @@
     </p> 
 </video>
 ```
-ksplayer提供了两套皮肤，默认样式和高级样式，可以分别通过在class属性中增加`js-default-skin`和`js-sublime-skin`类更换播放器皮肤。另外通过添加额外的`vjs-big-play-centered`类可以使播放按钮居中。
+ksplayer提供了两套皮肤，默认样式和高级样式，可以分别通过在class属性中增加`js-default-skin`,`js-sublime-skin`和`mobile-first-skin`类更换播放器皮肤。另外通过添加额外的`vjs-big-play-centered`类可以使播放按钮居中。
 
 ## Step 3: 初始化设置播放器
 ---