diff --git a/docs/danmaku.js b/docs/danmaku.js
index 445f705..1ff990d 100644
--- a/docs/danmaku.js
+++ b/docs/danmaku.js
@@ -1,66 +1,41 @@
-const SPEED_ARG = 0.0058
-
-const DEFAULT_TRACK_SIZE = 12
-
-const DEFAULT_RENDER_INTERVAL = 150
+const SPEED_ARG = 0.009
 
 const defaultDanmakuData = {
     msg: '',
     fontSize: 24,
     fontColor: '#ffffff',
-    fontMode: 'roll',
-    fontArea: 'full',
-    fontAreaPercent: 0.25,
     rollTime: 0,
-    rolledDistance: 0,
-    top: 0
 }
 
 class Danmaku {
     constructor(options) {
-        // 弹幕容器（HTML 元素）
         this._container = options.container
-        // 容器宽度
         this._totalWidth = null
-        // 容器高度
         this._totalHeight = null
-        // 轨道高度
-        this._trackSize = options.trackSize || DEFAULT_TRACK_SIZE
-        // 队列轮询间隔
-        this._renderInterval = parseInt(options.renderInterval) || DEFAULT_RENDER_INTERVAL
-        // 队列轮询 setTimeout 计时器
+        this._trackSize = 12
         this._renderTimer = null
-        // 数据队列
         this._queue = []
-        // 轨道数据
         this._tracks = null
-        // 弹幕自编 id 累加器
         this._autoId = 0
-
-        // 初始化容器尺寸和轨道数据结构
+        this._paused = true
         this.resize()
         this._resetTracks()
+        console.log(this._container)
     }
 
-    // 弹幕容器大小变化时调用此方法
     resize() {
-        // 容器总宽度
         this._totalWidth = this._container.offsetWidth
-        // 容器总高度
         this._totalHeight = this._container.offsetHeight
-        // 避免当前屏的数据错乱，全部清掉
         this.clearScreen()
     }
 
-    // 清屏
     clearScreen() {
         this._clearDanmakuNodes()
         this._resetTracks()
     }
 
-    // 重置轨道数据
     _resetTracks() {
-        const count = Math.floor(this._totalHeight / this._trackSize)
+        const count = Math.floor(this._totalHeight / this._trackSize / 3)
         this._tracks = new Array(count)
         for (let i = 0; i < count; i++) {
             this._tracks[i] = []
@@ -81,7 +56,6 @@ class Danmaku {
         }
     }
 
-    // 清空所有播放中的弹幕节点
     _clearDanmakuNodes() {
         const nodes = []
         this._eachDanmakuNode((node) => {
@@ -92,14 +66,13 @@ class Danmaku {
         })
     }
 
-    // 数据解析与复制
     _parseData(data) {
         return Object.assign({
-            autoId: ++this._autoId
+            autoId: ++this._autoId,
+            fontSize: Math.floor(Math.random() * 20) + 20
         }, defaultDanmakuData, data)
     }
 
-    // 添加弹幕数据到队列
     add(data) {
         this._queue.push(this._parseData(data))
         // 如果队列轮询已经停止，则启动
@@ -187,6 +160,7 @@ class Danmaku {
 
     // 轮询渲染
     _render() {
+        if (this._paused) { return }
         try {
             this._renderToDOM()
         } finally {
@@ -195,11 +169,8 @@ class Danmaku {
     }
 
     _renderToDOM() {
-        // 根据轨道数量每次处理一定数量的弹幕数据
-        // 数量越大，弹幕越密集
-        let count = this._maxAmountPerRender || 500
+        let count = Math.floor(this._tracks.length / 3), i = 0
 
-        let i = 0
         while (count && i < this._queue.length) {
             const data = this._queue[i]
             let node = data.node
@@ -216,12 +187,6 @@ class Danmaku {
                 node.style.willChange = 'transform'
                 this._container.appendChild(node)
 
-                node.ontransitionend = (e) => {
-                    console.log(this._queue.length)
-                    // this._container.removeChild(node)
-                    this._queue = this._queue.filter(item => item.autoId != data.autoId)
-                }
-
                 data.useTracks = Math.ceil(node.offsetHeight / this._trackSize)
                 // 占用的轨道数多于轨道总数，则忽略此数据
                 if (data.useTracks > this._tracks.length) {
@@ -253,6 +218,7 @@ class Danmaku {
                 node.addEventListener('transitionend', () => {
                     this._removeFromTrack(data.y, data.autoId)
                     this._container.removeChild(node)
+                    this._queue = this._queue.filter(item => item.autoId != data.autoId)
                 }, false)
 
                 data.startTime = Date.now() + 80
@@ -262,7 +228,6 @@ class Danmaku {
                 i++
             }
 
-            // 处理一条，减掉一条
             count--
         }
     }
@@ -271,16 +236,54 @@ class Danmaku {
     // 轮询结束后，根据队列长度继续执行或停止执行
     _renderEnd() {
         if (this._queue.length > 0) {
-            this._renderTimer = setTimeout(() => {
+            this._renderTimer = requestAnimationFrame(() => {
                 this._render()
-            }, this._renderInterval)
+            })
         } else {
-            // 如果已经没有数据，就不再轮询了，等有数据时（add 方法中）再开启轮询
             this._renderTimer = null
         }
     }
-}
 
+    pause() {
+        if (this._resumeTimer) { clearTimeout(this._resumeTimer) }
+        if (this._renderTimer) {
+            clearTimeout(this._renderTimer)
+            this._renderTimer = null
+        }
 
+        if (this._paused) { return }
+        this._paused = true
 
+        this._eachDanmakuNode((node, y, id) => {
+            const data = this._findData(y, id)
+            if (data) {
+                // 获取已滚动距离
+                data.rolledDistance = -getTranslateX(node)
 
+                // 移除动画，计算出弹幕所在的位置，固定样式
+                node.style.transition = ''
+                node.style.transform = `translateX(-${data.rolledDistance}px)`
+            }
+        })
+    }
+
+    // 继续滚动弹幕
+    resume() {
+        if (!this._paused) { return }
+
+        this._eachDanmakuNode((node, y, id) => {
+            const data = this._findData(y, id)
+            if (data) {
+                data.startTime = Date.now()
+                // 重新计算滚完剩余距离需要多少时间
+                data.rollTime = (data.totalDistance - data.rolledDistance) / data.rollSpeed
+                node.style.transition = `transform ${data.rollTime}s linear`
+                node.style.transform = `translateX(-${data.totalDistance}px)`
+            }
+        })
+
+        this._paused = false
+
+        if (!this._renderTimer) { this._render() }
+    }
+}
\ No newline at end of file
diff --git a/docs/eplayer.js b/docs/eplayer.js
index 1530b40..5f5102c 100644
--- a/docs/eplayer.js
+++ b/docs/eplayer.js
@@ -4,37 +4,43 @@ class Eplayer extends HTMLElement {
     this.doms = {}
     this.src = this.getAttribute('src')
     this.type = this.getAttribute('type')
-    this.beatmap = this.getAttribute('beatmap')
-    this.height = this.getAttribute('height')
     this.live = JSON.parse(this.getAttribute('live'))
+    this.danmaku = null
 
     this.init()
     this.stream()
   }
 
   static get observedAttributes() {
-    return ['src', 'type', 'beatmap', 'height', 'live']
+    return ['src', 'type', 'danma', 'live']
   }
 
-  attributeChangedCallback(name, _, newVal) {
-    if (name === 'src') this.src = this.$('.video').src = newVal
-    if (name === 'type') this.type = newVal
-    if (name === 'beatmap') this.beatmap = newVal
-    if (name === 'height') this.height = newVal
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (name === 'src') {
+      this.src = this.$('.video').src = newVal
+      this.stream()
+      this.video.load()
+    }
+    if (name === 'type') {
+      this.type = newVal
+      this.stream()
+      this.video.load()
+    }
     if (name === 'live') {
       this.live = JSON.parse(newVal)
       if (this.live) {
         this.$('.progress').style.display = 'none'
         this.$('.time').style.display = 'none'
-      }else{
+      } else {
         this.$('.progress').style.display = 'block'
         this.$('.time').style.display = 'inline-block'
       }
     }
-
-    this.stream()
-    this.startMug()
-    this.video.load()
+    if (name === 'danma') {
+      this.danmaku.add({
+        msg: newVal
+      })
+    }
   }
 
   $(key) {
@@ -47,22 +53,6 @@ class Eplayer extends HTMLElement {
     this.$('.mark').classList.add('loading')
   }
 
-  startMug() {
-    if (!this.beatmap) return
-    this.$('.mug').innerHTML = '' // 先清空
-    this.$('.mug').style.display = 'block'
-    this.$('.mug').style.height = this.height + 'px'
-    this.$('.mug').style.width = (this.height / 8 * 5) + 'px'
-    this.$('.ep-video').style.display = 'none'
-    this.$('.controls').style.display = 'none'
-    if (!this.beatmap) return
-    const beats = this.beatmap.split('|').map(item => {
-      const [fps, button] = item.split(':')
-      return { fps, button }
-    })
-    new Mug(beats, this.$('.mug'), this.video)
-  }
-
   stream() {
     switch (this.type) {
       case 'hls':
@@ -76,7 +66,6 @@ class Eplayer extends HTMLElement {
   }
 
   mark() {
-    if (this.beatmap) return
     clearTimeout(this.timer)
     this.timer = setTimeout(() => this.play(), 200)
   }
@@ -89,13 +78,14 @@ class Eplayer extends HTMLElement {
   }
 
   play() {
-    if (this.beatmap) return
     if (this.video.paused) {
       this.video.play()
+      this.danmaku.resume()
       this.$('.ep-video').style.display = 'none'
       this.$('.is-play').classList.replace('ep-play', 'ep-pause')
     } else {
       this.video.pause()
+      this.danmaku.play()
       this.$('.ep-video').style.display = 'block'
       this.$('.is-play').classList.replace('ep-pause', 'ep-play')
     }
@@ -244,7 +234,6 @@ class Eplayer extends HTMLElement {
   }
 
   init() {
-    // console.log(this.beatmap)
     let html = `
       <style>
         @import "https://at.alicdn.com/t/c/font_836948_ro9xopmggai.css";
@@ -268,7 +257,6 @@ class Eplayer extends HTMLElement {
           overflow: hidden;
         }
         .controls{
-          display:${this.beatmap ? 'none' : 'block'};
           position:absolute;
           left:0;
           right:0;
@@ -416,7 +404,6 @@ class Eplayer extends HTMLElement {
         }
         .ep-video {
           position: absolute;
-          display:${this.beatmap ? 'none' : 'block'};
           bottom: 25px;
           right: 20px;
           font-size:40px;
@@ -455,24 +442,24 @@ class Eplayer extends HTMLElement {
             margin-left:-10px;
             display:inline-block;
         }
-        .mug {
-          height: ${this.height}px;
-          width: ${this.height / 8 * 5}px;
-          position: absolute;
-          z-index: 999;
-          /* pointer-events: none; */
-          transform: translate(-50%, -50%);
-          left: 50%;
-          top: 50%;
-          opacity: 0.95;
-         display: ${this.beatmap ? 'block' : 'none'}
-        }
+
         .wrap{
           position: relative;
         }
+
+        .danmaku {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      pointer-events: none;
+      overflow: hidden;
+      z-index: 999;
+    }
       </style>
       <div class="wrap">
-      <div class="mug"></div>
+      <div class="danmaku"></div>
       <div class="eplayer">
         <video id="video" class="video" src="${this.src || ''}"></video>
         <div class="mark loading"></div>
@@ -540,7 +527,7 @@ class Eplayer extends HTMLElement {
       '.panel',
       '.speed',
       '.pip',
-      '.mug'
+      '.danmaku'
     ]
 
     for (const key of doms) {
@@ -580,8 +567,10 @@ class Eplayer extends HTMLElement {
 
   mount() {
     this.video = this.$('.video')
-    this.mug = this.$('.mug')
     this.video.volume = 0.5
+    this.danmaku = new Danmaku({
+      container: this.$('.danmaku')
+    })
     // setVolume(this.video.volume * 10, this.$('.line'))
     this.video.onwaiting = this.waiting.bind(this)
     this.video.oncanplay = this.canplay.bind(this)
diff --git a/docs/index.html b/docs/index.html
index 5563f2a..59f0db4 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -70,63 +70,37 @@
   <script src="https://unpkg.com/@webcomponents/webcomponentsjs"></script>
   <script src="https://unpkg.com/hls.js"></script>
   <script src="./eplayer.js"></script>
-
-  <style>
-    body {
-      margin: 0;
-    }
-
-    .container {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      pointer-events: none;
-      overflow: hidden;
-      z-index: 999;
-    }
-  </style>
   <script>
     const container = document.querySelector('.container')
     const messages = [
-      '坚决同时打赢疫情防控和经济社会发展“两大战役”',
-      '国际社会高度评价中国为全球抗疫作出贡献',
-      '五粮液斥资25亿跨界造车，车标似酒杯售价不超8万',
-      '蔚来中国项目完成注资，今年已累计完成超百亿融资',
-      '老iPhone降速 苹果同意赔偿美国用户最多5亿美元',
-      '四门轿跑设计 比亚迪旗舰车"汉"车长近5米',
-      '虎牙创始人古丰加盟，百度直播跃进',
-      '印度宣布禁用59款中国应用，包括TikTok和微信',
-      '特斯拉德国厂三月底动工 马斯克将出席奠基仪式',
-      '特斯拉车主反映，中国本土制造生产的特斯拉Model3采用的控制器硬件代码与实际的环保信息随车清单不一致',
-      '特斯拉电池缺陷被曝隐瞒8年!品控问题"埋下"隐患',
-      '一颗小行星预计5月初飞掠地球 735万千米外与地球交会',
-      '比特币挖矿耗电惊人：每年耗电量等于智利全国耗电量',
-      '广州又出台新政刺激车市复苏，新能源车可获1万元补贴',
-      '《哥斯拉大战金刚》试映会好评不断！',
-      '《神奇女侠1984》编剧确认：《神奇女侠3》故事线将设定于现代',
-      '教育部：全国义务教育阶段辍学人数下降近99%',
+      '来了来了',
+      '沙发~',
+      '准时到达',
+      '发个弹幕见证一下',
+      'c站招募投稿君',
+      'c站招募主播',
+      'up主威武',
+      'c站发光发热',
+      '发一下弹幕菊花有不会坏',
+      '有人在吗',
+      '兄弟们又见面了',
       '哈哈哈哈哈',
       '呵呵呵',
       '嘻嘻'
     ]
 
-    const danmaku = new Danmaku({
-      container
-    })
-
-    init(danmaku, container)
 
-    function init(danmaku, container) {
+    function init(danmaku) {
       for (let i = 0; i < 100; i++) {
-        danmaku.add({
-          msg: messages[parseInt(Math.random() * messages.length)],
-          fontSize: Math.floor(Math.random() * 20) + 20
-        })
+        // danmaku.add({
+        //   msg: messages[parseInt(Math.random() * messages.length)],
+        //   fontSize: Math.floor(Math.random() * 20) + 20
+        // })
+        document.querySelector('e-player').setAttribute('danma', messages[parseInt(Math.random() * messages.length)])
       }
-
     }
+
+    init()
   </script>
   <!-- <script src="./pic.js"></script> -->
 </body>