@shijiu/jsview-vue 2.3.151-test.0 → 2.3.728-alpha.0

package/utils/JsViewPlugin/JsvPlayer/JsvPlayer.vue

@@ -1,501 +1,396 @@
 <script>
-import {
-  JsvMediaVideo,
-  JsvMediaAudio,
-  findMediaObjectByKey,
-  logDebug,
-} from "./JsvMedia";
-import { JsvNativeSharedDiv } from "../../JsViewVueWidget";
+import {JsvMediaVideo, JsvMediaAudio, findMediaObjectByKey, logDebug} from './JsvMedia.js'
+import {JsvNativeSharedDiv} from 'jsview'
+export * from "./JsvMedia.js"
 
 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视频播放器；3: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 },
-    corner: { type: Number, default: 0 },
-  },
-  components: {
-    JsvNativeSharedDiv,
-  },
-  watch: {
-    active(newValue) {
-      logDebug("active newValue: " + newValue);
-      if (this.video && this.playerType !== 3) {
-        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.playerType !== 3) {
-        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;
-      }
-    },
-  },
+	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视频播放器；3:jsv音频播放器；4: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"},
+		/**
+		 * 属性，String类型，色度抠像参数，包含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: String, default: ""},
+		/**
+		 * 回调函数，播放结束时通过此回调接口通知。
+		 */
+		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{}}},
+		/**
+		 * 回调函数，当流播放错误时，重试的时候发送此事件，用于上报log使用。
+		 */
+		onStreamChanged: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，当短视频修改播放地址，真正执行修改动作时，触发此事件。
+		 */
+		onChangeUrlComplete: {type: Function, default: ()=>{return {}}},
+		/**
+		 * 回调函数，当短视频修改播放地址，开始起播时，触发此事件。
+		 */
+		onChangeUrlRenderStart: {type: Function, default: ()=>{return {}}},
+		/**
+		 * 回调函数，当短视频修改播放地址，开始起播时，触发此事件。
+		 */
+		onSizeChangeError: {type: Function, default: ()=>{return {}}},
+		/**
+		 * 属性，Object类型，设置窗口属性，同其他组件的style设置。
+		 */
+		style: {type: Object, default: ()=>{return{}}},
+		/**
+		 * 属性，Boolean类型，活跃状态，当多个JsvPlayer组件指向一个video对象时，只能有一个处于活跃状态。
+		 * 视频显示在活跃JsvPlayer设置的显示区域内，事件通知也只会送给活跃的JsvPlayer组件注册的回调函数。
+		 */
+		active:{type: Boolean, default: true},
 
-  setup() {
-    return {
-      video: null,
-      holeId: "",
-    };
-  },
+		/**
+		 * 属性，int类型，设置圆角属性。
+		 */
+		cornerRadius: {type: Number, default: 0},
 
-  data() {
-    return {
-      holeStyle: {},
-    };
-  },
-  created() {},
-  mounted() {
-    logDebug("JsvPlayer:", this.style);
+		oversize: {type: Number, default: 0},
+	},
+	components: {
+		JsvNativeSharedDiv
+	},
+	watch: {
+		active(newValue) {
+			logDebug("active newValue: "+newValue);
+			if(this.video && this.playerType !== 3){
+				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.playerType !== 3){
+				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;
+			}
+		}
+	},
 
-    let key = "Jsv_" + Math.floor(Math.random() * 10000);
-    if (this.playerKey) {
-      key = this.playerKey;
-    }
-    logDebug("player key:" + key);
+	setup(){
+		return {
+			video: null,
+			holeId: "",
+		};
+	},
 
-    let player_type = 2;
-    if (this.playerType) player_type = this.playerType;
+	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 background = true;
-    if (!this.background) background = this.background;
+		let player_type = 2;
+		if(this.playerType)
+			player_type = this.playerType;
 
-    logDebug("JsvPlayer background:" + background);
+		let background = true;
+		if(!this.background)
+			background = this.background;
 
-    const designMap = window.Forge.DesignMap();
-    logDebug("JsvPlayer:", this.holeId);
+		logDebug("JsvPlayer background:"+background)
 
-    this.video = findMediaObjectByKey(key);
-    let first_create = true;
+		const designMap = window.Forge.DesignMap();
+		logDebug("JsvPlayer:", this.holeId)
 
-    if (!this.video) {
-      if (player_type === 3) {
-        this.video = new JsvMediaAudio(key, designMap.width);
-      } else {
-        this.video = new JsvMediaVideo(
-          this.holeId,
-          this.windowMode,
-          player_type,
-          key,
-          background,
-          designMap.width,
-          this.decodeType
-        );
-      }
-    } else {
-      this.video.setRef();
-      first_create = false;
-    }
+		this.video = findMediaObjectByKey(key);
+		let first_create = true;
 
-    if (this.video != null) {
-      if (this.active) {
-        this.registerEvent();
+		if(!this.video){
+			if(player_type === 3){
+				this.video = new JsvMediaAudio(key, designMap.width);
+			}else{
+				this.video = new JsvMediaVideo(this.holeId, this.windowMode, player_type, key, background, designMap.width, this.decodeType);
+			}
+		}else{
+			this.video.setRef();
+			first_create = false;
+		}
 
-        //if(first_create){
-        if (this.src && this.src !== "") this.video.src = this.src;
+		if(this.video != null){
+			if(this.active){
+				this.registerEvent();
 
-        if (this.currentTime !== 0) this.video.currentTime = this.currentTime;
+				//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.autoplay){
+						this.video.autoplay = this.autoplay;
+					}
 
-        if (this.muted) {
-          this.video.muted = this.muted;
-        }
+					if(this.muted){
+						this.video.muted = this.muted;
+					}
 
-        if (this.loop) {
-          this.video.loop = this.loop;
-        }
+					if(this.loop){
+						this.video.loop = this.loop;
+					}
 
-        if (!this.keepLastFrame) {
-          this.video.keepLastFrame = this.keepLastFrame;
-        }
+					if(!this.keepLastFrame){
+						this.video.keepLastFrame = this.keepLastFrame;
+					}
 
-        if (this.videoAspectRatio !== "origin") {
-          this.video.videoAspectRatio = this.videoAspectRatio;
-        }
+					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);
-          if (this.playerType !== 3) {
-            this.holeStyle = {
-              left: 0,
-              top: 0,
-              width: this.style.width,
-              height: this.style.height,
-            };
-          }
-        }
-      }
+					if(this.chromaKey && this.chromaKey !== ""){
+						this.video.setChromaKey(this.chromaKey)
+					}
+				//}else{
+				if(!first_create){
+					this.video.setHoleID(this.holeId);
+					if(this.playerType !== 3){
+						this.holeStyle = {
+							left: 0, top: 0,
+							width: this.style.width, height: this.style.height
+						};
+					}
+				}
+			}
 
-      this.onRef?.(this.video);
-    }
-  },
+			this.onRef?.(this.video)
+		}
+	},
 
-  unmounted() {
-    if (this.video != null) {
-      this.video.releasePlayer();
+	beforeUnmount(){
+		if(this.video != null){
+			this.video.releasePlayer();
 
-      this.onRef?.(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.");
-          if (this.playerType !== 3) {
-            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);
-      }
-    },
-  },
-};
+	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.");
+					if(this.playerType !== 3){
+						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);
+				this.video.addEventListener("streamchanged", this.onStreamChanged);
+				this.video.addEventListener("changeurlcomplete", this.onChangeUrlComplete);
+				this.video.addEventListener("changeurlrenderstart", this.onChangeUrlRenderStart);
+				this.video.addEventListener("sizechangeerror", this.onSizeChangeError);
+			}
+		}
+	},
+}
 
 //export default JsvPlayer;
 </script>
 
 <template>
-  <div v-if="playerType != 3" :style="style" backgroundColor="rgba(0,0,0,1)">
-    <JsvNativeSharedDiv
-      :style="holeStyle"
-      :getId="getHoleId"
-      :corner="corner"
-    ></JsvNativeSharedDiv>
+  <div 
+	v-if="playerType!=3"
+	:style="style">
+    <JsvNativeSharedDiv :style="holeStyle" :getId="getHoleId" :corner="cornerRadius" :frontLayer="!this.background" :oversize="oversize"></JsvNativeSharedDiv>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+
+</style>