Member Avatar for phoenix_2000

Hey all,

Im working on a website that has to be capable of viewing youtube video's without having to browse to youtube itself. I followed the tutorials from both video.js and video.js' youtube plugin, but when the page loads, it gives me: Uncaught ReferenceError: videojs is not defined (vjs.youtube.js line 25)

The code is as follows:

<!-- video.js-->
    <link href="http://vjs.zencdn.net/4.6/video-js.css" rel="stylesheet">
    <script src="https://vjs.zencdn.net/4.6/video.js"></script>

    <!-- youtube addon. -->
    <script src="vendor/videojs/video.js/dist/video-js/vjs.youtube.js"></script>

<!-- bunch of HTML code, *snip* -->
<div id="videoContainer" class="ImageViewerContent tab-pane fade in">
    <video id='videoPlayer' class="video-js vjs-default-skin vjs-big-play-centered"
        data-setup='{ "techOrder": ["youtube"],
        "src": "https://www.youtube.com/watch?v=6pnr7P0qERA",
        "preload":"auto",
        "controls":true,
        "poster":"https://i.ytimg.com/vi/6pnr7P0qERA/hqdefault.jpg",
        "width":450,
        "height":254
        }'>

        <p class="vjs-no-js"><?php echo PRODUCT_VIDEO_NOT_SUPPORTED; ?></p>
    </video>
</div>

The poster does show up, and when i click it, i get "Uncaught TypeError: Cannot read property 'play' of undefined " (video.js line 58)

I tried this using 4.5.1 of video.js, 4.6 and 4.10

  • 2 Contributors
  • 4 Replies
  • 2K Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by phoenix_2000
Member Avatar for veedeoo

can you confirm that this is the right file location?

 <script src="vendor/videojs/video.js/dist/video-js/vjs.youtube.js"></script>
Member Avatar for phoenix_2000

Yup, the error message itself came from that file, and i inserted it with netbeans' own path completion.
Double checked it just now, and it's the same path. putting a / in front of it just gave me a 404.

Member Avatar for veedeoo

ok, but this one is not valid though

vendor/videojs/video.js/dist/video-js/vjs.youtube.js

video.js can't be a directory right? Here is my screenshot

9af70c7041aa00bbfb3bf5c129f33573

and the source code

<html>
<head>
<link href="//vjs.zencdn.net/4.10/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.10/video.js"></script>
<script src="videojs_youtube.js"></script>
</head>
<body>

<div id="videoContainer" class="ImageViewerContent tab-pane fade in">
<video id='videoPlayer' class="video-js vjs-default-skin vjs-big-play-centered"
data-setup='{ "techOrder": ["youtube"],
"src": "www.youtube.com/watch?v=v2AC41dglnM",
"preload":"auto",
"controls":true,
"poster":"https://i.ytimg.com/vi/v2AC41dglnM/hqdefault.jpg",
"width":450,
"height":254
}'>
<p class="vjs-no-js"><?php echo PRODUCT_VIDEO_NOT_SUPPORTED; ?></p>
</video> 

  </video>

<script type="text/javascript">
  document.createElement('video');document.createElement('audio');document.createElement('track');
</script>
</body>
</html>

The youtube plugin is from here.

Edited by veedeoo because: more info added
Member Avatar for phoenix_2000

this directory was made by composer for video.js itself. i changed those links to the CDN version to make sure that wouldn't be the problem, besides, wouldnt that give me a 404?

Removing the dot in both the map name and src directory had no effect, i even moved the vjs.youtube.js file to the root directory, just like your code, and that didnt work either.
:(

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.