javascript - 外部js文件调用时视频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
                    }
                }
            })
}
})();

当我们在 head 中包含 CSS 和 JS，然后在 body 中包含带有视频和 JS 函数的 div 时，它可以在普通 HTML 页面上运行。但是当我创建一个 JS 文件并通过 javascript 包含它时，它就不起作用了。请建议我做错了什么。

Answer 1

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

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文件。