javascript - video.js 插件不工作

标签 javascript video.js

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

最佳答案

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

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

JS脚本:

function myOnLoadHandlerHere() {
    // Main logic here
}

您的视频标记似乎也有 id="example_video_1",但在您的 js 代码中,您试图引用 ID:video_example_1

关于javascript - video.js 插件不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21947810/

相关文章:

javascript - 对象未被读取 node.js

javascript - 从 Json 获取 Google 图表

css - 如何将 video.js 与 create-next-app nextjs 一起使用?

javascript - 如何在视频暂停时显示 vjs-big-play-button?

html - mp4 视频不会使用 video.js 在 IE9 中播放

JavaScript 更改行中的元素并在不同的行中打印它们

javascript - DataTable分页只能统计第一页的复选框

javascript - ShaderMaterial渲染三.js

javascript - video.js 的 m3u8 源错误 : "No compatible source and playback technology were found."

video - 使用视频js的cdn链接从一个个人视频中获取多个视频