BigVideo:如何隐藏视频下的控制选项

BigVideo: How to Hide Control Options Under Video

本文关键字：视频 控制 选项 隐藏 何隐藏 BigVideo      更新时间：2024-05-10

我目前正在使用BigVideo.js将我的视频显示为背景；然而，在我的视频下面显示了多个精选表格。

它们来自vjs tracksettings类，例如"window-color vjs-tracksetting"。不过，并不是所有的vjs轨迹设置都需要关闭，因为它也包括视频。

我有一种预感，要关闭它，我需要关闭某些组件选项(https://github.com/videojs/video.js/blob/master/docs/guides/options.md)，但我不知道如何通过BigVideo做到这一点。此外，我的预感是它在控制栏内(https://github.com/videojs/video.js/blob/master/docs/guides/components.md)。

或者它与textTrackDisplay有关。

任何光线都会有帮助！！我已经被这个问题困扰了一段时间。（此外，我把所有的js文件都放在了头中。我知道你应该把它放在body标签的末尾，但由于某种原因，它在那里不起作用。）

编辑：我在评论中附上了一张照片

我在这里附上了我的html。如果需要任何css/js文件，请告诉我！

  <!DOCTYPE html>
  <html lang="en">
  <head>

  <!-- Include src files -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script>window.jQuery || document.write('<script src="bower_components/jquery/dist/jquery.min.js"><'/script>')</script>
      <script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
      <script src="bower_components/imagesloaded/imagesloaded.pkgd.min.js"></script>
  <!-- BigVideo -->    
  <script src="bower_components/video.js/dist/video-js/video.js"></script>

      <script src="bower_components/BigVideo.js/css/bigvideo.css"></script>
  <script src="bower_components/BigVideo.js/lib/bigvideo.js"></script>

    <!-- Basic Page Needs
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <meta charset="utf-8">
    <title>Page Title</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Mobile Specific Metas
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/skeleton.css">
    <!-- Favicon
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <link rel="icon" type="image/png" href="images/favicon.png">
  </head>
  <body>
    <!-- Primary Page Layout
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <div class="container">
        <div id="hello" >
          <script type="text/javascript">
          $(function() {
              var options = {
                controls: false,
                doLoop: true,
                useFlashForFirefox: false,
                poster: "initialVid.png",
              }
              var BV = new $.BigVideo(options);
              BV.init();
              BV.show([
              { type: "video/webm", src: "forest_ski.webm"},
              { type: "video/mp4", src: "forest_ski.mp4"}
              ]);
            });
          </script>
      </div>
    </div>
  <!-- End Document
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  </body>
  </html>

无论如何，我已经解决了这个问题。这是因为我没有将bigvideo.css作为css文件来引用。如果有人碰到这个，那就是你的问题！

相关文章：