Loading the plugin and css from CDN doesn't seem to work?

privatesam commented 1 year ago

Is there a reason loading this plugin and CSS from a CDN wouldn't work? I've tried using the demo code below but replacing the plugin and css with jsdelivr versions but no chromecast option ever appears in the player:


<html>
<head>
   <meta charset=utf-8 />
   <title>silvermine-videojs-chromecast Demo</title>
   <link href="https://unpkg.com/video.js@6.1.0/dist/video-js.css" rel="stylesheet">
   <script src="https://unpkg.com/video.js@6.1.0/dist/video.js"></script>

   <script src="https://cdn.jsdelivr.net/npm/@silvermine/videojs-chromecast@1.3.4/dist/silvermine-videojs-chromecast.js"></script>
   <link href="https://cdn.jsdelivr.net/npm/@silvermine/videojs-chromecast@1.2.0/dist/silvermine-videojs-chromecast.css" rel="stylesheet" />

   <script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
</head>
<body>
   <h1>Demo of <code>silvermine-videojs-chromecast</code></h1>

   <video id="video_1" class="video-js vjs-default-skin" controls preload="auto">
      <source src="http://www.caminandes.com/download/03_caminandes_llamigos_1080p.mp4" type="video/mp4">
   </video>

   <script>
      var options;

      options = {
         fluid: true,
         techOrder: [ 'chromecast', 'html5' ],
      };

      videojs('video_1', options, function() {
         var player = this;

         player.chromecast();
      });
   </script>

</body>
</html>

privatesam commented 1 year ago

Done more testing. The button does seem to appear in Chrome on Android like this:

But doesn't appear at all in Edge on Windows.

I was trying to get the button to appear on the controls bar like this:

yokuze commented 1 year ago

Your demo works for me in macOS 13.0 Chrome (107), at least:

Please note that there has to be Chromecast devices available for casting on the same network as the device in order for the Chromecast button to show up in the toolbar. If there are no available Chromecast device targets, then the button will not be shown.

If you are able to reproduce this issue after ensuring that there are available cast targets, please provide what OS version and browser version you are using.

privatesam commented 1 year ago

Thanks for the reply. There's definitely Chromecast devices available - if I tap the cast button on Android I can select my Nvidia Shield. I tested right clicking on the video in Edge on Windows 11 and discovered a "Cast to Device" option in the context menu which, when clicked, brings up the options for devices to cast to. However I really want to get the cast button in the controls working. I have a Mac as well so decided to install Chrome and test like you and similar issue - no cast button although I have the cast menu button in the Chrome options menu and have the option to cast the tab.

I'm doing all this testing on http not https could that be the isssue????

privatesam commented 1 year ago

Ran my code on a HTTPS connection last night and it worked. I had even tested with running the plug locally on my server - njot just thought the CDN but ultimately this plugin needs HTTPS - might be worth adding to the docs.

silvermine / videojs-chromecast

Loading the plugin and css from CDN doesn't seem to work? #140