@shijiu/jsview-vue 2.1.5 → 2.1.23

package/utils/JsViewPlugin/JsvPlayer/JsvPlayerBrowser.vue

@@ -0,0 +1,505 @@
+<script>
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
+import playerExMethods from "./JsvMediaBrowserInterface.js";
+import { shallowRef } from "vue";
+
+let logDebug = console.log;
+
+export default {
+  props: {
+    /**
+     * 回调函数，播放器对象通知接口
+     * @param {Object} video对象，可以通过此video对象调用video相关属性和方法，具体属性和方法定义见JsvMedia.js文件里相关说明。
+     */
+    onRef: { type: Function, default: () => {} },
+    /**
+     * 属性，Boolean类型，true表示自动播放，默认false。
+     */
+    autoplay: { type: Boolean, default: false },
+    /**
+     * 属性，String类型，播放器实例索引，同样的key使用同一个播放器实例。
+     */
+    playerKey: { type: String, default: null },
+    /**
+     *  属性，String类型，播放器窗口模式，默认resizable模式。
+     *                  full：观影模式，全屏方式，不建议修改w/h/l/t，视频清晰度/流畅度最佳；
+     *                  resizable：可变窗口模式，可以随意修改w/h/l/t，支持动画效果，视频清晰度/流畅度表现可能不如full模式；
+     *                  pip：画中画模式，只在支持多路硬解的情况下使用，用户画中画的小窗播放，对清晰度/流畅度要求较差，可能会有反交错问题。
+     */
+    windowMode: { type: String, default: "resizable" },
+    /**
+     * 属性，int类型，底层使用的播放器类型。1：系统播放器；2:jsv播放器。默认2。
+     */
+    playerType: { type: Number, default: 2 },
+    /**
+     * 属性，int类型，播放器解码方式。0：根据硬件能力自动匹配；1:硬解码；2:软解码。默认0（根据芯片能力自动匹配）。
+     */
+    decodeType: { type: Number, default: 0 },
+    /**
+     * 属性，Boolean类型，层级关系，true表示在界面的下面，false表示在界面上面，默认true。
+     */
+    background: { type: Boolean, default: true },
+    /**
+     * 属性，Boolean类型，true表示静音，默认false。
+     */
+    muted: { type: Boolean, default: false },
+    /**
+     * 属性，Boolean类型，true表示循环播放，默认false。
+     */
+    loop: { type: Boolean, default: false },
+    /**
+     * 属性，String类型，播放地址。
+     */
+    src: { type: String, default: "" },
+    /**
+     * 属性，Double类型，起播时间，0-duration。
+     */
+    currentTime: { type: Number, default: 0 },
+    /**
+     * 属性，Boolean类型，是否保留最后一帧，true保留，false不保留。
+     */
+    keepLastFrame: { type: Boolean, default: true },
+    /**
+     * 属性，String类型，视频显示比例，origin原始比例显示，full全屏显示，x:y按照指定比例显示。
+     */
+    videoAspectRatio: { type: String, default: "origin" },
+    /**
+     * 属性，JSON Object类型，色度抠像参数，包含color，colorDistance，edgeDistance，greenOffset四个参数，
+     * 参考格式：{color: 0x30FF30, colorDistance: 0.15, edgeDistance: 0.4, greenOffset: 0.05}
+     *          color，色值，int类型，为抠图色值范围的中心点，格式为0xRRGGBB。
+     *          colorDistance，float类型，色域范围，范围0-1.0。
+     *          edgeDistance，float类型，alpha透明度距离，范围colorDistance-1.0，从colorDistance到edgeDistance的alpha值从1.0-0线性递减。
+     *          greenOffset，float类型，红蓝差值，范围0-1.0。
+     * 目前只支持扣绿。
+     */
+    chromaKey: { type: Object, default: null },
+    /**
+     * 回调函数，播放结束时通过此回调接口通知。
+     */
+    onEnded: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，播放错误时通过此接口通知。
+     * @param {int} 错误类型，当前定义了四种错误。1是异常中断；2是网络错误；3是解码错误；4是格式不支持。
+     */
+    onError: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    // onAbort: {type: Function, default: ()=>{return{}}},
+    /**
+     * 回调函数，当正常播放时，每0.5秒上报一次，回调接口里会带上当前时间，也可以使用video对象的currentTime属性去获取当前时间。
+     * @param {Long} 当前播放时间，单位秒。
+     */
+    onTimeUpdate: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，开始加载，设置完播放地址后，上报此事件。
+     */
+    onLoadStart: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，开始正常播放，同一个播放地址仅触发一次。
+     */
+    onCanPlayThrough: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，正常下载，duration不变的情况下只触发一次。
+     */
+    onProgress: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，视频准备好后触发。
+     */
+    onLoadedMetaData: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，视频准备好后触发，这个时候可以正常seek。
+     */
+    onLoad: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，视频准备好后触发，这个时候可以获取duration。
+     */
+    onDurationChange: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，视频准备好后，seek（修改currentTime）会出发此事件。
+     */
+    onSeeking: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，seek完成后触发此事件。
+     */
+    onSeeked: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，缓冲时触发。
+     */
+    onStalled: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，正常播放后触发。
+     */
+    onPlaying: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，正常显示后触发此事件。
+     */
+    onCanPlay: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，音频失去焦点后触发此事件，可能会导致pause（点播）或者离开频道（直播）。
+     */
+    onAudioFocusLoss: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，音频获取焦点后触发此事件，可能会触发resume（点播）或者加入频道（直播）。
+     */
+    onAudioFocusGain: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，直播进入时移状态时，触发此事件。
+     */
+    onTimeShift: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，直播进入时移状态时，成功播放触发此事件。
+     */
+    onTimeShifted: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，时移回到直播状态，触发此事件。
+     */
+    onBackLive: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，时移回到直播状态时，成功播放触发此事件。
+     */
+    onBackLived: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 属性，Object类型，设置窗口属性，同其他组件的style设置。
+     */
+    style: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 属性，Boolean类型，活跃状态，当多个JsvPlayer组件指向一个video对象时，只能有一个处于活跃状态。
+     * 视频显示在活跃JsvPlayer设置的显示区域内，事件通知也只会送给活跃的JsvPlayer组件注册的回调函数。
+     */
+    active: { type: Boolean, default: true },
+  },
+  components: {},
+  watch: {
+    active(newValue) {
+      console.log("LudlDebug active newValue: " + newValue);
+      if (this.video) {
+        if (newValue) {
+          this.registerEvent();
+          this.video.setHoleID(this.holeId);
+          this.holeStyle = {
+            left: 0,
+            top: 0,
+            width: this.style.width,
+            height: this.style.height,
+          };
+        } else {
+          this.holeStyle = {
+            left: 0,
+            top: 0,
+            width: 0,
+            height: 0,
+          };
+        }
+      }
+    },
+    style(newValue) {
+      logDebug(
+        "holeStyle newValue: left=" +
+          newValue.left +
+          ", top=" +
+          newValue.top +
+          ", width=" +
+          newValue.width +
+          ", height=" +
+          newValue.height
+      );
+      if (this.active) {
+        this.holeStyle = {
+          left: 0,
+          top: 0,
+          width: newValue.width,
+          height: newValue.height,
+        };
+      }
+    },
+    keepLastFrame(newValue) {
+      logDebug("keepLastFrame newValue: " + newValue);
+      if (this.video && this.active) {
+        this.video.keepLastFrame = this.keepLastFrame;
+      }
+    },
+  },
+
+  setup() {
+    return {
+      video: null,
+      holeId: "",
+      jsvMainView: shallowRef(null),
+      innerViewId: shallowRef(-1),
+    };
+  },
+
+  data() {
+    return {
+      holeStyle: {},
+    };
+  },
+  created() {},
+  mounted() {
+    logDebug("JsvPlayer:", this.style);
+
+    let key = "Jsv_" + Math.floor(Math.random() * 10000);
+    if (this.playerKey) {
+      key = this.playerKey;
+    }
+    logDebug("player key:" + key);
+
+    let player_type = 1;
+    if (this.playerType) player_type = this.playerType;
+
+    let background = true;
+    if (!this.background) background = this.background;
+
+    logDebug("JsvPlayer background:" + background);
+
+    const designMap = window.Forge.DesignMap();
+    logDebug("JsvPlayer:", this.holeId);
+
+    // this.video = findMediaObjectByKey(key);
+    // TODO: 后续支持共享MediaId ?
+    let first_create = true;
+
+    if (!this.video) {
+      // 创建PC版本的video标签
+      this.video = window.originDocument.createElement("video");
+      this._extendsApi(this.video);
+    } else {
+      this.video.setRef();
+      first_create = false;
+    }
+
+    if (this.video != null) {
+      if (this.active) {
+        this.registerEvent();
+
+        //if(first_create){
+        if (this.src && this.src !== "") this.video.src = this.src;
+
+        if (this.currentTime !== 0) this.video.currentTime = this.currentTime;
+
+        if (this.autoplay) {
+          this.video.autoplay = this.autoplay;
+        }
+
+        if (this.muted) {
+          this.video.muted = this.muted;
+        }
+
+        if (this.loop) {
+          this.video.loop = this.loop;
+        }
+
+        if (!this.keepLastFrame) {
+          this.video.keepLastFrame = this.keepLastFrame;
+        }
+
+        if (this.videoAspectRatio !== "origin") {
+          this.video.videoAspectRatio = this.videoAspectRatio;
+        }
+
+        if (this.chromaKey && this.chromaKey !== "") {
+          this.video.setChromaKey(this.chromaKey);
+        }
+        //}else{
+        if (!first_create) {
+          this.video.setHoleID(this.holeId);
+          this.holeStyle = {
+            left: 0,
+            top: 0,
+            width: this.style.width,
+            height: this.style.height,
+          };
+        }
+      }
+
+      // 创建挂载的VideoView
+      this.jsvMainView = new Forge.VideoView(this.video, null);
+      this.innerViewId = Forge.sViewStore.add(
+        new Forge.ViewInfo(this.jsvMainView)
+      );
+
+      this.onRef?.(this.video);
+    }
+  },
+
+  unmounted() {
+    if (this.video != null) {
+      // 清理View管理缓存
+      if (this.innerViewId !== -1) {
+        Forge.sViewStore.remove(this.innerViewId);
+        this.innerViewId = -1;
+        this.jsvMainView = null;
+      }
+      this.onRef?.(null);
+    }
+  },
+
+  methods: {
+    getHoleId(id) {
+      logDebug("getHoleId:", id);
+      this.holeId = id;
+    },
+    registerEvent() {
+      if (this.video && this.active) {
+        this.video.addEventListener("end", this.onEnded);
+        this.video.addEventListener("error", this.onError);
+        //this.video.addEventListener("abort", this.onAbort);
+        this.video.addEventListener("timeupdate", this.onTimeUpdate);
+        this.video.addEventListener("loadstart", () => {
+          logDebug("JsvPlayer received loadstart event.");
+          this.holeStyle = {
+            left: 0,
+            top: 0,
+            width: this.style.width,
+            height: this.style.height,
+          };
+          this.onLoadStart();
+        });
+        this.video.addEventListener("canplaythrough", this.onCanPlayThrough);
+        this.video.addEventListener("progress", this.onProgress);
+        this.video.addEventListener("loadedmetadata", this.onLoadedMetaData);
+        this.video.addEventListener("load", this.onLoad);
+        this.video.addEventListener("durationchange", this.onDurationChange);
+        this.video.addEventListener("seeking", this.onSeeking);
+        this.video.addEventListener("seeked", this.onSeeked);
+        this.video.addEventListener("stalled", this.onStalled);
+        this.video.addEventListener("playing", this.onPlaying);
+        this.video.addEventListener("canplay", this.onCanPlay);
+        this.video.addEventListener("audiofocusloss", this.onAudioFocusLoss);
+        this.video.addEventListener("audiofocusgain", this.onAudioFocusGain);
+        this.video.addEventListener("timeshift", this.onTimeShift);
+        this.video.addEventListener("timeshifted", this.onTimeShifted);
+        this.video.addEventListener("backlive", this.onBackLive);
+        this.video.addEventListener("backlived", this.onBackLived);
+      }
+    },
+    _extendsApi(videoRef) {
+      // 补充插件扩展出来的接口
+      for (let method_name in playerExMethods) {
+        videoRef[method_name] = playerExMethods[method_name].bind(videoRef);
+      }
+    },
+  },
+};
+
+//export default JsvPlayer;
+</script>
+
+<template>
+  <div :style="holeStyle" backgroundColor="rgba(0,0,0,1)">
+    <div
+      :style="{
+        left: holeStyle.left,
+        top: holeStyle.top,
+        width: holeStyle.width,
+        height: holeStyle.height,
+      }"
+      :data-jsv-vw-innerview="innerViewId"
+    />
+  </div>
+</template>
+
+<style scoped></style>

package/utils/JsViewPlugin/JsvPlayer/index-0.9.js

@@ -0,0 +1,60 @@
+//考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
+import { default as JsvPlayer }  from "./JsvPlayer.vue";
+import { globalLoadJsvPlayerPlugin as initPlugin } from "./JsvMedia.js"
+import { globalPreLoadJsvPlayerPlugin as preLoadPlugin } from "./JsvMedia.js"
+import { getJsvPlayerCapabilitySet as getCapabilitySet } from "./JsvMedia.js"
+import { setJsvPlayerDebugMode as setDebugMode } from "./JsvMedia.js"
+import { getJsvPlayerRunningNum as getRunningPlayerNum } from "./JsvMedia.js"
+import { globalLoadSetOperator as setOperator } from "./JsvMedia.js"
+import {default as BrowserPlayer} from "./JsvPlayerBrowser-0.9.vue"
+let _JsvPlayer = JsvPlayer;
+
+let globalLoadJsvPlayerPlugin = initPlugin;
+let globalPreLoadJsvPlayerPlugin = preLoadPlugin;
+let getJsvPlayerCapabilitySet = getCapabilitySet;
+let setJsvPlayerDebugMode = setDebugMode;
+let getJsvPlayerRunningNum = getRunningPlayerNum;
+let globalLoadSetOperator = setOperator;
+
+if (window.jsvIsBrowserDebug) {
+    // const BrowserPlayer =  await import("./JsvPlayerBrowser.vue");
+    // 浏览器版本
+    _JsvPlayer = BrowserPlayer;
+
+    // 为Browser重新定义初始化处理
+    globalLoadJsvPlayerPlugin = (listener) => {
+        console.log("Loading player plugin");
+        setTimeout(()=>{listener()}, 0);
+    }
+
+    globalPreLoadJsvPlayerPlugin = (listener) => {
+        console.log("Preloading player plugin");
+        setTimeout(()=>{listener()}, 0);
+    }
+
+    getJsvPlayerCapabilitySet = () => {
+        return null;
+    }
+
+    setJsvPlayerDebugMode = () => {
+        console.log("Set debug mode");
+    }
+
+    getJsvPlayerRunningNum = () => {
+        return -1;
+    }
+
+    globalLoadSetOperator = (operator)=>{
+        console.log("operator is "+operator);
+    }
+}
+
+export {
+    _JsvPlayer as JsvPlayer,
+    globalLoadJsvPlayerPlugin, // 全局初始化播放器插件处理
+    globalPreLoadJsvPlayerPlugin, //预加载播放器插件
+    getJsvPlayerCapabilitySet, //获取设备能力集
+    setJsvPlayerDebugMode, //设置调试模式，可以查看帧率等信息
+    getJsvPlayerRunningNum, //获取正在运行的播放器个数
+    globalLoadSetOperator,// 设置运营商
+}

package/utils/JsViewPlugin/JsvPlayer/index.js

@@ -0,0 +1,59 @@
+//考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
+import { default as JsvPlayer }  from "./JsvPlayer.vue";
+import { globalLoadJsvPlayerPlugin as initPlugin } from "./JsvMedia.js"
+import { globalPreLoadJsvPlayerPlugin as preLoadPlugin } from "./JsvMedia.js"
+import { getJsvPlayerCapabilitySet as getCapabilitySet } from "./JsvMedia.js"
+import { setJsvPlayerDebugMode as setDebugMode } from "./JsvMedia.js"
+import { getJsvPlayerRunningNum as getRunningPlayerNum } from "./JsvMedia.js"
+import { globalLoadSetOperator as setOperator } from "./JsvMedia.js"
+let _JsvPlayer = JsvPlayer;
+
+let globalLoadJsvPlayerPlugin = initPlugin;
+let globalPreLoadJsvPlayerPlugin = preLoadPlugin;
+let getJsvPlayerCapabilitySet = getCapabilitySet;
+let setJsvPlayerDebugMode = setDebugMode;
+let getJsvPlayerRunningNum = getRunningPlayerNum;
+let globalLoadSetOperator = setOperator;
+
+if (window.jsvIsBrowserDebug) {
+    const BrowserPlayer =  await import("./JsvPlayerBrowser.vue");
+    // 浏览器版本
+    _JsvPlayer = BrowserPlayer.default;
+
+    // 为Browser重新定义初始化处理
+    globalLoadJsvPlayerPlugin = (listener) => {
+        console.log("Loading player plugin");
+        setTimeout(()=>{listener()}, 0);
+    }
+
+    globalPreLoadJsvPlayerPlugin = (listener) => {
+        console.log("Preloading player plugin");
+        setTimeout(()=>{listener()}, 0);
+    }
+
+    getJsvPlayerCapabilitySet = () => {
+        return null;
+    }
+
+    setJsvPlayerDebugMode = () => {
+        console.log("Set debug mode");
+    }
+
+    getJsvPlayerRunningNum = () => {
+        return -1;
+    }
+
+    globalLoadSetOperator = (operator)=>{
+        console.log("operator is "+operator);
+    }
+}
+
+export {
+    _JsvPlayer as JsvPlayer,
+    globalLoadJsvPlayerPlugin, // 全局初始化播放器插件处理
+    globalPreLoadJsvPlayerPlugin, //预加载播放器插件
+    getJsvPlayerCapabilitySet, //获取设备能力集
+    setJsvPlayerDebugMode, //设置调试模式，可以查看帧率等信息
+    getJsvPlayerRunningNum, //获取正在运行的播放器个数
+    globalLoadSetOperator,// 设置运营商
+}

package/utils/JsViewPlugin/JsvPlayer/version.mjs

@@ -0,0 +1,18 @@
+let PluginInfo = {
+    // downloadUrl:"http://192.168.0.101:8080/plugin/JsvPlayer-214.zip", //插件下载地址
+    packageName:"com.qcode.jsvplayer",
+    name:"播放器插件",
+    version:"2.1.4",  //插件需要的版本号
+    versionCodeMin:214,
+    versionCodeMax:214,
+    bridgeName:"jsvPlayerBridge", //插件bridge注册到jsview的名称
+    className:"com.qcode.jsvplayer.JsvPlayer",  //插件初始化类名称
+    initMethod:"createInstance",   //插件初始化方法
+    listener:"top.JsvPlayerPluginLoadResult",  //插件加载结果回调
+    listener2: "top.JsvPlayerPluginStatus",
+    // debug:true,
+    md5:"6443d073696fe73818ca7b7d19b3591c"
+};
+
+// 导出字段要含有 pluginVersionInfo 信息，作为npm时版本参考
+export default PluginInfo;

package/utils/JsViewPlugin/index.js

@@ -1,2 +1,3 @@
 export { default as JsvAccount } from "./JsvAccount/JsvAccount";
+export * from "./JsvPlayer";
 export * from "./JsvAudio";

package/utils/JsViewVueTools/JsvRuntimeBridge.js

@@ -422,11 +422,12 @@ function closeWarmedView(view_refer_id) {
 
 /**
  * 触发预下载内核
- * @param {String} core_version 带branch(主分支版本不带此信息)和版本信息的内核版本, 
+ * @param {string} core_version 带branch(主分支版本不带此信息)和版本信息的内核版本, 
  *                              例如: 1021265_release_build_xxx
+ * @returns promise 对象，用于监听下载完成与下载失败
  */
-function preDownloadCore(core_version){
-    return direct_call("preDownloadCore", core_version);
+function preDownloadSdk(core_version){
+    return direct_call("preDownloadSdk", core_version);
 }
 
 // 显示声明，可以提高执行速度和利用上编辑器的成员名提示功能
@@ -460,7 +461,7 @@ const bridge = {
     warmUpView,
     warmLoadView,
     closeWarmedView,
-    preDownloadCore
+    preDownloadSdk
 };
 
 export {