Question

我正在尝试从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>

Answer 1

在使用onload body on body：

成功加载DOM后尝试执行整个代码

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

JS脚本：

function myOnLoadHandlerHere() {
    // Main logic here
}

您的视频标记似乎还有 id =“example_video_1”，但在您的js代码中，您尝试引用ID： video_example_1 。

Answer 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
})

video.js插件无法正常工作

2 个答案: