videojs-youtube "Youtube" tech is undefined

same issue as #354, but that one was closed long time ago with many new reports un-replied. So I recreate it in order to get attentions and have it fixed.

for my case, I can play the youtube video with the example specified in the README.md

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" rel="stylesheet" href="../node_modules/video.js/dist/video-js.min.css" />
</head>
<body>
  <video
    id="vid1"
    class="video-js vjs-default-skin"
    controls
    autoplay
    width="640" height="264"
    data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}] }'
  >
  </video>

  <script src="../node_modules/video.js/dist/video.min.js"></script>
  <script src="../dist/Youtube.min.js"></script>
</body>
</html>

I use video.js in my electron app, it can play videos like mp4 but could not play the youtube video with youtube plugin.

<html>
  <head>
    <meta charset="utf-8">
    <title>Hello Electron React!</title>
    <script src="../node_modules/video.js/dist/video.js"></script>
    <script src="../node_modules/videojs-youtube/dist/Youtube.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../node_modules/video.js/dist/video-js.css">
...

  </head>

screen shot 2018-02-24 at 22 45 48

I can tell

vidoe.js and youtube.js both loaded correctly.
global variable YT is available
techOrder: "youtube" was passed in

but I don't know why 'youtube' techOrder was not defined.

I hope someone can help me on it.

thanks

Feb 25 '18 04:02 johnking

Any updates on this ?

Mar 27 '18 12:03 abrantes01

I had this same problem with a vue node app that compiles to a web app via webpack. For me, it was

https://github.com/videojs/videojs-youtube/blob/c4be481ff9d5b76b2b3271dca585bdc77805ab98/src/Youtube.js#L25

This pulls in a video.js module and attaches tech to it, but for some reason it's not the same module that's showing up in the rest of my application.

If I copy the factory function out (since it's not exported and I can't get to it any other way) and pass my own videojs import in, the tech is added correctly.

It'd be nice if the module exported the factory function as well as trying to run everything itself.

Jul 11 '18 04:07 qdot

In my nuxt app I use vue-video-player, it seems that vue-video-player imports the file ./node_modules/video.js/dist/video.cjs.js but videojs-youtube imports the file ./node_modules/videojs-youtube/node_modules/video.js/dist/video.es.js. So its correct what @qdot already mentioned, its not importing the same module hence it can't find the Youtube tech.

Not sure why this happens unfortunately, but if I force videojs-youtube to use the same module by changing the require in dist/Youtube.js to

var videojs = require('../../video.js/dist/video.cjs.js');
module.exports = factory(videojs.default || videojs);

everything does work.

Aug 19 '18 15:08 pimlie

Hi @pimilie are you using your app in universal mode? Would you care to explain how did you implement the whole thing and you managed to get it to work? I've been trying for a while now without any luck!

Thanks,

Mar 22 '19 07:03 danieladarve

videojs-youtube videojs-youtube copied to clipboard

"Youtube" tech is undefined

videojs-youtube
videojs-youtube copied to clipboard