diff --git a/package.json b/package.json
index cb5ab8f..3037e29 100644
--- a/package.json
+++ b/package.json
@@ -16,12 +16,16 @@
     "core-js": "^3.4.4",
     "element-ui": "^2.4.5",
     "flyio": "^0.6.14",
+    "hls.js": "^0.13.1",
     "vue": "^2.6.10",
     "vue-class-component": "^7.0.2",
     "vue-property-decorator": "^8.3.0",
-    "vuex": "^3.1.2"
+    "vuex": "^3.1.2",
+    "xgplayer": "^2.4.7",
+    "xgplayer-hls.js": "^2.1.6"
   },
   "devDependencies": {
+    "@types/hls.js": "^0.12.5",
     "@vue/cli-plugin-babel": "^4.1.0",
     "@vue/cli-plugin-eslint": "^4.1.0",
     "@vue/cli-plugin-router": "^4.1.0",
diff --git a/src/App.vue b/src/App.vue
index 342fb30..65f52d7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,18 +27,26 @@
         <Setting v-show="Main === 'Setting'" />
       </el-main>
     </el-container>
+    <el-drawer :visible.sync="drawer" :show-close="true" size="80%" :with-header="false" direction="btt">
+      <Detail />
+    </el-drawer>
   </el-container>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
+import Detail from '@/components/detail.vue'
 const { ipcRenderer: ipc } = require('electron')
 export default Vue.extend({
   data () {
     return {
-      Main: 'Film'
+      Main: 'Setting',
+      drawer: true
     }
   },
+  components: {
+    Detail
+  },
   methods: {
     clickFrameEvent (e:string) {
       ipc.send(e)
@@ -58,8 +66,10 @@ export default Vue.extend({
   padding: 0;
   box-sizing: border-box;
 }
-html,body,#app{
-  width: 100%;
+html,body{
+  height: 100%;
+}
+#app{
   height: 100%;
   .Header{
     display: flex;
diff --git a/src/assets/theme/light.scss b/src/assets/theme/light.scss
index 97d3a08..88f88fa 100644
--- a/src/assets/theme/light.scss
+++ b/src/assets/theme/light.scss
@@ -2,6 +2,13 @@
 .theme-light{
   color: var(--l-c); 
   background-color: var(--l-bgc);
+  .el-table, .el-tabs__item, .btn-next, input{
+    color: var(--l-c);
+  }
+  .el-pagination, .el-pagination .el-pagination__total, .el-pagination .el-pagination__jump,
+  .el-pagination .btn-next, .el-pagination .btn-prev{
+    color: var(--l-c);
+  }
   .Header, .Aside{
     i{
       color: var(--l-icon);
@@ -20,4 +27,22 @@
       }
     }
   }
+  .Main{
+    .film, .search, .star{
+      .table-box{
+        &::-webkit-scrollbar-track {
+          box-shadow: inset 0 0 6px var(--l-bdc);
+        }
+        &::-webkit-scrollbar-thumb {
+          background-color: var(--l-icon);
+          outline: 1px solid var(--l-icon);
+        }
+      }
+    }
+    .setting{
+      .el-link, .card{
+        color: var(--l-c);
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/components/detail.vue b/src/components/detail.vue
index 362ed3c..e1d8b53 100644
--- a/src/components/detail.vue
+++ b/src/components/detail.vue
@@ -1,10 +1,16 @@
 <template>
-  <el-row class="detail"></el-row>
+  <el-row class="detail">detail</el-row>
 </template>
 <script lang="ts">
 import Vue from 'vue'
-export default Vue.extend({})
+export default Vue.extend({
+  name: 'detail'
+})
 </script>
 <style lang="scss" scoped>
-
+.detail{
+  height: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+}
 </style>
diff --git a/src/page/film.vue b/src/page/film.vue
index ea33b00..f8b04a2 100644
--- a/src/page/film.vue
+++ b/src/page/film.vue
@@ -1,18 +1,24 @@
 <template>
   <el-row class="film">
     <el-row class="film-tabs">
-      <el-tabs v-model="activeName" @tab-click="tabClick" tab-position="right">
-        <el-tab-pane class="film-tabpane" v-for="i in sites[siteNum].type" :key="sites[siteNum].id + i[1]" :label="i[0]" :value="i[1]" :name="i[0]">
-          <el-row class="tabs-table">
-            <el-table :data="filmData" stripe style="width: 100%;" class="film-table">
-              <el-table-column prop="name" label="影片名称"></el-table-column>
-              <el-table-column prop="type" label="影片类别" width="200"></el-table-column>
-              <el-table-column prop="time" label="更新时间" width="180"></el-table-column>
-            </el-table>
-          </el-row>
-        </el-tab-pane>
+      <el-tabs v-model="activeName" @tab-click="tabClick">
+        <el-tab-pane class="film-tabpane" v-for="i in sites[siteNum].type" :key="sites[siteNum].id + i[1]" :label="i[0]" :value="i[1]" :name="i[0]"></el-tab-pane>
       </el-tabs>
     </el-row>
+    <el-row class="film-table-box table-box">
+      <el-table :data="filmData" stripe class="film-table">
+        <el-table-column prop="name" label="影片名称"></el-table-column>
+        <el-table-column prop="type" label="影片类别" width="120"></el-table-column>
+        <el-table-column prop="time" label="更新时间" width="180"></el-table-column>
+        <el-table-column label="操作" width="130">
+          <template slot-scope="scope">
+            <el-button type="text" @click="tableBtnClick(scope.row)">详情</el-button>
+            <el-button type="text" @click="tableBtnClick(scope.row)">收藏</el-button>
+            <el-button type="text" @click="tableBtnClick(scope.row)">播放</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
     <el-row class="film-bottom" type="flex" justify="space-between">
       <el-select v-model="siteNum" placeholder="请选择" size="small" @change="selectSite">
         <el-option
@@ -40,9 +46,8 @@ export default Vue.extend({
   data () {
     return {
       sites: sites,
-      activeName: sites[0].type[0][0],
       siteNum: 0,
-      siteName: sites[0].name,
+      activeName: sites[0].type[0][0],
       filmPage: 1,
       filmTotal: 0,
       filmData: [
@@ -100,25 +105,31 @@ export default Vue.extend({
 <style lang="scss" scoped>
 .film{
   height: 100%;
+  position: relative;
   .film-tabs{
-    height: calc(100% - 32px);
-    // overflow: scroll;
-    border: 1px solid #000;
-    .film-tabpane{
-      height: 100%;
-      border: 1px solid green;
-      overflow: scroll;
-    }
-    .tabs-table{
-      height: 100%;
-      border: 1px solid red;
-    }
-    .film-table{
-      border: 1px solid #000;
-      // height: 100px;
-      // height: calc(100% - 32px);
-      overflow: scroll;
+    position: absolute;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    height: 60px;
+  }
+  .film-table-box{
+    position: absolute;
+    top: 54px;
+    width: 100%;
+    height: calc(100% - 100px);
+    overflow-y: scroll;
+    &::-webkit-scrollbar{
+      width: 6px;
     }
   }
+  .film-bottom{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 40px;
+    align-items: center;
+  }
 }
 </style>
diff --git a/src/page/player.vue b/src/page/player.vue
index f8223ef..a019760 100644
--- a/src/page/player.vue
+++ b/src/page/player.vue
@@ -1,10 +1,77 @@
 <template>
-  <el-row class="player">player</el-row>
+  <el-row class="player">
+    <el-row class="player-title" type="flex" justify="space-between">
+      <span>{{title}}</span>
+      <span>
+        <el-button size="mini" icon="el-icon-document" circle></el-button>
+        <el-button size="mini" icon="el-icon-star-off" circle></el-button>
+      </span>
+    </el-row>
+    <el-row class="player-box">
+      <div id="xg"></div>
+    </el-row>
+    <el-row class="player-films">
+      <el-button size="mini">第一集</el-button>
+    </el-row>
+  </el-row>
 </template>
 <script lang="ts">
 import Vue from 'vue'
-export default Vue.extend({})
+import 'xgplayer'
+// @ts-ignore
+import Hls from 'xgplayer-hls.js'
+export default Vue.extend({
+  data () {
+    return {
+      xg: null,
+      title: '视频标题',
+      config: {
+        id: 'xg',
+        url: 'https://iqiyi.cdn9-okzy.com/20191214/3344_80c1876a/index.m3u8',
+        fluid: false,
+        autoplay: true,
+        keyShortcut: 'on',
+        defaultPlaybackRate: 1,
+        playbackRate: [0.5, 0.75, 1, 1.5, 2]
+      }
+    }
+  },
+  methods: {
+
+  },
+  created () {},
+  mounted () {
+    if (Hls.isSupported()) {
+      if (this.xg === null) {
+        this.xg = new Hls(this.config)
+      }
+    } else {
+      console.log('haha')
+    }
+  }
+})
 </script>
 <style lang="scss" scoped>
-
+.player{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .player-title{
+    width: 600px;
+    height: 40px;
+    line-height: 40px;
+  }
+  .player-box{
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: center;
+  }
+  .player-btns, .player-films{
+    margin-top: 10px;
+    width: 600px;
+  }
+}
 </style>
diff --git a/src/page/search.vue b/src/page/search.vue
index d49f5a7..2fbc213 100644
--- a/src/page/search.vue
+++ b/src/page/search.vue
@@ -1,10 +1,130 @@
 <template>
-  <el-row class="search">search</el-row>
+  <el-row class="search">
+    <el-row class="search-box">
+      <el-input class="search-input" size="medium" placeholder="请输入内容" v-model="keywords">
+        <el-select v-model="siteNum" slot="prepend" placeholder="请选择" @change="selectSite" style="width: 130px;">
+          <el-option v-for="(i, j) in sites" :key="i.id" :label="i.name" :value="j"></el-option>
+        </el-select>
+        <el-button slot="append" icon="el-icon-search"></el-button>
+      </el-input>
+    </el-row>
+    <el-row class="search-table-box table-box">
+      <el-table :data="filmData" stripe class="search-table">
+        <el-table-column prop="name" label="影片名称"></el-table-column>
+        <el-table-column prop="type" label="影片类别" width="120"></el-table-column>
+        <el-table-column prop="time" label="更新时间" width="180"></el-table-column>
+        <el-table-column label="操作" width="130">
+          <template slot-scope="scope">
+            <el-button type="text" @click="tableBtnClick(scope.row)">详情</el-button>
+            <el-button type="text" @click="tableBtnClick(scope.row)">收藏</el-button>
+            <el-button type="text" @click="tableBtnClick(scope.row)">播放</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <el-row class="search-bottom" type="flex" justify="end">
+      <el-pagination
+        small
+        layout="total, prev, pager, next, jumper"
+        :current-page="filmPage"
+        :page-size="50"
+        :total="filmTotal">
+      </el-pagination>
+    </el-row>
+  </el-row>
 </template>
 <script lang="ts">
 import Vue from 'vue'
-export default Vue.extend({})
+import sites from '@/lib/sites'
+export default Vue.extend({
+  data () {
+    return {
+      sites: sites,
+      siteNum: 1,
+      keywords: '',
+      filmData: [
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' }
+      ],
+      filmPage: 1,
+      filmTotal: 100
+    }
+  },
+  methods: {
+    selectSite (e:number) {
+      this.siteNum = e
+    }
+  }
+})
 </script>
 <style lang="scss" scoped>
-
+.search{
+  height: 100%;
+  position: relative;
+  .search-box{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 40px;
+  }
+  .search-table-box{
+    position: absolute;
+    top: 40px;
+    width: 100%;
+    height: calc(100% - 100px);
+    overflow-y: scroll;
+    &::-webkit-scrollbar{
+      width: 6px;
+    }
+    .search-table{
+      width: 100%;
+    }
+  }
+  .search-bottom{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 40px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+}
 </style>
diff --git a/src/page/setting.vue b/src/page/setting.vue
index 21ce52b..07c9d37 100644
--- a/src/page/setting.vue
+++ b/src/page/setting.vue
@@ -1,10 +1,91 @@
 <template>
-  <el-row class="setting">setting</el-row>
+  <el-row class="setting">
+    <el-row class="item about">
+      <el-row class="title"><i class="el-icon-view"></i><span>关于</span></el-row>
+      <el-row class="info">
+        <ul>
+          <li><el-link :underline="false" icon="el-icon-user" @click="linkOpen('https://github.com/Hunlongyu')">作者: Hunlongyu</el-link></li>
+          <li><el-link :underline="false" icon="el-icon-discover" @click="linkOpen('https://zy_player.hunlongyu.fun')">官网: ZY Player</el-link></li>
+          <li><el-link :underline="false" icon="el-icon-chat-line-round" @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/issues')">反馈: Issues</el-link></li>
+        </ul>
+      </el-row>
+    </el-row>
+    <el-row class="item theme">
+      <el-row class="title"><i class="el-icon-picture-outline-round"></i><span>主题</span></el-row>
+      <el-row class="card-box">
+        <el-card shadow="hover" class="card">
+          <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
+          <span size="mini">Light</span>
+        </el-card>
+        <el-card shadow="hover" class="card">
+          <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
+          <span size="mini">Dark</span>
+        </el-card>
+      </el-row>
+    </el-row>
+    <el-row class="item update">
+      <el-row class="title"><i class="el-icon-refresh"></i><span>更新</span></el-row>
+      <el-row class="btns">
+        <el-button size="small">检查更新</el-button>
+      </el-row>
+    </el-row>
+  </el-row>
 </template>
 <script lang="ts">
 import Vue from 'vue'
-export default Vue.extend({})
+import { shell } from 'electron'
+export default Vue.extend({
+  methods: {
+    linkOpen (e:string) {
+      if (e) {
+        shell.openExternal(e)
+      }
+    }
+  }
+})
 </script>
 <style lang="scss" scoped>
-
+.setting{
+  .item{
+    margin-bottom: 30px;
+    .title{
+      height: 24px;
+      line-height: 24px;
+      margin-bottom: 10px;
+      display: flex;
+      align-items: center;
+      i{
+        font-size: 24px;
+        margin-right: 6px;
+      }
+    }
+  }
+  .about{
+    ul{
+      list-style: none;
+      li{
+        height: 30px;
+      }
+    }
+  }
+  .theme{
+    .card-box{
+      display: flex;
+      justify-content: flex-start;
+      .card{
+        width: 160px;
+        margin-right: 20px;
+        text-align: center;
+        cursor: pointer;
+        img{
+          width: 100%;
+        }
+        span{
+          font-size: 14px;
+          margin-top: 10px;
+        }
+      }
+    }
+  }
+}
 </style>
diff --git a/src/page/star.vue b/src/page/star.vue
index 5d85a23..8ae6de5 100644
--- a/src/page/star.vue
+++ b/src/page/star.vue
@@ -1,10 +1,91 @@
 <template>
-  <el-row class="star">star</el-row>
+  <el-row class="star">
+    <el-row class="star-table-box table-box">
+      <el-table :data="filmData" stripe class="film-table">
+        <el-table-column prop="name" label="影片名称"></el-table-column>
+        <el-table-column prop="type" label="影片类别" width="120"></el-table-column>
+        <el-table-column prop="time" label="更新时间" width="180"></el-table-column>
+        <el-table-column label="操作" width="130">
+          <template slot-scope="scope">
+            <el-button type="text" @click="tableBtnClick(scope.row)">详情</el-button>
+            <el-button type="text" @click="tableBtnClick(scope.row)">删除</el-button>
+            <el-button type="text" @click="tableBtnClick(scope.row)">播放</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <el-row class="star-bottom">
+      <el-pagination
+        small
+        layout="total, prev, pager, next, jumper"
+        :current-page="filmPage"
+        :page-size="50"
+        :total="filmTotal">
+      </el-pagination>
+    </el-row>
+  </el-row>
 </template>
 <script lang="ts">
 import Vue from 'vue'
-export default Vue.extend({})
+export default Vue.extend({
+  data () {
+    return {
+      filmData: [
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' }
+      ],
+      filmPage: 1,
+      filmTotal: 120
+    }
+  }
+})
 </script>
 <style lang="scss" scoped>
-
+.star{
+  height: 100%;
+  position: relative;
+  .star-table-box{
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    height: calc(100% - 40px);
+    overflow-y: scroll;
+    &::-webkit-scrollbar{
+      width: 6px;
+    }
+  }
+  .star-bottom{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 40px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+}
 </style>
diff --git a/src/plugins/element.ts b/src/plugins/element.ts
index b425f0c..2349525 100644
--- a/src/plugins/element.ts
+++ b/src/plugins/element.ts
@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import {
-  Container, Row, Col, Header, Aside, Main,
+  Container, Row, Col, Header, Aside, Main, Drawer,
   Tabs, TabPane, Button, Select, Option, Pagination,
-  Table, TableColumn
+  Table, TableColumn, Input, Card, Link
 } from 'element-ui'
 
 Vue.use(Container)
@@ -11,6 +11,7 @@ Vue.use(Col)
 Vue.use(Header)
 Vue.use(Aside)
 Vue.use(Main)
+Vue.use(Drawer)
 Vue.use(Tabs)
 Vue.use(TabPane)
 Vue.use(Button)
@@ -19,3 +20,6 @@ Vue.use(Option)
 Vue.use(Pagination)
 Vue.use(Table)
 Vue.use(TableColumn)
+Vue.use(Input)
+Vue.use(Card)
+Vue.use(Link)
diff --git a/tsconfig.json b/tsconfig.json
index b57578e..051234b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,7 +12,8 @@
     "sourceMap": true,
     "baseUrl": ".",
     "types": [
-      "webpack-env"
+      "webpack-env",
+      "hls.js"
     ],
     "paths": {
       "@/*": [
diff --git a/yarn.lock b/yarn.lock
index 333280a..d1a9176 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -917,6 +917,11 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/hls.js@^0.12.5":
+  version "0.12.5"
+  resolved "http://r.cnpmjs.org/@types/hls.js/download/@types/hls.js-0.12.5.tgz#0292cbab23fe91bb579e7bf0ac90190d67052ac7"
+  integrity sha1-ApLLqyP+kbtXnnvwrJAZDWcFKsc=
+
 "@types/json-schema@^7.0.3":
   version "7.0.4"
   resolved "https://registry.npm.taobao.org/@types/json-schema/download/@types/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339"
@@ -2373,7 +2378,7 @@ chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.2, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.npm.taobao.org/chalk/download/chalk-2.4.2.tgz?cache=0&sync_timestamp=1573282949696&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha1-zUJUFnelQzPPVBpJEIwUMrRMlCQ=
@@ -2660,7 +2665,7 @@ commander@2.17.x:
   resolved "https://registry.npm.taobao.org/commander/download/commander-2.17.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
   integrity sha1-vXerfebelCBc6sxy8XFtKfIKd78=
 
-commander@^2.12.1, commander@^2.18.0, commander@^2.20.0, commander@~2.20.3:
+commander@^2.12.1, commander@^2.15.1, commander@^2.18.0, commander@^2.20.0, commander@~2.20.3:
   version "2.20.3"
   resolved "https://registry.npm.taobao.org/commander/download/commander-2.20.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha1-/UhehMA+tIgcIHIrpIA16FMa6zM=
@@ -3169,6 +3174,21 @@ cyclist@^1.0.1:
   resolved "https://registry.npm.taobao.org/cyclist/download/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
+d@1, d@^1.0.1:
+  version "1.0.1"
+  resolved "http://r.cnpmjs.org/d/download/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
+  integrity sha1-hpgJU3LVjb7jRv/Qxwk/mfj561o=
+  dependencies:
+    es5-ext "^0.10.50"
+    type "^1.0.1"
+
+danmu.js@0.1.0:
+  version "0.1.0"
+  resolved "http://r.cnpmjs.org/danmu.js/download/danmu.js-0.1.0.tgz#928fb297dc6598850cd06610dd6454a497748f6b"
+  integrity sha1-ko+yl9xlmIUM0GYQ3WRUpJd0j2s=
+  dependencies:
+    event-emitter "^0.3.5"
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.npm.taobao.org/dashdash/download/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@@ -3241,16 +3261,16 @@ deep-is@~0.1.3:
   resolved "https://registry.npm.taobao.org/deep-is/download/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
-deepmerge@^1.2.0, deepmerge@^1.5.2:
-  version "1.5.2"
-  resolved "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
-  integrity sha1-EEmdhohEza1P7ghC34x/bwyVp1M=
-
-deepmerge@~2.0.1:
+deepmerge@2.0.1, deepmerge@~2.0.1:
   version "2.0.1"
   resolved "https://registry.npm.taobao.org/deepmerge/download/deepmerge-2.0.1.tgz#25c1c24f110fb914f80001b925264dd77f3f4312"
   integrity sha1-JcHCTxEPuRT4AAG5JSZN138/QxI=
 
+deepmerge@^1.2.0, deepmerge@^1.5.0, deepmerge@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
+  integrity sha1-EEmdhohEza1P7ghC34x/bwyVp1M=
+
 default-gateway@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npm.taobao.org/default-gateway/download/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -3492,6 +3512,19 @@ dotenv@^8.0.0, dotenv@^8.2.0:
   resolved "https://registry.npm.taobao.org/dotenv/download/dotenv-8.2.0.tgz?cache=0&sync_timestamp=1571190685588&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdotenv%2Fdownload%2Fdotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
   integrity sha1-l+YZJZradQ7qPk6j4mvO6lQksWo=
 
+downloadjs@1.4.7:
+  version "1.4.7"
+  resolved "http://r.cnpmjs.org/downloadjs/download/downloadjs-1.4.7.tgz#f69f96f940e0d0553dac291139865a3cd0101e3c"
+  integrity sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw=
+
+draggabilly@^2.2.0:
+  version "2.2.0"
+  resolved "http://r.cnpmjs.org/draggabilly/download/draggabilly-2.2.0.tgz#9bac6849816c5cd4e4a59707f63f14ea7d863baf"
+  integrity sha1-m6xoSYFsXNTkpZcH9j8U6n2GO68=
+  dependencies:
+    get-size "^2.0.2"
+    unidragger "^2.3.0"
+
 duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.npm.taobao.org/duplexer3/download/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
@@ -3737,11 +3770,37 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+es5-ext@^0.10.35, es5-ext@^0.10.50, es5-ext@~0.10.14:
+  version "0.10.53"
+  resolved "http://r.cnpmjs.org/es5-ext/download/es5-ext-0.10.53.tgz#93c5a3acfdbef275220ad72644ad02ee18368de1"
+  integrity sha1-k8WjrP2+8nUiCtcmRK0C7hg2jeE=
+  dependencies:
+    es6-iterator "~2.0.3"
+    es6-symbol "~3.1.3"
+    next-tick "~1.0.0"
+
 es6-error@^4.1.1:
   version "4.1.1"
   resolved "http://r.cnpmjs.org/es6-error/download/es6-error-4.1.1.tgz#9e3af407459deed47e9a91f9b885a84eb05c561d"
   integrity sha1-njr0B0Wd7tR+mpH5uIWoTrBcVh0=
 
+es6-iterator@~2.0.3:
+  version "2.0.3"
+  resolved "http://r.cnpmjs.org/es6-iterator/download/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
+  integrity sha1-p96IkUGgWpSwhUQDstCg+/qY87c=
+  dependencies:
+    d "1"
+    es5-ext "^0.10.35"
+    es6-symbol "^3.1.1"
+
+es6-symbol@^3.1.1, es6-symbol@~3.1.3:
+  version "3.1.3"
+  resolved "http://r.cnpmjs.org/es6-symbol/download/es6-symbol-3.1.3.tgz#bad5d3c1bcdac28269f4cb331e431c78ac705d18"
+  integrity sha1-utXTwbzawoJp9MszHkMceKxwXRg=
+  dependencies:
+    d "^1.0.1"
+    ext "^1.1.2"
+
 escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.npm.taobao.org/escape-html/download/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
@@ -3958,11 +4017,29 @@ etag@~1.8.1:
   resolved "https://registry.npm.taobao.org/etag/download/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
 
+ev-emitter@^1.0.1:
+  version "1.1.1"
+  resolved "http://r.cnpmjs.org/ev-emitter/download/ev-emitter-1.1.1.tgz#8f18b0ce5c76a5d18017f71c0a795c65b9138f2a"
+  integrity sha1-jxiwzlx2pdGAF/ccCnlcZbkTjyo=
+
+event-emitter@^0.3.5:
+  version "0.3.5"
+  resolved "http://r.cnpmjs.org/event-emitter/download/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
+  integrity sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+
 event-pubsub@4.3.0:
   version "4.3.0"
   resolved "https://registry.npm.taobao.org/event-pubsub/download/event-pubsub-4.3.0.tgz#f68d816bc29f1ec02c539dc58c8dd40ce72cb36e"
   integrity sha1-9o2Ba8KfHsAsU53FjI3UDOcss24=
 
+eventemitter3@3.1.0:
+  version "3.1.0"
+  resolved "http://r.cnpmjs.org/eventemitter3/download/eventemitter3-3.1.0.tgz#090b4d6cdbd645ed10bf750d4b5407942d7ba163"
+  integrity sha1-CQtNbNvWRe0Qv3UNS1QHlC17oWM=
+
 eventemitter3@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npm.taobao.org/eventemitter3/download/eventemitter3-4.0.0.tgz?cache=0&sync_timestamp=1560950873670&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feventemitter3%2Fdownload%2Feventemitter3-4.0.0.tgz#d65176163887ee59f386d64c82610b696a4a74eb"
@@ -4092,6 +4169,13 @@ express@^4.16.3, express@^4.17.1:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
+ext@^1.1.2:
+  version "1.4.0"
+  resolved "http://r.cnpmjs.org/ext/download/ext-1.4.0.tgz#89ae7a07158f79d35517882904324077e4379244"
+  integrity sha1-ia56BxWPedNVF4gpBDJAd+Q3kkQ=
+  dependencies:
+    type "^2.0.0"
+
 extend-shallow@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npm.taobao.org/extend-shallow/download/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
@@ -4453,6 +4537,15 @@ fs-extra@^4.0.1:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
+fs-extra@^5.0.0:
+  version "5.0.0"
+  resolved "http://r.cnpmjs.org/fs-extra/download/fs-extra-5.0.0.tgz#414d0110cdd06705734d055652c5411260c31abd"
+  integrity sha1-QU0BEM3QZwVzTQVWUsVBEmDDGr0=
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
 fs-extra@^7.0.1:
   version "7.0.1"
   resolved "https://registry.npm.taobao.org/fs-extra/download/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
@@ -4538,6 +4631,11 @@ get-caller-file@^2.0.1:
   resolved "https://registry.npm.taobao.org/get-caller-file/download/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha1-T5RBKoLbMvNuOwuXQfipf+sDH34=
 
+get-size@^2.0.2:
+  version "2.0.3"
+  resolved "http://r.cnpmjs.org/get-size/download/get-size-2.0.3.tgz#54a1d0256b20ea7ac646516756202769941ad2ef"
+  integrity sha1-VKHQJWsg6nrGRlFnViAnaZQa0u8=
+
 get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.npm.taobao.org/get-stdin/download/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
@@ -4866,6 +4964,14 @@ highlight.js@^9.6.0:
   dependencies:
     handlebars "^4.5.3"
 
+hls.js@^0.13.1:
+  version "0.13.1"
+  resolved "http://r.cnpmjs.org/hls.js/download/hls.js-0.13.1.tgz#371ae0754fea2ca9bc2c0b3279e4ca631c7a595a"
+  integrity sha1-NxrgdU/qLKm8LAsyeeTKYxx6WVo=
+  dependencies:
+    eventemitter3 "3.1.0"
+    url-toolkit "^2.1.6"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/hmac-drbg/download/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -6473,6 +6579,11 @@ neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1:
   resolved "https://registry.npm.taobao.org/neo-async/download/neo-async-2.6.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fneo-async%2Fdownload%2Fneo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
   integrity sha1-rCetpmFn+ohJpq3dg39rGJrSCBw=
 
+next-tick@~1.0.0:
+  version "1.0.0"
+  resolved "http://r.cnpmjs.org/next-tick/download/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
+  integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.npm.taobao.org/nice-try/download/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -7036,6 +7147,11 @@ pascalcase@^0.1.1:
   resolved "https://registry.npm.taobao.org/pascalcase/download/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
   integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
 
+pasition@^1.0.1:
+  version "1.0.3"
+  resolved "http://r.cnpmjs.org/pasition/download/pasition-1.0.3.tgz#133d6ed4ae7ebd819d29651491d53f74151273bd"
+  integrity sha1-Ez1u1K5+vYGdKWUUkdU/dBUSc70=
+
 path-browserify@0.0.1:
   version "0.0.1"
   resolved "https://registry.npm.taobao.org/path-browserify/download/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
@@ -8022,6 +8138,11 @@ repeating@^2.0.0:
   dependencies:
     is-finite "^1.0.0"
 
+request-frame@^1.5.3:
+  version "1.5.3"
+  resolved "http://r.cnpmjs.org/request-frame/download/request-frame-1.5.3.tgz#813c3160d9b023583889aaa977389b68fcaa2e3d"
+  integrity sha1-gTwxYNmwI1g4iaqpdzibaPyqLj0=
+
 request-promise-core@1.1.3:
   version "1.1.3"
   resolved "https://registry.npm.taobao.org/request-promise-core/download/request-promise-core-1.1.3.tgz#e9a3c081b51380dfea677336061fea879a829ee9"
@@ -9404,6 +9525,16 @@ type-is@~1.6.17, type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
+type@^1.0.1:
+  version "1.2.0"
+  resolved "http://r.cnpmjs.org/type/download/type-1.2.0.tgz#848dd7698dafa3e54a6c479e759c4bc3f18847a0"
+  integrity sha1-hI3XaY2vo+VKbEeedZxLw/GIR6A=
+
+type@^2.0.0:
+  version "2.0.0"
+  resolved "http://r.cnpmjs.org/type/download/type-2.0.0.tgz#5f16ff6ef2eb44f260494dae271033b29c09a9c3"
+  integrity sha1-Xxb/bvLrRPJgSU2uJxAzspwJqcM=
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.npm.taobao.org/typedarray/download/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -9453,6 +9584,13 @@ unicode-property-aliases-ecmascript@^1.0.4:
   resolved "https://registry.npm.taobao.org/unicode-property-aliases-ecmascript/download/unicode-property-aliases-ecmascript-1.0.5.tgz#a9cc6cc7ce63a0a3023fc99e341b94431d405a57"
   integrity sha1-qcxsx85joKMCP8meNBuUQx1AWlc=
 
+unidragger@^2.3.0:
+  version "2.3.0"
+  resolved "http://r.cnpmjs.org/unidragger/download/unidragger-2.3.0.tgz#ab9d9fd62106f3252d88fae5f3a99575e6d31d02"
+  integrity sha1-q52f1iEG8yUtiPrl86mVdebTHQI=
+  dependencies:
+    unipointer "^2.3.0"
+
 union-value@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/union-value/download/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
@@ -9463,6 +9601,13 @@ union-value@^1.0.0:
     is-extendable "^0.1.1"
     set-value "^2.0.1"
 
+unipointer@^2.3.0:
+  version "2.3.0"
+  resolved "http://r.cnpmjs.org/unipointer/download/unipointer-2.3.0.tgz#ba0dc462ce31c2a88e80810e19c3bae0ce47ed9f"
+  integrity sha1-ug3EYs4xwqiOgIEOGcO64M5H7Z8=
+  dependencies:
+    ev-emitter "^1.0.1"
+
 uniq@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/uniq/download/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
@@ -9590,6 +9735,11 @@ url-parse@^1.4.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+url-toolkit@^2.1.6:
+  version "2.1.6"
+  resolved "http://r.cnpmjs.org/url-toolkit/download/url-toolkit-2.1.6.tgz#6d03246499e519aad224c44044a4ae20544154f2"
+  integrity sha1-bQMkZJnlGarSJMRARKSuIFRBVPI=
+
 url@^0.11.0, url@~0.11.0:
   version "0.11.0"
   resolved "https://registry.npm.taobao.org/url/download/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
@@ -10104,6 +10254,30 @@ xdg-basedir@^3.0.0:
   resolved "https://registry.npm.taobao.org/xdg-basedir/download/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
   integrity sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ=
 
+xgplayer-hls.js@^2.1.6:
+  version "2.1.6"
+  resolved "http://r.cnpmjs.org/xgplayer-hls.js/download/xgplayer-hls.js-2.1.6.tgz#1e969a77a7546114a5e1b4509e89401fe74536da"
+  integrity sha1-Hpaad6dUYRSl4bRQnolAH+dFNto=
+  dependencies:
+    deepmerge "2.0.1"
+    event-emitter "^0.3.5"
+
+xgplayer@^2.4.7:
+  version "2.4.7"
+  resolved "http://r.cnpmjs.org/xgplayer/download/xgplayer-2.4.7.tgz#68d473e1467ce18b10a6c9dc0a5bc6277056562a"
+  integrity sha1-aNRz4UZ84YsQpsncClvGJ3BWVio=
+  dependencies:
+    chalk "^2.3.2"
+    commander "^2.15.1"
+    danmu.js "0.1.0"
+    deepmerge "^1.5.0"
+    downloadjs "1.4.7"
+    draggabilly "^2.2.0"
+    event-emitter "^0.3.5"
+    fs-extra "^5.0.0"
+    pasition "^1.0.1"
+    request-frame "^1.5.3"
+
 xtend@^4.0.0, xtend@~4.0.0, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.npm.taobao.org/xtend/download/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"