我如何在 videojs 中使用徽标插件

Question

我尝试在 videojs 中使用徽标插件，但未显示徽标。我知道我添加插件的方式有问题我需要帮助

这是我的代码

<head>

  <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />

</head>

<body>

  <video
    id="my-video"
    class="video-js vjs-big-play-centered"
    controls

    preload="auto"
    width="640"
    height="264"
    poster="MY_VIDEO_POSTER.jpg"
    
    data-setup="{}"
  >
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
    <track label="English subtitles" kind="subtitles" srclang="en" src="https://gist.githubusercontent.com/samdutton/ca37f3adaf4e23679957b8083e061177/raw/e19399fbccbc069a2af4266e5120ae6bad62699a/sample.vtt" default="">

    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>
  

  
  
  
  
<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-logo.min.js"></script>
<script>
  var player = videojs('my-video');

  player.logo({
    image: 'https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png'
  });
</script>

  <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>

</body>

任何人都可以纠正我的代码吗？

以及如何禁用字幕控制？

谢谢

Answer 1

好的，经过多次尝试，我找到了解决方案：

首先，如果您不使用节点模块，则需要获取 videojs-logo.min.js 来自 videojs-logo 插件包（你可以从 here ) 将它添加到你的项目中（在我的例子中，我把它放在文件夹名称脚本中在 src 文件夹中）。
在 <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script> 下的 html 添加脚本标签你的 html 应该是这样的：

<!DOCTYPE html>
<html>
<head>
  <head>
    <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
  
  </head>
  
  <body>
  
    <video
      id="my-video"
      class="video-js vjs-big-play-centered"
      controls
  
      preload="auto"
      width="640"
      height="264"
      poster="./src/assets/MY_VIDEO_POSTER.png"
      
      data-setup="{}"
    >
     
      <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank"
          >supports HTML5 video</a
        >
      </p>
    </video>
   

   <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
     
   
     <script src="./src/script/videojs-logo.min.js"></script>
    <script>
    
      var player = videojs('my-video');
    
      player.logo({
    image:https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png',
    
        
      });
      
    </script>  
     
  </body>
</html>

刷新页面后你应该有这样的东西：
如您所见，有两个问题：

第一个是你的logo太大了
第二个在你的视频播放器下面
要解决这个问题，您必须通过将宽度传递给 player.logo() 来更改大小，如下所示：

    player.logo({ 
          image:https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png',
          width:25
      });

之后要修复 videoPLayer 下的徽标，您需要做一些 css 事情：
如果您已经有样式表，只需将样式添加到 .vjs-logo-content class 中的 img，如下所示：

.vjs-logo-content > img{
    position:absolute;
}

或者如果您不想添加样式表，您可以像这样直接在您的 html 文件中添加它：

    <html>
    <head>
      <head>
        <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
    <style>
    .vjs-logo-content > img{
        position:absolute;
    }
    </style>
      </head>

（不要尝试点击播放按钮这是快照 ;-)）我无法在 sandBox（babel 问题）中创建一个示例，对此感到抱歉，但它在我的机器上运行。这个答案的所有源代码都是 there

我如何在 videojs 中使用徽标插件

How do I use logo plugin in videojs

html

javascript

css

video.js