使用Video.js播放视频遇ReferenceError错误求助

Hey there! That error pops up because your browser can't access the Video.js library when your custom script runs. Let's walk through the fixes step by step:

Common Causes & Solutions #

1. You're loading your script before Video.js

Video.js needs to be fully loaded and available in the browser before your code tries to call videojs(). Make sure you load the library files first, then your custom script.

Here's the correct order using a CDN (you can swap in the latest Video.js version if needed):

<!-- First load Video.js styles -->
<link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet" />

<!-- Then load Video.js core script -->
<script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>

<!-- Finally, add your custom script -->
<script>
  // Your Video.js code here
  videojs.autoSetup();
  // ... rest of your code
</script>

If you're using local files instead of a CDN, double-check the file paths to ensure they point to where you've saved Video.js (no 404 errors in your browser's Network tab!).

2. Your script runs before the DOM is ready

If your code is in the <head> section, it might execute before the Video.js library or your video element is fully loaded. Wrap your code in a DOM ready listener to fix this:

document.addEventListener('DOMContentLoaded', function() {
  videojs.autoSetup();
  videojs('my_video_1').ready(function(){
    // Your existing logic here
    console.log(this.options());
    var myPlayer = this, id = myPlayer.id();
    var aspectRatio = 264/640;
    
    function resizeVideoJS(){
        var width = document.getElementById(id).parentElement.offsetWidth;
        myPlayer.width(width).height( width * aspectRatio );
    }
    
    resizeVideoJS();
    window.onresize = resizeVideoJS;
  });
});

3. Verify Video.js actually loaded

Open your browser's developer tools (F12), go to the Network tab, and check if video.min.js loads with a 200 status code. If it shows a 404, your path is wrong. If there's no entry at all, you forgot to include the library script.

Full Working Example #

Here's a complete HTML file you can use as a reference:

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Video.js Player</title>
  <link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet" />
</head>
<body>
  <!-- Your video element with required Video.js classes -->
  <video id="my_video_1" class="video-js vjs-big-play-centered" controls preload="auto"
    data-setup='{}'>
    <source src="your-video-file.mp4" type='video/mp4'>
  </video>

  <script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
  <script>
    videojs.autoSetup();
    videojs('my_video_1').ready(function(){
      console.log(this.options());
      var myPlayer = this, id = myPlayer.id();
      var aspectRatio = 264/640;
      
      function resizeVideoJS(){
          var width = document.getElementById(id).parentElement.offsetWidth;
          myPlayer.width(width).height( width * aspectRatio );
      }
      
      resizeVideoJS();
      window.onresize = resizeVideoJS;
    });
  </script>
</body>
</html>

Just replace your-video-file.mp4 with your actual video path, then test it in your browser. The error should be gone once Video.js loads properly before your script runs.

内容的提问来源于stack exchange，提问作者Coder95