videojs javascript 动态添加

Question

我需要通过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>

Answer 1

不要每次都包含脚本，您只需要一次。添加元素后，使用 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++;
    }

https://player.support.brightcove.com/code-samples/brightcove-player-sample-loading-player-dynamically.html

videojs javascript 动态添加

videojs javascript dinamic add

html

javascript

brightcove

video.js