在外部js文件中调用时未定义Video Js

Question

(function () {
// Creating and Appending scripts dynamically

function createScript(src) {
    var script = document.createElement('script');
    script.src = src;
    document.getElementsByTagName('head')[0].appendChild(script);
}

// End script tags Here

function createLink(href) {
    var link = document.createElement('link');
    link.href = href;
    link.rel = "stylesheet";
    link.type = "type/css";
    document.getElementsByTagName('head')[0].appendChild(link);
}
createLink('http://vjs.zencdn.net/4.12/video-js.css');
createScript('http://vjs.zencdn.net/4.12/video.js');
createLink('http://localhost/projects/test/bin/videojs.vast.vpaid.min.css');
createScript('http://localhost/projects/test/bin/videojs_4.vast.vpaid.min.js');
createScript('http://localhost/projects/test/bin/es5-shim.js');
createScript('http://localhost/projects/test/bin/ie8fix.js');




// DIV 2 
// Div to hold the video

var divContainer = document.createElement('div');
divContainer.class = 'example-video-container';
divContainer.style.display = 'inline-block';
document.getElementById("video3438445[CB]").appendChild(divContainer);

// End parent Div here (parent of video div/tag)

// Video Player Below 
// Create the video tag for html video player

var video = document.createElement('video');
video.id = 'video';
/*video.width = 300;
video.height = 250;*/
video.className = 'video-js vjs-default-skin';

video.autoplay = true;
video.controls = true;
video.muted = true;
video.preload = 'auto';
video.poster = "http://vjs.zencdn.net/v/oceans.png";
//video.data-setup = '{}'; 

// Function to create sources for video
function addSourceToVideo(element, src, type) {
    var source = document.createElement('source');

    source.src = src;
    source.type = type;

    element.appendChild(source);
}

addSourceToVideo(video, 'http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4', 'video/mp4');
addSourceToVideo(video, 'http://video-js.zencoder.com/oceans-clip.mp4', 'video/webm');
addSourceToVideo(video, 'http://video-js.zencoder.com/oceans-clip.mp4', 'video/ogg');

var paragraph = document.createElement('p');
paragraph.innerHTML = "Video PlayBack Not Supported";
video.appendChild(paragraph);

video.load();
//video.play();
divContainer.appendChild(video);

// Video player creation ends here
var vt = 'Vast_tag_url';
var vpaidPath = 'http://localhost/projects/test/bin/VPAIDFlash.swf';
setTimeout(myFunction, 1000);
function myFunction() {
    var player = videojs(
            "video", {
                plugins: {
                    "vastClient": {
                        "adTagUrl": vt,
                        "adCancelTimeout": 15000,
                        "adsEnabled": true,
                        "playAdAlways": true,
                        "vpaidFlashLoaderPath": vpaidPath
                    }
                }
            })
}
})();

当我们在头部有 CSS 和 JS，然后在正文中有视频和 JS 功能的 div 时，它在正常的 HTML 页面上工作。但是当我创建一个 JS 文件并通过 javascript 包含它时，它就不起作用了。请告诉我我做错了什么。

Answer 1

您加载脚本的方式是异步的。您可以直接将它们加载到 head 中，也可以实现一个方法来监听加载事件。下面的示例是用 ES6 编写的。

function loadScript(src) {
    return new Promise((onFulfilled, onRejected) => {
        const script = document.createElement('script');
        let loaded;

        // set source path to load
        script.setAttribute('src', src);

        script.onreadystatechange = script.onload = () => {
            if (!loaded) {
                onFulfilled(script);
            }
            loaded = true;
        };

        script.onerror = function() {
            // something went wrong
        };

        // append the given script
        document.getElementsByTagName('head')[0].appendChild(script);
    });
}

loadScript('http://url').then(() => {
    // do something now that the script is loaded.
});

现在您可以确定当承诺完成时，脚本加载成功。

Answer 2

非常感谢您的回复。我的问题已经解决。我为此使用了以下代码。

function loadScriptSync(src) {
    var s = document.createElement('script');
    s.src = src;
    s.type = "text/javascript";
    s.async = false;                                 // <-- this is important
    document.getElementsByTagName('head')[0].appendChild(s);
}

会同步加载js文件

在外部js文件中调用时未定义Video Js

Video Js is not defined when call in external js file

javascript

html5-video

video.js