Video.js 玩家没有使用预期的选项

Question

我有一个简单的 HTML 页面，其中有一个小的 JS 片段作为播放列表，并且运行良好。

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

这是我的代码供您参考，希望您能为我找到解决方案... **注意：该代码在本地主机（MAMP）上运行良好，仅将延迟添加到 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: {

    }

});```

Answer 1

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

Video.js 玩家没有使用预期的选项

Video.js player not using expected options

javascript

html

caching

video.js