删除 重载 一般用于切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 600px;
background-color: #eee;
aspect-ratio: 16/9;
}
.player {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<iframe
src=""
frameborder="0"
id="player"
class="player"
allow="autoplay *; microphone *; fullscreen *"
allowfullscreen="true"
allowtransparency="true"
allowusermedia="true"
frameborder="no"
></iframe>
</div>
<button onclick="cz()">重载</button>
<button onclick="sc()">删除dom</button>
</body>
<script src="./js//jQuery.js"></script>
<script>
// 获取播放地址
getPlayerUrl()
function getPlayerUrl() {
$.ajax({
url: "接口获取播放地址",
crossDomain: true,
success: function (res) {
if (res.code == 100) {
console.log(res.url);
$("#player").attr("src", res.url);
}
},
});
}
// 重载
function cz() {
let html = `<iframe
src=""
frameborder="0"
id="player"
class="player"
allow="autoplay *; microphone *; fullscreen *"
allowfullscreen="true"
allowtransparency="true"
allowusermedia="true"
frameborder="no"
></iframe>`;
$(".box").html(html)
getPlayerUrl()
}
// 删除
function sc(){
$("#player").remove();
}
</script>
</html>