理由
Hikvisionの3.1開発ガイドは、明確に、現時点では、唯一のdivタグの使用をサポートしていることを指摘し、iframeベースの方法の使用もサポートしていないブラウザのページのポップアップページの使用をサポートしていません。
クライアントからのiframe適応のリクエストにより
問題1：ネストされたiframe、クロスドメインの問題。
コンソールを表示すると、Haikangプラグインのソースコードが現在のブラウザのタイトルを取得できないことを示唆するエラーが報告され、問題が発生します。
解決方法
ソースコードから該当するコードを削除
問題2：クロスドメインの解像度、ビデオプラグインの初期化位置に問題あり
調査の結果、プラグインの初期化位置がブラウザの初期位置に基づいているため、ビデオプラグインの位置が iframe の相対位置で初期化されないことがわかりました。
解決策：親ウィンドウは、iframe の offset.top と offset.left の相対位置を iframe ウィンドウ内の video プラグインに渡します。そして、video プラグインは、相対位置に応じてプラグインを初期化し、window.postMessage() メソッドを使用する必要があります。
サブ
<div id="myVideo" style="margin-left:20%;width: 80%;height: 60%; ">
<iframe src="url" width="100%" height="100%" id="iframe"></iframe>
</div>
function fd(wait) {
let timer = null
return function () {
if (timer != null) clearTimeout(timer)
timer = setTimeout(() => {
postIframe()
console.log('揺れ防止トリガー関数');
}, wait)
}
}
let myfd = fd(1000)
window.onresize = function () {
myfd()
}
window.onload=function(){
postIframe()
}
function postIframe() {
let myMessage = $('#myVideo').offset() // iframeブラウザのオフセットtopとleftを基準にする。
let parentHeight = $('#myVideo').height() //iframeウィンドウサイズ
let parentWidth = $('#myVideo').width() // //iframeウィンドウサイズ
var receiver = document.getElementById('iframe').contentWindow;
receiver.postMessage({ parentHeight, parentWidth, myMessage }, '*');
}
地上第1支部：午後11時～午前1時、真夜中
function changeVideo() {
//dom要素を操作して、プラグインのウィンドウ・サイズを変更する。
$("#playWnd").css("width", newWidth + "px");
$("#playWnd").css("height", newheight + "px");
//dom要素を操作して、ブラウザに対するプラグインの相対位置を変更する。
$("#playWnd").css("margin-top", Number(inittop) + 1 + "px");
$("#playWnd").css("margin-left", Number(initLeft) + 1 + "px");
if (oWebControl != null) {
oWebControl.JS_Resize(newWidth, newheight);
$(".hikRight").css("left", newWidth - 11 + "px");
}
}
$(function () {
//メッセージを聞く
window.addEventListener('message', function (e) {
// console.log(e.data) //e.data渡されたデータ
inittop = e.data.myMessage.top
initLeft = e.data.myMessage.left
newheight = e.data.parentHeight
newWidth = e.data.parentWidth
changeVideo() //ウィンドウの位置は、dom
videoTimer = setTimeout(() => {
$("#playWnd").css("margin-top", 0 + "px");
$("#playWnd").css("margin-left", 0 + "px");
}, 1000)
})
//プラグインを初期化する
initPlugin()
})
問題3：ビデオプラグインのちらつき
研究ソースコードは、initPlugin（）とinit（）関数がロードされたプラグインが、異なる方法でロードされたことがわかりました。 initPlugin（）は、divの場所を計算するために、現在のiframeを介してinit（）divの場所を計算するために、ブラウザのウィンドウを介してロードされ、その結果、2つのプラグインは、プラグインのちらつきをもたらし、同じ表示場所ではないということです。
解決策：init()関数の初期化に成功したら、プラグインの場所をiframeの場所に設定します。
.then(function (oData) {
oWebControl.JS_Resize(newWidth, newheight)
// Firefoxでウィンドウを最初に表示した後、プラグインウィンドウがDIVウィンドウと重ならない問題を避けるために、初期化後に一度サイズを変更する。
$("#playWnd").css("margin-top", -1 + "px");
$("#playWnd").css("margin-left",0+ "px");
})
