@shijiu/jsview-vue 2.2.35 → 2.2.128

package/utils/JsViewPlugin/JsvPlayer/JsvPlayer.vue

@@ -1,369 +1,501 @@
 <script>
-import {JsvMediaVideo, JsvMediaAudio, findMediaObjectByKey, logDebug} from './JsvMedia'
-import { JsvNativeSharedDiv } from '../../JsViewVueWidget'
-
+import {
+  JsvMediaVideo,
+  JsvMediaAudio,
+  findMediaObjectByKey,
+  logDebug,
+} from "./JsvMedia";
+import { JsvNativeSharedDiv } from "../../JsViewVueWidget";
 
 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},
-	},
-	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音频播放器。默认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;
+      }
+    },
+  },
+
+  setup() {
+    return {
+      video: null,
+      holeId: "",
+    };
+  },
 
-	setup(){
-		return {
-			video: null,
-			holeId: "",
-		};
-	},
+  data() {
+    return {
+      holeStyle: {},
+    };
+  },
+  created() {},
+  mounted() {
+    logDebug("JsvPlayer:", this.style);
 
-	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 key = "Jsv_" + Math.floor(Math.random() * 10000);
+    if (this.playerKey) {
+      key = this.playerKey;
+    }
+    logDebug("player key:" + key);
 
-		let player_type = 2;
-		if(this.playerType)
-			player_type = this.playerType;
+    let player_type = 2;
+    if (this.playerType) player_type = this.playerType;
 
-		let background = true;
-		if(!this.background)
-			background = this.background;
+    let background = true;
+    if (!this.background) background = this.background;
 
-		logDebug("JsvPlayer background:"+background)
+    logDebug("JsvPlayer background:" + background);
 
-		const designMap = window.Forge.DesignMap();
-		logDebug("JsvPlayer:", this.holeId)
+    const designMap = window.Forge.DesignMap();
+    logDebug("JsvPlayer:", this.holeId);
 
-		this.video = findMediaObjectByKey(key);
-		let first_create = true;
+    this.video = findMediaObjectByKey(key);
+    let first_create = true;
 
-		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 (!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(this.video != null){
-			if(this.active){
-				this.registerEvent();
+    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(first_create){
+        if (this.src && this.src !== "") this.video.src = this.src;
 
-					if(this.autoplay){
-						this.video.autoplay = this.autoplay;
-					}
+        if (this.currentTime !== 0) this.video.currentTime = this.currentTime;
 
-					if(this.muted){
-						this.video.muted = this.muted;
-					}
+        if (this.autoplay) {
+          this.video.autoplay = this.autoplay;
+        }
 
-					if(this.loop){
-						this.video.loop = this.loop;
-					}
+        if (this.muted) {
+          this.video.muted = this.muted;
+        }
 
-					if(!this.keepLastFrame){
-						this.video.keepLastFrame = this.keepLastFrame;
-					}
+        if (this.loop) {
+          this.video.loop = this.loop;
+        }
 
-					if(this.videoAspectRatio !== "origin"){
-						this.video.videoAspectRatio = this.videoAspectRatio;
-					}
+        if (!this.keepLastFrame) {
+          this.video.keepLastFrame = this.keepLastFrame;
+        }
 
-					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.videoAspectRatio !== "origin") {
+          this.video.videoAspectRatio = this.videoAspectRatio;
+        }
 
-			this.onRef?.(this.video)
-		}
-	},
+        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,
+            };
+          }
+        }
+      }
 
-	unmounted(){
-		if(this.video != null){
-			this.video.releasePlayer();
+      this.onRef?.(this.video);
+    }
+  },
 
-			this.onRef?.(null)
-		}
-	},
+  unmounted() {
+    if (this.video != null) {
+      this.video.releasePlayer();
 
-	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.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);
+      }
+    },
+  },
+};
 
 //export default JsvPlayer;
 </script>
 
 <template>
-  <div 
-	v-if="playerType!=3"
-	:style="style" backgroundColor="rgba(0,0,0,1)">
-    <JsvNativeSharedDiv :style="holeStyle" :getId="getHoleId"></JsvNativeSharedDiv>
+  <div v-if="playerType != 3" :style="style" backgroundColor="rgba(0,0,0,1)">
+    <JsvNativeSharedDiv
+      :style="holeStyle"
+      :getId="getHoleId"
+      :corner="corner"
+    ></JsvNativeSharedDiv>
   </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>