h5-webgl-program/src/components/krpanoVideo/index.vue

<template>
    <!-- @touchstart="touchstartFunc" -->
    <div class="panoramic-components">
        <!-- 刷新按钮 -->
        <!-- <div class="refresh-btn" @click="refreshPage">
            <img src="https://dm.static.elab-plus.com/refresh-btn.png">
        </div> -->
        <!-- 引导用户  触屏图片 -->
        <div v-if="pvCurPageName!='webgl_clipImg'" class="prompt-720-img" :class="isTouchstart ? 'img-hide' : ''">
            <img src="https://dm.static.elab-plus.com/guide-mask.png" />
        </div>
        <!-- 封面引导 蒙层图 -->
        <div class="krpano-img-before" :class="videoBefore ? '' : 'hide'">
            <img src="https://dm.static.elab-plus.com/hqc-loading.png" />
        </div>
        <!-- <div class="play-img" :class="isPlayImg ? 'play-img-show': ''">
            <img src="https://dm.static.elab-plus.com/hqc-img/play-img.png" />
        </div> -->
        <!-- 免责声明 -->
        <!-- <div class="disclaimer">
            <a
                href="https://dm-mng.elab-plus.cn/touFangBao/index.html#/pages/preview?id=3176&templateCode=0&brandId=52&foot=no">本资料仅供宣传参考示意</a>
        </div> -->
        <!-- krpano -->
        <div id="panoramic-krpano" :style="{'height':canvasHeight+'px'}"></div>
    </div>
</template>

<script>
    // import BScroll from 'better-scroll';
    const panoramicXML = require("./panoramic.xml");
    const panoramicNODragXML = require("./panoramic_no_drag.xml");
	const util = require('@/utils/util.js').default;
    export default {
        data() {
            return {
                tabList: [],
                selectTabIndex: 0,
                isPayVoice: false,
                isPromptShow: true,
                sceneObj: { id: '', name: '' },
                isTouchstart: false, // 是否触屏一次
                isShowOneGuideMask: false, //是否显示过一次引导用户出的操作
                videoBefore: true,//显示引导蒙层图
				sceneLoaded:false,//场景是否加载完毕了
            }
        },
		props:{
			videoUrl: {
				type: String,
				default: '',
			},
			bgUrl: {
				type: String,
				default: '',
			},
			muted: {
				type: [Boolean,String],
				default: true,
			},
			scale: {
				type: [Number,String],
				default: 1,
			},
			coordinate: {
				type: String,
				default: '',
			},
		},
		watch: {
			videoUrl: {
				handler(newVal,oldVal) {
					if (newVal && newVal.length>0) {
						console.warn("***videoUrl-webgl_rxdz_krpanoVideo***", newVal,oldVal)
						if(this.sceneLoaded){
							this.playVideo(newVal)
						}
					}
				},
				immediate:true,
			},
			bgUrl: {
				handler(newVal,oldVal) {
					console.warn("***bgUrl-webgl_rxdz_krpanoVideo***", newVal,oldVal)
					if(this.panoramicKrpano){
						this.setSphereUrl(newVal)
					}
				},
				immediate: true,
			},
			muted: {
				handler(newVal,oldVal) {
					console.warn("***muted-webgl_rxdz_krpanoVideo***", newVal,oldVal)
					if(this.panoramicKrpano){
						this.panoramicKrpano.call(`toggleMute(${newVal})`);
					}
				},
				immediate: true,
			},
			scale: {
				handler(newVal,oldVal) {
					console.warn("***scale-webgl_rxdz_krpanoVideo***", newVal,'---',oldVal)
					if(this.panoramicKrpano){
						let sc = newVal;
						if(newVal.includes('{')){
							let scale = JSON.parse(newVal);
							sc = scale.x;
						}
						this.panoramicKrpano.call(`scaleChange(${sc})`);
					}
				},
				immediate: true,
			},
			coordinate: {
				handler(newVal,oldVal) {
					console.warn("***coordinate-webgl_rxdz_krpanoVideo***", newVal,oldVal)
				},
				immediate: true,
			},
		},
        methods: {
			playVideo(){
				this.panoramicKrpano.call(`playSceneName(${this.videoUrl})`);
				// wx.config({
				// 	debug: false,
				// 	appId: '',
				// 	timestamp: '',
				// 	nonceStr: '',
				// 	signature: '',
				// 	jsApiList: []
				// })
				// wx.ready(()=> {
				// 	// 在这里面进行操作即可，估计应该是微信的sdk对Safari的内核做了一些对应的操作吧
				// 	this.panoramicKrpano.call(`playSceneName(${this.videoUrl})`);
				// })
				console.warn("***playSceneName-playVideo***")
			},
            panoramic() {
				console.warn("***panoramicKrpano***",this.videoUrl)
                this.panoramicKrpano = document.getElementById('panoramic');
				if(this.bgUrl){
					// 设置全景图的路径
					this.setSphereUrl(this.bgUrl)
				}
                // 场景加载完毕了
				window.sceneload = ()=>{
					console.warn("***sceneLoad***")
					this.videoBefore = false;
					this.sceneLoaded = true;
					this.playVideo();//播放绿幕视频
					if(this.coordinate){
						let position = JSON.parse(this.coordinate);
						if(position.ath && position.atv){
							this.setPosition(position);
						}
					}
				}
                // 视频加载完
                window.videoready = () => {
					console.warn("***videoready***",this.$parent.isIOS,this.isTouchstart)
                    // 兼容苹果手机， 当视频加载完也算触屏了, 显示引导用户触屏
					if(this.$parent.isIOS){
						if (!this.isShowOneGuideMask) {
						    // 视频加载完
						    this.isTouchstart = true;
						}
					}
                };
                // 视频暂停了,自动刷新页面, 并且保存,当前的参数
                window.videopausedFunc = () => {
                }
				//截图成功了
				window.show_img = (shottingImg) => {
					console.warn("***show_img***",shottingImg)
					let param = {
						type: 'CLK', //埋点类型
						clkId: 'clk_2cmina_23121401', //点击ID
						clkName: 'webgl_cover_clk', //点击前往的页面名称
						clkParams: {
							locusName: "封面确认",
							locusValue: shottingImg
						}
					};
					util.trackRequest(param);
					if(window.__wxjs_environment === 'miniprogram'){
						wx.miniProgram.postMessage({data: {bgUrl:shottingImg}})
						wx.miniProgram.navigateBack();
					}else{
						window.location.href = shottingImg
					}
				}
				
				// 视频播放
				window.onvideoplay = () => {
					console.warn("***onvideoplay***")
				}
				document.addEventListener("touchend", ()=> {
					if(this.isShowOneGuideMask==false){
						this.isShowOneGuideMask = true;
						this.isTouchstart = true;
					}
					// console.warn("***kpanoraTouch***",this.isTouchstart)
				})
				window.getScaleHandle = (scale) => {
					console.warn("***getScaleHandle***",scale)
				}
            },
			makescreenshot(){
				// let screenshotcanvas = this.panoramicKrpano.webGL("krpano[webGL]");
				let pix = 1 || window.devicePixelRatio;
				let x = parseInt(this.$parent.bottomLeftX*pix);
				let y = parseInt(this.$parent.top*pix);
				let width = parseInt(this.$parent.width*pix);
				let height = parseInt(this.$parent.height*pix);
				console.warn("***screenshotcanvas***",x,y,width,height)
				this.panoramicKrpano.call("makescreenshot("
				+ x+','
				+ y+','
				+ width+','
				+ height+")");
			},
			getScale(){
				let video = this.panoramicKrpano.get("hotspot[video]");
				console.warn("***getScale***",video.scale);
			},
			getPosition(){
				let video = this.panoramicKrpano.get("hotspot[video]");
				let posi = {
					ath:video.ath,
					atv:video.atv,
				}
				console.warn("***getPosition***",posi);
				return posi
			},
			setPosition(position){
				let video = this.panoramicKrpano.get("hotspot[video]");
				video.ath = position.ath;
				video.atv = position.atv;
				console.warn("***setPosition***",position);
			},
			//设置全景图图片地址
			setSphereUrl(url){
				if(!url){
					return false
				}
				this.panoramicKrpano.set("panorama_url",url)
				console.warn("***setSphereUrl***",url);
			},
			//设置视频地址
			setVideoUrl(url){
				if(!url){
					return false
				}
				this.panoramicKrpano.set("video_url",url)
				console.warn("***setVideoUrl***",url);
			},
        },
        mounted() {
            embedpano({
                swf: "https://dm.static.elab-plus.com/krpano.swf",
                xml: this.$parent.pvCurPageName == 'add_AI_people' ? panoramicXML : panoramicNODragXML,
                bgcolor: "#fff",
                target: "panoramic-krpano",
                passQueryParameters: false,
                consolelog: true,
                id: "panoramic",
                mobilescale: 0.5, //移动设备缩放，1表示不缩放，默认0.5
                onready: this.panoramic,
            });
        },
        created() {
			console.warn("***this.type***")
			let screenWidth = window.screen.width;
			let screenHeight = window.screen.height;
			if (window.innerWidth && window.screen.width) {
				screenWidth = Math.min(window.innerWidth, window.screen.width)
			}
			if (window.innerHeight && window.screen.height) {
				screenHeight = Math.min(window.innerHeight, window.screen.height)
			}
			this.canvasHeight = this.$parent.pvCurPageName == 'add_AI_people' ? screenWidth : screenHeight;
			this.pvCurPageName = this.$parent.pvCurPageName
            // // 监听屏幕大小变化
            // window.addEventListener('resize', ()=>{
            // });
        },
        beforeDestroy() {
            // this.panoramicKrpano.call(`closeVoice()`);
        }
    }
</script>
<style scoped lang="scss">
    @import "index.scss";
</style>