Explorar el Código

更换播放器,改为ckplayer

liuwei hace 4 años
padre
commit
9a03cc60f5
Se han modificado 3 ficheros con 46 adiciones y 5 borrados
  1. 1 0
      src/index.ejs
  2. 13 5
      src/renderer/components/BigShow.vue
  3. 32 0
      src/renderer/components/ckplayer.vue

+ 1 - 0
src/index.ejs

@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>vedio_app</title>
+    <script src="./static/ckplayer/ckplayer/ckplayer.js"></script>
     <% if (htmlWebpackPlugin.options.nodeModules) { %>
       <!-- Add `node_modules/` to global paths so `require` works properly in development -->
       <script>

+ 13 - 5
src/renderer/components/BigShow.vue

@@ -31,14 +31,20 @@
                     @resizestop="(size) => resizeSignal(size,itemV,bigScreenObj,curOpeBigscreenId)"
             >
                 <div ref="signal" :id="itemV.ID" style="width:100%;height:100%;overflow: hidden">
-                    <VideoPlayer
+                    <ckplayer
+
+                    />
+                    <div class="signalName">{{itemV.deviceName}}</div>
+                    <div class="closeBtn" @click.stop="closeSignal(itemV)">×</div>
+
+                    <!--<VideoPlayer
                             ref="videoPlayer"
                             :options="videoPlayObj[itemV.sourceId]"
                             :playsinline="true"
                             :style="scaleFun(itemV)"
                     />
                     <div class="signalName">{{itemV.deviceName}}</div>
-                    <div class="closeBtn" @click.stop="closeSignal(itemV)">×</div>
+                    <div class="closeBtn" @click.stop="closeSignal(itemV)">×</div>-->
                 </div>
             </VueDragResize>
 
@@ -58,7 +64,8 @@
     import '../assets/less/splitscreen.less'
     import {elePosition, getElementLeft, getElementTop, getStaticFile, guId} from "../../utils/tools"
     import {reqPreviewSourceList, reqRefreshView} from "../api"
-    import VideoPlayer from "./player.vue"
+    // import VideoPlayer from "./player.vue"
+    import ckplayer from "./ckplayer"
 
     export default {
         data() {
@@ -90,7 +97,8 @@
         components: {
             draggable,
             VueDragResize,
-            VideoPlayer
+            // VideoPlayer,
+            ckplayer
         },
 
         created() {
@@ -187,7 +195,7 @@
 
             // 大屏初始化
             async initBigScreen() {
-                VideoPlayer.methods.dispose()
+                // VideoPlayer.methods.dispose()
                 // 先获取上次的视频对象信息
                 let bigscreenObj = this.$store.state.bigScreenObj
                 // 加载大屏json文件

+ 32 - 0
src/renderer/components/ckplayer.vue

@@ -0,0 +1,32 @@
+<template>
+    <div id="video"></div>
+</template>
+
+<script>
+    export default {
+        name: 'ckplayerPlugin',
+        data () {
+            return {
+                videoObject: {
+                    /*width: 1015, // 宽度,也可以支持百分比(不过父元素宽度要有)
+                    height: 574, // 高度,也可以支持百分比*/
+                    container: "#video", //“#”代表容器的ID,“.”或“”代表容器的class
+                    variable: "player", //该属性必需设置,值等于下面的new chplayer()的对象
+                    autoplay: true, //自动播放
+                    live: true,
+                    video: "rtmp://58.200.131.2:1935/livetv/hunantv", //视频地址(必填),
+                }
+            }
+        },
+        mounted: function(){
+            // 定义一个对象
+            let player = new ckplayer(this.videoObject);
+        }
+    }
+</script>
+
+<style scoped>
+    #video {
+
+    }
+</style>