'video.js and video-youtube.js throwing "Cannot read properties of undefined (reading 'videojs')" when loading page
I'm trying to play a Youtube video using videojs and videojs-youtube. I've installed the latest versions with npm (videojs 7.18.1, videoojs-youtube 2.6.1). I'm loading in this order:
<script type="text/javascript" src="/node_modules/video.js/dist/video.js"></script>
<script type="module" src="/node_modules/videojs-youtube/dist/Youtube.js"></script>
When the page loads, I get the error: "Cannot read properties of undefined (reading 'videojs')" when it hits line 32:
root.Youtube = factory(root.videojs);
If I try to play the video, I get the following errors:
VIDEOJS: ERROR: The "youtube" tech is undefined. Skipped browser support check for that tech.
VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.
I'm creating the player in JavaScript with:
videojs(video.id).ready(function () {
myPlayer = this;
myPlayer.width = width;
myPlayer.height = height;
myPlayer.addClass("video-js");
myPlayer.addClass("vjs-default-skin");
myPlayer.autoplay(true);
myPlayer.controls(true);
myPlayer.options_.techOrder[1] = "youtube";
myPlayer.preload("auto");
myPlayer.on("play", moviePlay);
myPlayer.on('ended', movieEnded);
myPlayer.on('failed', movieFailed);
myPlayer.on('seeking', movieSeeking);
});
I'm selecting from a number of videos, so I them with:
myPlayer.src( { type: "video/youtube", src: "https://www.youtube.com/watch?v=HlXexv4Uc1E?1651837154234" } );
Youtube does show up in the techOrder. I wasn't sure how to do that in JavaScript but it seems to be one of two in the array. The page itself is in a frame of a frameset if that makes any difference. I've changed the videojs-youtube JavaScript example into an .asp frameset and used the same type of include files and it works fine. Could I have variable or function names that conflict... something like that?
What have I done wrong and how to I fix the original error which I assume causes the other two errors on play?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|