<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
video{
background: #7c97e2;
}
#box{
height: 300px;
width: 600px;
border: 1px solid red;
}
</style>
<script>
function getWxImg(url) {
let r = Math.random();
let frameid = "f" + r;
let imgId = "I" + r;
frameid = frameid.split(".")[1];
frameid = "frame" + frameid;
imgId = imgId.split(".")[1];
imgId = "frame" + imgId;
window[frameid] =
`<video id="${imgId}" controls="controls" style="height: 100%;display: block;width: 100%;object-fit: contain" src="${url}?${ Math.random()}"
></video><style>body{margin:0;}</style>`
let o = document.createElement("iframe");
o.setAttribute("id", frameid);
o.setAttribute("src", `javascript:parent.${frameid};`);
o.setAttribute("frameBorder", "0");
o.setAttribute("scrolling", "no");
o.setAttribute("width", "100%");
o.setAttribute("height", "100%");
return o;
}
window.onload=()=> {
let o = getWxImg("你的跨域视频")
document.getElementById('box').append(o)
}
</script>
</head>
<body>
<div id="box">
</div>
<iframe></iframe>
</body>
</html>
这个会随机生成一个不太可能重名的id,然后通过操作iframe就可以直接显示跨域视频了,目前原理也不清楚,反正整合到vue或者任何框架都非常简便。