video.js 插件不起作用答案

【问题标题】：video.js plugins not workingvideo.js 插件不起作用
【发布时间】：2014-02-22 00:20:59
【问题描述】：

我正在尝试让 video.js 中的任何插件正常工作，但我不断收到与 videojs('video_example_1) 相关的错误，称 videojs 未定义。我从最近的插件中复制了代码，只是为了看看我是否做错了什么。我得到的确切错误是：

TypeError: vjs is undefined
var video = videojs('video_example_1'); (line 41)
ReferenceError: videojs is not defined

有人可以帮忙吗？下面贴一些代码：

<link href="//vjs.zencdn.net/4.4/video-js.css" rel="stylesheet">
<link href="http://theonion.github.io/videojs-endcard/stylesheets/videojs.endcard.css"       
rel="stylesheet">
<script src="//vjs.zencdn.net/4.4/video.js"></script>
<script src="http://theonion.github.io/videojs-endcard/javascripts/videojs.endcard.js">    
</script>

<video
id="example_video_1" class="video-js vjs-default-skin" controls preload="auto"    
width="640" height="264"
data-setup='{"example_option":true}'>

<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />  
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />  

</video>
<script>
// Sync or Async, you decide.
function getRelatedContent(callback) {
var div = document.createElement('div');
var p = document.createElement('p');
p.innerHTML = "So Cool You'll HAVE to Click This!";
div.appendChild(p);
setTimeout(function(){
    // Needs an array
    callback([div]);
}, 0);
}

function getNextVid(callback) {
var div = document.createElement('div');
var anchor = document.createElement('a');
anchor.innerHTML = "Users will be taken to the VideoJS website after 10 seconds!"
anchor.href = "http://www.videojs.com/"
div.appendChild(anchor)
setTimeout(function(){
    callback(div);
}, 0);
}

var video = videojs('video_example_1');
video.endcard({
getRelatedContent: getRelatedContent,
//  getNextVid: getNextVid    //uncomment this for auto-playing video
})
</script>

【问题讨论】：

标签： javascript video.js

【解决方案1】：

尝试在成功加载 DOM 后执行整个代码，在 body 上使用 onload 处理程序：

[...]
<body onload="myOnLoadHandlerHere">...</body>
[...]

JS 脚本：

function myOnLoadHandlerHere() {
    // Main logic here
}

您的视频标签似乎也有 id="example_video_1" 但在您的 js 代码中，您试图引用 id：video_example_1。

【讨论】：

【解决方案2】：

在这里排队：

var video = videojs('video_example_1');
video.endcard({
getRelatedContent: getRelatedContent,
//  getNextVid: getNextVid    //uncomment this for auto-playing video
})

替换为：

var video = videojs('video_example_1');
video.endcard({
getRelatedContent: getRelatedContent
})

【讨论】：