Video.js 播放器未使用预期选项答案

【问题标题】：Video.js player not using expected optionsVideo.js 播放器未使用预期选项
【发布时间】：2021-12-28 17:47:29
【问题描述】：

我有一个简单的 HTML 页面，用一个小的 JS sn-p 来充当播放列表，它运行良好。

我添加了 Video.js，但如果我关闭页面并再次返回会出现问题 - 有时！ - 它不会加载播放器，视频会显得更小或更大，这意味着它不会在 Video.js 设置中加载纵横比！（仍然像播放列表控制器一样的主页中的 JS sn-p 工作正常）因此，如果我单击任何视频，播放器将更改为该视频，但 Video.js 不起作用，只出现第一帧，并且大小不准确（意味着 Video.js 不起作用），每次发生这种情况时我都应该刷新！.. 我在主页末尾尝试了player.dispose()，但没有用。我试图通过开头的这一行（<script>document.write('<script src="vid.js?dev=' + Math.floor(Math.random() * 100) + '"\><\/script>');</script>）摆脱缓存，但效果不佳:(..

这是我的代码供您参考，希望您能找到适合我的解决方案... **注意：代码在 localhost (MAMP) 上运行良好，只需将 defer 添加到 vid.js 的脚本标签 .. 但在在线主机上仍然存在问题..

<head>
// HTML HEADER and things! 
<!-- style for the page -->
     <link rel="stylesheet" href="tphysics.css">
    
    <!-- style CDN for vjs  -->
    <link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
</head>
<body>
  <div class="container">
    <div class="main-video">
      <div class="video">
    <video
    id="vid"
    class="video-js vjs-big-play-centered"
    max-width="100%"
    height="auto"
    oncontextmenu="return false;"
    data-setup="{}"
  >
    <source src="lessons/test3.mp4" type="video/mp4"/>
  </video>
    </div>
  </div>

      <!-- here comes the video list  -->

      <div class="video-list">
        <div class="vid active">
            <video src="lessons/test3.mp4" muted></video>
            <h3 class="title">01. heres the video title</h3>
        </div>
          <div class="vid">
            <video src="lessons/test2.mp4" muted poster="./tphysics2.jpg"></video>
            <h3 class="title">02. heres the video title</h3>
        </div> 
        
    </div>

</div>


<!-- videoJS CDN -->
    <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
     
    <!-- JavaScript for the vjs library  -->
    <script src="vid.js" defer ></script>

<!-- JavaScript for the playlist -->
<script >
  let listVideo = document.querySelectorAll('.video-list .vid');
  let mainVideo = document.querySelector('.main-video video');
  let title = document.querySelector('.main-video .title');
  
  listVideo.forEach(video =>{
    video.onclick = () =>{
      listVideo.forEach(vid => vid.classList.remove('active'));  
      video.classList.add('active');
      if(video.classList.contains('active')){
        let src = video.children[0].getAttribute('src');
        mainVideo.src = src;
        let text = video.children[1].innerHTML;
        title.innerHTML = text;    
      };
      
    };
  });

  </script>
</body>
</html>```


*** Note: I added (defer) to the vid.js file so that it runs after the whole html is loaded and that it detects the Video element (according to what I read).. 

*** the vid.js file code is here ..

 
```var player = videojs('vid',{
    autoplay: true,
    controls: true,
    poster: './tphysics2.jpg',
    loop: ture,
    aspectRatio: '16:9',
    preload: true, //the browser chooses the best action    
    // fill: true, //this is to fill the container!
    // fluid: true,
    playbackRates: [0.25, 0.5, 1, 1.5, 2],
    responsive: true, //https://docs.videojs.com/tutorial-layout.html
    plugins: {

    }

});```

【问题讨论】：

标签： javascript html caching video.js

【解决方案1】：

删除data-setup="{}"。您有一个竞争条件，由于该属性，video.js 在文档加载时自动设置播放器，没有选项，或者您的 vid.js 使用您的选项设置它。

【讨论】：

工作！非常感谢..