@flexem/fc-gui 3.0.0-alpha.59 → 3.0.0-alpha.60

package/bundles/@flexem/fc-gui.umd.js

@@ -29894,64 +29894,63 @@ class video_element_VideoElement extends conditional_display_element_Conditional
             return;
         }
         this.videoId = guid["a" /* Guid */].newGuid().toString('n');
-        this.rootElement.append('rect').attr('id', 'rect' + this.videoId).attr('fill', 'transparent')
-            .attr('width', this.model.size.width)
-            .attr('height', this.model.size.height);
         this.videoService.getVideoUrl(this.model.videoTag).then(result => {
-            this.initVideo(result.url, result.isMobileType, this.videoId);
-        }).catch(() => {
-            throw new Error('Failure of the videoService');
-        });
-    }
-    initVideo(videoUrl, isMobileType, videoId) {
-        const patt = /https:.+.m3u8/;
-        if (videoUrl.indexOf('http:') !== -1) {
-            videoUrl = videoUrl.replace('http:', 'https:');
-        }
-        if (!patt.test(videoUrl)) {
-            let videoToolTip = this.localization.invalidVideoAddress;
-            if (Object(lodash["isNil"])(videoUrl) || videoUrl === '') {
-                videoToolTip = this.localization.unconfiguredVideoAddress;
+            const isAndroid = !!navigator.userAgent.match(/(Android)/i);
+            let videoUrl = result.url;
+            const patt = /https:.+.m3u8/;
+            if (videoUrl.indexOf('http:') !== -1) {
+                videoUrl = videoUrl.replace('http:', 'https:');
             }
-            this.addVideoAddressToolTip(videoToolTip);
-            return;
-        }
-        const currentRect = this.$element.find('rect#rect' + videoId).first();
-        if (!currentRect.length) {
-            return;
-        }
-        const clientRect = currentRect[0].getBoundingClientRect();
-        const chartWidth = clientRect.width;
-        const chartHeight = clientRect.height;
-        const left = this.model.location.x / this.guiSize.width * $('.' + this.svgRootClass).find('.svg-content').width();
-        const top = this.model.location.y / this.guiSize.height * $('.' + this.svgRootClass).find('.svg-content').height();
-        let videoHtml = `<video scareX="${this.model.location.x / this.guiSize.width}"
-    scareY="${this.model.location.y / this.guiSize.height}" id="${videoId}" src="${videoUrl}" style="
-    position: absolute;top:${top}px;left:${left}px;width:${chartWidth}px;height:${chartHeight}px;object-fit:fill;z-index:0"
-    playsInline webkit-playsinline `;
-        const isAndroid = !!navigator.userAgent.match(/(Android)/i);
-        if (this.isMobileMode) {
-            if (isAndroid) {
-                if (isMobileType) {
-                    videoHtml += ' controls ';
+            if (!patt.test(videoUrl)) {
+                let videoToolTip = this.localization.invalidVideoAddress;
+                if (Object(lodash["isNil"])(videoUrl) || videoUrl === '') {
+                    videoToolTip = this.localization.unconfiguredVideoAddress;
+                }
+                this.addVideoAddressToolTip(videoToolTip);
+                return;
+            }
+            const video = this.rootElement.append('foreignObject')
+                .attr('x', 0)
+                .attr('y', 0)
+                .attr('width', this.model.size.width)
+                .attr('height', this.model.size.height)
+                .append('xhtml:video')
+                .attr('id', this.videoId)
+                .attr('scareX', this.model.location.x / this.guiSize.width)
+                .attr('scareY', this.model.location.y / this.guiSize.height)
+                .attr('src', videoUrl)
+                .style('width', '100%')
+                .style('height', '100%')
+                .attr('playsInline', true)
+                .attr('webkit-playsinline', true);
+            if (this.isMobileMode) {
+                if (isAndroid) {
+                    if (result.isMobileType) {
+                        video.attr('controls', true);
+                    }
+                    video.attr('autoplay', true);
+                    video.attr('muted', true);
+                }
+                else {
+                    video.attr('controls', true);
+                    video.attr('muted', true);
                 }
-                videoHtml += ' autoplay muted></video>';
             }
             else {
-                videoHtml += ' controls muted></video>';
+                video.attr('controls', true);
+                video.attr('autoplay', true);
+                video.attr('muted', true);
             }
-        }
-        else {
-            videoHtml += ' controls autoplay muted></video>';
-        }
-        $('.' + this.svgRootClass).find('.svg-content').append(videoHtml);
-        if (this.isShow === false) {
-            $('#' + this.videoId).hide();
-        }
-        this.videoPlayer = new EZUIPlayer(videoId);
-        if (isAndroid && !isMobileType) {
-            this.setAndroidVideo(videoId);
-        }
+            if (this.isShow === false) {
+                $('#' + this.videoId).hide();
+            }
+            this.videoPlayer = new EZUIPlayer(this.videoId);
+            if (isAndroid && !result.isMobileType) {
+                this.setAndroidVideo(this.videoId);
+            }
+        }).catch(() => {
+            throw new Error('Failure of the videoService');
+        });
     }
     addVideoAddressToolTip(videoToolTip) {
         const size = this.model.size;