remove files

.vuepress/components/DemoPlayer.vue

@@ -1,208 +1,305 @@
-
 <template>
-  <div class="root">
-    <div class="container-shell">
-      <div id="container" class="container" ref="container"></div>
-      <div class="input">
-        <div>输入URL：</div>
-        <input autocomplete="on" ref="playUrl" />
-        <button v-if="!playing" @click="play">播放</button>
-        <button v-else @click="stop">停止</button>
-        <button @click="fullscreen">全屏</button>
-        <button v-if="!quieting" @click="quiet">静音</button>
-        <button v-else @click="playAudio">声音</button>
-        <button @click="screenshots">截图</button>
-        <button @click="record">录像</button>
-        <div class="speed">速率：{{speed}}</div>
-      </div>
-      <div class="err" v-show="!playing">{{err}}</div>
-      <div class="option">
-        <span>缓冲:</span>
-        <input style="width:50px" type="number" ref="buffer" value="0.2" @change="changeBuffer">
-        <input type="checkbox" ref="wasm" @change="changeWasm"><span>wasm</span>
-        <select ref="vc" @change="changeVC">
-          <option selected>h264</option>
-          <option>h265</option>
-        </select>
-      </div>
+    <div class="root">
+        <div class="container-shell">
+            <div id="container" class="container" ref="container"></div>
+            <div class="input">
+                <div>输入URL：</div>
+                <input autocomplete="on" ref="playUrl"
+                       value=""/>
+                <button v-if="!playing" @click="play">播放</button>
+                <button v-else @click="pause">停止</button>
+            </div>
+            <div class="input" v-if="loaded">
+                <button @click="destroy">销毁</button>
+                <button @click="fullscreen">全屏</button>
+                <button @click="screenShot">截图</button>
+                <div style="line-height: 30px">
+                    <input type="checkbox" ref="operateBtns" v-model="showOperateBtns" @change="restartPlay"><span>操作按钮</span>
+                    <input type="checkbox" ref="operateBtns" v-model="showBandwidth" @change="restartPlay"><span>网速</span>
+                </div>
+
+            </div>
+            <div class="option">
+                <span>缓冲:</span>
+                <input style="width:50px" type="number" ref="buffer" value="0.2" @change="changeBuffer">
+                <input type="checkbox" ref="wasm" @change="changeWasm"><span>wasm</span>
+                <select ref="vc" @change="changeVC">
+                    <option selected>h264</option>
+                    <option>h265</option>
+                </select>
+                <input type="checkbox" ref="resize" @change="changeResize"><span>自适应</span>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 <script>
-import Jessibuca from "./renderer";
-export default {
-  name: "DemoPlayer",
-  props:{
-
-  },
-  data() {
-    return {
-      jessibuca: null,
-      wasm:false,
-      vc:"ff",
-      playing: false,
-      quieting:true, // mute
-      err: "",
-      speed:0
+    import Jessibuca from "./renderer";
+
+    export default {
+        name: "DemoPlayer",
+        props: {},
+        data() {
+            return {
+                jessibuca: null,
+                wasm: false,
+                vc: "ff",
+                playing: false,
+                loaded: false, // mute
+                showOperateBtns:false,
+                showBandwidth:false,
+                err: "",
+                speed: 0,
+                muting: true,
+            };
+        },
+        computed: {
+            decoder() {
+                return this.vc + (this.wasm ? "_wasm" : "") + ".js"
+            },
+            speedShow() {
+
+            }
+        },
+        watch: {
+            decoder(v) {
+                this.restartPlay();
+            }
+        },
+        mounted() {
+            this.create()
+            window.onerror = msg => (this.err = msg);
+        },
+        destroyed() {
+            this.jessibuca.destroy();
+        },
+        methods: {
+            create(options) {
+                options = options || {};
+                this.jessibuca = new Jessibuca(Object.assign({
+                    container: this.$refs.container,
+                    decoder: this.decoder,
+                    videoBuffer: Number(this.$refs.buffer.value),
+                    isResize: false,
+                    text: '',
+                    background: 'https://seopic.699pic.com/photo/40011/0709.jpg_wh1200.jpg',
+                    loadingText: '加载中',
+                    debug: true,
+                    showBandwidth: this.showBandwidth, // 显示网速
+                    operateBtns: {
+                        fullscreen: this.showOperateBtns,
+                        screenshot: this.showOperateBtns,
+                        play: this.showOperateBtns,
+                        audio: this.showOperateBtns
+                    }
+                }, options));
+                this.jessibuca.onLog = msg => console.log('onLog', msg);
+                this.jessibuca.onLoad = msg => console.log('onLoad');
+                this.jessibuca.onRecord = msg => console.log('onRecord', msg);
+                this.jessibuca.onPause = () => console.log('onPause');
+                this.jessibuca.onPlay = () => console.log('onPlay');
+                this.jessibuca.onFullscreen = msg => console.log('onFullscreen', msg);
+                this.jessibuca.onMute = msg => console.log('onMute', msg);
+                var _this = this;
+                this.jessibuca.on('load', function () {
+                    console.log('on load');
+                });
+
+                this.jessibuca.on('log', function (msg) {
+                    console.log('on log', msg);
+                });
+                this.jessibuca.on('record', function (msg) {
+                    console.log('on record:', msg);
+                });
+                this.jessibuca.on('pause', function () {
+                    console.log('on pause');
+                    _this.playing = false;
+                });
+                this.jessibuca.on('play', function () {
+                    console.log('on play');
+                    _this.playing = true;
+                });
+                this.jessibuca.on('fullscreen', function (msg) {
+                    console.log('on fullscreen', msg);
+                });
+
+                this.jessibuca.on('mute', function (msg) {
+                    console.log('on mute', msg);
+                });
+
+                this.jessibuca.on('mute', function (msg) {
+                    console.log('on mute2', msg);
+                });
+
+                this.jessibuca.on('audioInfo', function (msg) {
+                    console.log('audioInfo', msg);
+                });
+
+                this.jessibuca.on('bps', function (bps) {
+                    console.log('bps', bps);
+                });
+
+                this.jessibuca.on('audioInfo', function (info) {
+                    console.log('audioInfo', info);
+                });
+
+                this.jessibuca.on('videoInfo', function (info) {
+                    console.log('videoInfo', info);
+                })
+
+                this.jessibuca.on('error', function (error) {
+                    console.log('error', error)
+                });
+
+                this.jessibuca.on('timeout', function () {
+                    console.log('timeout');
+                });
+
+                console.log(this.jessibuca);
+            },
+            play() {
+                // this.jessibuca.onPlay = () => (this.playing = true);
+                this.jessibuca.on('play', () => {
+                    this.playing = true;
+                    this.loaded = true;
+                });
+
+
+                if (this.$refs.playUrl.value) {
+                    if (this.jessibuca.hasLoaded()) {
+                        this.jessibuca.play(this.$refs.playUrl.value);
+                    } else {
+                        this.jessibuca.on('load', () => {
+                            this.jessibuca.play(this.$refs.playUrl.value);
+                        })
+                    }
+                }
+            },
+            mute() {
+                this.jessibuca.mute();
+                this.muting = true;
+            },
+            cancelMute() {
+                this.jessibuca.cancelMute();
+                this.muting = false;
+            },
+
+            pause() {
+                this.jessibuca.pause();
+                this.playing = false;
+                this.err = "";
+            },
+
+            destroy() {
+                if (this.jessibuca) {
+                    this.jessibuca.destroy();
+                }
+                this.create();
+                this.playing = false;
+                this.loaded = false;
+            },
+
+            fullscreen() {
+                this.jessibuca.setFullscreen(true);
+            },
+
+            screenShot() {
+                this.jessibuca.screenshot();
+            },
+
+            changeVC() {
+                this.vc = ["ff", "libhevc_aac"][this.$refs.vc.selectedIndex]
+            },
+
+            changeWasm() {
+                this.wasm = this.$refs.wasm.checked
+            },
+
+            restartPlay() {
+                this.destroy();
+                this.play();
+            },
+
+            changeBuffer() {
+                this.jessibuca.setBufferTime(Number(this.$refs.buffer.value));
+            },
+
+            changeResize() {
+                const value = this.$refs.resize.checked ? 1 : 0;
+                this.jessibuca.setScaleMode(value);
+            }
+        }
     };
-  },
-  computed:{
-    decoder(){
-      return this.vc+(this.wasm?"_wasm":"")+".js"
-    },
-    speedShow(){
+</script>
+<style>
+    .root {
+        display: flex;
+        place-content: center;
+    }
+
+    .container-shell {
+        background: gray;
+        padding: 30px 4px 10px 4px;
+        border: 2px solid black;
+        width: auto;
+        position: relative;
+        border-radius: 5px;
+        box-shadow: 0 10px 20px;
+    }
+
+    .container-shell:before {
+        content: "jessibuca demo player";
+        position: absolute;
+        color: darkgray;
+        top: 4px;
+        left: 10px;
+        text-shadow: 1px 1px black;
+    }
+
+    .container {
+        background: rgb(13, 14, 27);
+        width: 640px;
+        height: 398px;
+    }
+
+    .input {
+        display: flex;
+        margin-top: 10px;
+        color: white;
+        place-content: stretch;
+    }
+
+    .input2 {
+        bottom: 0px;
+    }
+
+
+    .input input {
+        flex: auto;
+    }
 
+    .err {
+        position: absolute;
+        top: 40px;
+        left: 10px;
+        color: red;
     }
-  },
-  watch: {
-    decoder(v) {
-      if (this.jessibuca) {
-        this.jessibuca.destroy();
-      }
-      this.create()
-      this.playing = false;
+
+    .option {
+        position: absolute;
+        top: 4px;
+        right: 10px;
+        display: flex;
+        place-content: center;
+    }
+
+    .option span {
+        color: white;
     }
-  },
-  mounted() {
-    this.create()
-    window.onerror = msg => (this.err = msg);
-  },
-  destroyed() {
-    this.jessibuca.destroy();
-  },
-  methods: {
-    create(){
-      this.jessibuca = new Jessibuca({
-        container: this.$refs.container,
-        decoder: this.decoder,
-        videoBuffer: Number(this.$refs.buffer.value),
-        contextOptions:{
-          preserveDrawingBuffer:true // 是否保留缓冲区数据
+
+    @media (max-width: 720px) {
+        .container {
+            width: 90vw;
+            height: 52.7vw;
         }
-      });
-      this.jessibuca.onLog = msg=>(this.err=msg);
-    },
-    play() {
-      this.jessibuca.onPlay = () => (this.playing = true);
-      this.jessibuca.play(this.$refs.playUrl.value);
-      this.err = "loading";
-    },
-    stop() {
-      this.jessibuca.close();
-      this.playing = false;
-      this.err = "";
-    },
-    fullscreen() {
-      this.jessibuca.fullscreen = true;
-    },
-    quiet(){
-      this.quieting = true;
-      this.jessibuca.audioEnabled(false);
-    },
-    playAudio(){
-      this.quieting = false;
-      this.jessibuca.audioEnabled(true);
-    },
-    screenshots(){
-      if (!(this.jessibuca && this.jessibuca.canvasElement)) {
-        return;
-      }
-      const dataURL = this.jessibuca.canvasElement.toDataURL('image/png');
-      this._downloadImg(this._dataURLToFile(dataURL));
-    },
-    record(){
-
-    },
-    _dataURLToFile(dataURL){
-      const arr = dataURL.split(",");
-      const bstr = atob(arr[1]);
-      const type = arr[0].replace("data:", "").replace(";base64", "")
-      let n = bstr.length, u8arr = new Uint8Array(n);
-      while (n--) {
-        u8arr[n] = bstr.charCodeAt(n);
-      }
-      return new File([u8arr], 'file', {type});
-    },
-
-    _downloadImg(content){
-      const aLink = document.createElement("a");
-      aLink.download = '' + new Date().getTime();
-      aLink.href = URL.createObjectURL(content);
-      aLink.click();
-      URL.revokeObjectURL(content);
-    },
-
-    changeVC(){
-      this.vc = ["ff","libhevc_aac"][this.$refs.vc.selectedIndex]
-    },
-    changeWasm(){
-      this.wasm = this.$refs.wasm.checked
-    },
-    changeBuffer(){
-      this.jessibuca.decoderWorker.postMessage({ cmd: "setVideoBuffer", time: Number(this.$refs.buffer.value) })
     }
-  }
-};
-</script>
-<style>
-.root {
-  display: flex;
-  place-content: center;
-}
-.container-shell {
-  background: gray;
-  padding: 30px 4px 50px 4px;
-  border: 2px solid black;
-  width: auto;
-  position: relative;
-  border-radius: 5px;
-  box-shadow: 0 10px 20px;
-}
-.container-shell:before {
-  content: "jessibuca demo player";
-  position: absolute;
-  color: darkgray;
-  top: 4px;
-  left: 10px;
-  text-shadow: 1px 1px black;
-}
-.container {
-  background: rgb(13, 14, 27);
-  width: 640px;
-  height: 375px;
-}
-.input {
-  position: absolute;
-  display: flex;
-  bottom: 15px;
-  left: 10px;
-  right: 10px;
-  color: white;
-  place-content: stretch;
-}
-.input input {
-  flex: auto;
-}
-.err {
-  position: absolute;
-  top: 40px;
-  left: 10px;
-  color: red;
-}
-.option {
-  position: absolute;
-  top:4px;
-  right:10px;
-  display: flex;
-  place-content: center;
-}
-.option span{
-  color: white;
-}
-@media (max-width: 720px) {
-  .container {
-    width: 90vw;
-    height: 52.7vw;
-  }
-}
 </style>

.vuepress/components/DemoPlayer2.vue

@@ -1,271 +0,0 @@
-<template>
-    <div class="root">
-        <div class="container-shell">
-            <div id="container" class="container" ref="container"></div>
-            <div class="input">
-                <div>输入URL：</div>
-                <input autocomplete="on" ref="playUrl"
-                       value=""/>
-                <button v-if="!playing" @click="play">播放</button>
-                <button v-else @click="pause">停止</button>
-                <button @click="destroy">销毁</button>
-            </div>
-            <div class="option">
-                <span>缓冲:</span>
-                <input style="width:50px" type="number" ref="buffer" value="0.2" @change="changeBuffer">
-                <input type="checkbox" ref="wasm" @change="changeWasm"><span>wasm</span>
-                <select ref="vc" @change="changeVC">
-                    <option selected>h264</option>
-                    <option>h265</option>
-                </select>
-                <input type="checkbox" ref="resize" @change="changeResize"><span>自适应</span>
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-    import Jessibuca from "./renderer2";
-
-    export default {
-        name: "DemoPlayer",
-        props: {},
-        data() {
-            return {
-                jessibuca: null,
-                wasm: false,
-                vc: "ff",
-                playing: false,
-                quieting: true, // mute
-                err: "",
-                speed: 0,
-                muting: true,
-            };
-        },
-        computed: {
-            decoder() {
-                return this.vc + (this.wasm ? "_wasm" : "") + ".js"
-            },
-            speedShow() {
-
-            }
-        },
-        watch: {
-            decoder(v) {
-                if (this.jessibuca) {
-                    this.jessibuca.destroy();
-                }
-                this.create()
-                this.playing = false;
-            }
-        },
-        mounted() {
-            this.create()
-            window.onerror = msg => (this.err = msg);
-        },
-        destroyed() {
-            this.jessibuca.destroy();
-        },
-        methods: {
-            create() {
-                this.jessibuca = new Jessibuca({
-                    container: this.$refs.container,
-                    decoder: this.decoder,
-                    videoBuffer: Number(this.$refs.buffer.value),
-                    isResize: false,
-                    text: '',
-                    background: 'https://seopic.699pic.com/photo/40011/0709.jpg_wh1200.jpg',
-                    loadingText: '加载中',
-                    debug: true,
-                    // isFullResize: true
-                });
-                // this.jessibuca.setScaleMode(2);
-                // this.jessibuca.setBufferTime(0.3);
-                this.jessibuca.onLog = msg => console.log('onLog', msg);
-                this.jessibuca.onLoad = msg => console.log('onLoad');
-                this.jessibuca.onRecord = msg => console.log('onRecord', msg);
-                this.jessibuca.onPause = () => console.log('onPause');
-                this.jessibuca.onPlay = () => console.log('onPlay');
-                this.jessibuca.onFullscreen = msg => console.log('onFullscreen', msg);
-                this.jessibuca.onMute = msg => console.log('onMute', msg);
-                var _this = this;
-                this.jessibuca.on('load', function () {
-                    console.log('on load');
-                });
-
-                this.jessibuca.on('log', function (msg) {
-                    console.log('on log', msg);
-                });
-                this.jessibuca.on('record', function (msg) {
-                    console.log('on record:', msg);
-                });
-                this.jessibuca.on('pause', function () {
-                    console.log('on pause');
-                    _this.playing = false;
-                });
-                this.jessibuca.on('play', function () {
-                    console.log('on play');
-                    _this.playing = true;
-                });
-                this.jessibuca.on('fullscreen', function (msg) {
-                    console.log('on fullscreen', msg);
-                });
-
-                this.jessibuca.on('mute', function (msg) {
-                    console.log('on mute', msg);
-                });
-
-                this.jessibuca.on('mute', function (msg) {
-                    console.log('on mute2', msg);
-                });
-
-                this.jessibuca.on('audioInfo', function (msg) {
-                    console.log('audioInfo', msg);
-                });
-
-                this.jessibuca.on('bps', function (bps) {
-                    console.log('bps', bps);
-                });
-
-                this.jessibuca.on('audioInfo', function (info) {
-                    console.log('audioInfo', info);
-                });
-
-                this.jessibuca.on('videoInfo', function (info) {
-                    console.log('videoInfo', info);
-                })
-
-                this.jessibuca.on('error', function (error) {
-                    console.log('error', error)
-                });
-
-                this.jessibuca.on('timeout', function () {
-                    console.log('timeout');
-                });
-
-                // if(this.jessibuca.hasLoaded()){
-                //     this.jessibuca.play('url')
-                // }
-                // else {
-                //     this.jessibuca.onLoad = function () {
-                //         this.jessibuca.play('url')
-                //     }
-                // }
-
-
-                console.log(this.jessibuca);
-            },
-            play() {
-                this.jessibuca.onPlay = () => (this.playing = true);
-                if (this.$refs.playUrl.value) {
-                    this.jessibuca.play(this.$refs.playUrl.value);
-                }
-            },
-            mute() {
-                this.jessibuca.mute();
-                this.muting = true;
-            },
-            cancelMute() {
-                this.jessibuca.cancelMute();
-                this.muting = false;
-            },
-
-            pause() {
-                this.jessibuca.pause();
-                this.playing = false;
-                this.err = "";
-            },
-
-            destroy(){
-              this.jessibuca.destroy();
-            },
-
-            changeVC() {
-                this.vc = ["ff", "libhevc_aac"][this.$refs.vc.selectedIndex]
-            },
-
-            changeWasm() {
-                this.wasm = this.$refs.wasm.checked
-            },
-
-            changeBuffer() {
-                this.jessibuca.setBufferTime(Number(this.$refs.buffer.value));
-            },
-
-            changeResize(){
-                this.jessibuca._opt.isResize = this.$refs.resize.checked;
-                this.jessibuca.resize();
-            }
-        }
-    };
-</script>
-<style>
-    .root {
-        display: flex;
-        place-content: center;
-    }
-
-    .container-shell {
-        background: gray;
-        padding: 30px 4px 50px 4px;
-        border: 2px solid black;
-        width: auto;
-        position: relative;
-        border-radius: 5px;
-        box-shadow: 0 10px 20px;
-    }
-
-    .container-shell:before {
-        content: "jessibuca demo player";
-        position: absolute;
-        color: darkgray;
-        top: 4px;
-        left: 10px;
-        text-shadow: 1px 1px black;
-    }
-
-    .container {
-        background: rgb(13, 14, 27);
-        width: 640px;
-        height: 398px;
-    }
-
-    .input {
-        position: absolute;
-        display: flex;
-        bottom: 15px;
-        left: 10px;
-        right: 10px;
-        color: white;
-        place-content: stretch;
-    }
-
-    .input input {
-        flex: auto;
-    }
-
-    .err {
-        position: absolute;
-        top: 40px;
-        left: 10px;
-        color: red;
-    }
-
-    .option {
-        position: absolute;
-        top: 4px;
-        right: 10px;
-        display: flex;
-        place-content: center;
-    }
-
-    .option span {
-        color: white;
-    }
-
-    @media (max-width: 720px) {
-        .container {
-            width: 90vw;
-            height: 52.7vw;
-        }
-    }
-</style>

player.md

@@ -1,7 +1,7 @@
 ---
 sidebar: false
 ---
-<DemoPlayer2/>
+<DemoPlayer/>
 - 支持3种格式：
 1. ws-raw 即ws://localhost/live/test (该协议只能对接[monibuca服务器](https://monibuca.com))
 2. ws-flv 即ws://localhost/live/test.flv