11

I am using video.js (in CDN-Mode) and everything seems to work fine (with Firefox 26.0). The video is embedded and works fine. But when I want to access the video-Object, I'm getting the console-error: ReferenceError: videojs is not defined on the code-line where I want to access the object:

var myPlayer = videojs('example_video_1');

Googling arround could not solve my problem. I saw implementations where users used: V as constructor instead of videojs but this did not solve my problem).

This is my script, where I want to access the object:

<script type="text/javascript">
    $("#button1").on("click", function(){
        console.log( "You clicked a paragraph!" );
        var myPlayer = videojs('example_video_1');
    });
</script>

This is my header

<link href="http://vjs.zencdn.net/4.5/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.5/video.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>

And this is my video-declaration

<video id="example_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="1270" height="720" poster="videos/search.png"
data-setup="{}">
    <source src="videos/search.webm" type='video/webm'>
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>

I would be happy for any kind of support.

Stefan Wegener
  • 726
  • 1
  • 10
  • 25
  • I can't see any specific reason why that wouldn't work. If you open the javascript console are you seeing any errors? Or is there a live example of this somewhere? – heff May 20 '14 at 16:55
  • Is the video.js player loading on top of the default html5 player? Try posting your code in a jsfiddle or jsbin. – tastybytes May 27 '14 at 14:28

7 Answers7

2

A year and a half later and this issue occurred for me as well. I just installed it via npm install --save video.js and moved the file from the dist folder into my public scripts folder and it worked.

Daniel Lizik
  • 3,058
  • 2
  • 20
  • 42
  • I'm loading the videoJS remotely and it isn't working. I see the js loaded on the page, but the viedojs object isn't being created. Using webpack, which I'm sure is the problem – MrWiLofDoom Jul 03 '18 at 17:24
2

You must install or use from @videojs/http-streaming. I had same problem and solved by it.

soroush
  • 170
  • 2
  • 9
1

I just made sure that the video.js file was the last attached script tag in the HTML. It worked for me.

Yashash Gaurav
  • 581
  • 5
  • 9
0

import videojs from 'video.js';

Mehdi Yaghoubi
  • 561
  • 3
  • 8
  • 24
0

try:

<script type="text/javascript">
    $("#button1").on("click", function(){
        console.log( "You clicked a paragraph!" );
        var myPlayer = window.videojs('example_video_1');
    });
</script>
TyreiaHoney
  • 1
  • 2
    Please don't post code-only answers. Future readers will be grateful to see explained *why* this answers the question instead of having to infer it from the code. – Mechanic Pig Jun 24 '22 at 05:51
0

add the event listener 'DOMContentLoaded' before calling the videojs object:

window.addEventListener('DOMContentLoaded', (event) => {
    videojs('element-id', {
        controls: true,
        autoplay: false,
        preload: 'auto'
    });
});
Ahlam Ibrahim
  • 1
  • 1
0

Using if(videojs) != 'undefined' will not solve the issue and still throws error that videojs is undefined. Instead you can use below code to check if videojs is defined and execute remaining. This worked perfectly fine for me

if(typeof(videojs)!='undefined'){
   //your code here
}
Maha
  • 1