如何在 videojs 中使用徽标插件

编程问答 2022-05-29

问题描述

我尝试在 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>

谁能更正我的代码？

以及如何禁用字幕控制？

谢谢

解决方法

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

  1. 首先，如果您不使用节点模块，则需要获取 /*Declare the table for unified ingredients*/ declare @deletedIngredients table ( id int,unifiedId int ); /*Cleanup of duplicate ingredients and catch the deleted records with the corresponding unified Id */ with i_del as ( /*Leave only the first (by ID) record with the same name*/ select id,min(id) over(partition by title) as unifiedId from #Ingredients ) delete from i /*Catch the deleted records and corresponding unified Ids*/ output deleted.id,i_del.unifiedId into @deletedIngredients from #Ingredients as i join i_del on i.id = i_del.id /*Remove only duplicates where Id is not equal to the master record Id*/ where i.id <> i_del.unifiedId ; /*Then do an update of IDs on the RecipeIngredients and delete the duplicates from it (that can be created during the unification of Ingredients_Id) */ merge into #RecipeIngredients as t using ( select ri.id,i.unifiedid,/*Number the rows per Receipe_Id and new Ingredient_Id*/ row_number() over( partition by ri.Recipe_Id,i.unifiedId order by ri.id asc ) as rn from #RecipeIngredients as ri join @deletedIngredients as i on ri.Ingredient_Id = i.id ) as s on t.id = s.id /*The first record should have the new unified id*/ when matched and s.rn = 1 then update set ingredient_id = s.unifiedId /*And unintentionally created duplicate should be removed*/ when matched and s.rn > 1 then delete ; commit; 来自 videojs-logo 插件包（你可以 从 here ) 将它添加到您的项目中（在我的情况下，我将它放在文件夹名称脚本中 在 src 文件夹中）。
  2. 在 videojs-logo.min.js 下的 html 中添加脚本标记 您的 html 应如下所示：
<script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>

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

  • 第一个是你的标志太大
  • 第二个在您的视频播放器下
    要解决此问题，您必须通过将宽度传递给 <!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> 来更改大小，如下所示：
player.logo()

在修复videoPLAyer下的logo之后，你需要做一些css的东西：
如果您已经有一个样式表，只需在 player.logo({ image:https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png',width:25 }); 类中向 im​​g 添加样式，如下所示：

.vjs-logo-content

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

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

result

（不要尝试点击播放按钮，这是一个快照；-)） 我不能做一个在沙盒中工作的例子（babel 的问题），抱歉，但它在我的机器上工作。这个答案的所有源代码都是there

htmljavascriptvideo.js