问题描述
我需要通过JavaScript动态添加videojs播放器。问题是，将播放器添加到页面后，它不起作用。如果手动放置，它会完美工作，但是如果JS添加了播放器的代码，它将无法正常工作。我想其中应该有一种，但是找不到如何做。请帮忙
<html lang="en">
<head>
<Meta charset="utf-8">
<title>Page1</title>
</head>
<style>
/* * The body style is just for the
* background color of the codepen.
* Do not include in your code.
*/
body {
background-color: #111;
color: #fff;
}
/*
* Styles essential to the sample
* are below
*/
.video-js {
width: 640px;
height: 360px;
}
</style>
<body style="margin: 0px;">
<button onclick="addplayer()">Add Player</button>
<div id="content"></div>
<div>
<div style="max-width: 960px;">
<video-js data-account="81247437001" data-player="bGqjsTYP" data-embed="default" controls="" data-video-id="6141765796001" data-playlist-id="" data-application-id="" class="vjs-fluid"></video-js>
</div>
<script src="https://players.brightcove.net/81247437001/bGqjsTYP_default/index.min.js"></script>
</div>
<script>
var cnt = 0;
function addplayer() {
var jsc = "script";
var content =
`
<div style="max-width: 960px;">
<video-js id="pl_${cnt}" data-account="81247437001" data-player="bGqjsTYP" data-embed="default" controls="" data-video-id="6141765796001" data-playlist-id="" data-application-id="" class="vjs-fluid"></video-js>
</div>
<${jsc} src="https://players.brightcove.net/81247437001/bGqjsTYP_default/index.min.js"></${jsc}>
`
document.getElementById("content").innerHTML += content;
cnt++;
}
</script>
</body>
</html>
解决方法
不必每次都包含脚本，只需要一次即可。添加元素后，使用bc()方法对其进行初始化。例如
function addPlayer() {
var jsc = "script";
var content =
`
<div style="max-width: 960px;">
<video-js id="pl_${cnt}" data-account="81247437001" data-player="bGqjsTYP" data-embed="default" controls="" data-video-id="6141765796001" data-playlist-id="" data-application-id="" class="vjs-fluid"></video-js>
</div>
`
document.getElementById("content").innerHTML += content;
bc(`pl_${cnt}`);
cnt++;
}