如何在 videojs 中使用徽标插件 [英] How do I use logo plugin in videojs

查看：82
本文介绍了如何在 videojs 中使用徽标插件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

这是我的代码

<link href="https://vjs.zencdn.net/7.10.2/video-js.css";rel=样式表"/><身体><视频id="我的视频"class="video-js vjs-big-play-central";控制预加载=自动"宽度=640"高度=264"海报=MY_VIDEO_POSTER.jpg";数据设置={}"；><source src="http://techslides.com/demos/sample-videos/small.mp4";类型=视频/mp4"；/><track label="英文字幕";kind=字幕"srclang="en";src=https://gist.githubusercontent.com/samdutton/ca37f3adaf4e23679957b8083e061177/raw/e19399fbccbc069a2af4266e5120ae6bad62699a/sample.vtt"默认="><p class="vjs-no-js">要观看此视频，请启用 JavaScript，并考虑升级到网络浏览器<a href="https://videojs.com/html5-video-support/";目标=_blank"；>支持HTML5视频</a></p></视频><script src="//path/to/video.min.js"></script><script src="//path/to/videojs-logo.min.js"></script><脚本>var player = videojs('my-video');玩家标志({图片:'https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png'});<script src=https://vjs.zencdn.net/7.10.2/video.min.js"></script>

谁能更正我的代码?

以及如何禁用字幕控制?

谢谢

解决方案

ok，经过多次尝试，我找到了解决方案:

  1. 首先，如果您不使用节点模块，则需要获取videojs-logo.min.js 来自 videojs-logo 插件包(你可以从如您所见，有两个问题:

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

     player.logo({图片:https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png',宽度:25});

    在修复videoPLAyer下的logo之后，你需要做一些css的东西:
    如果您已经有一个 styleSheet，只需在 .vjs-logo-content 类中向 im​​g 添加样式，如下所示:

    .vjs-logo-content >图片{位置:绝对；}

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

     <头><头><link href="https://vjs.zencdn.net/7.10.2/video-js.css";rel=样式表"/><风格>.vjs-logo-内容 >图片{位置:绝对；}</风格>

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

    I tried to use logo plugin in videojs but the logo doesn't show up. I know there is a problem with my way to add the plugin i need help please

    Here's my code

    <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>

    can anyone correct my code please ?

    and how can i disable the subtitles control ?

    Thank you

    解决方案

    ok after many and many tries I found a solution:

    1. first if you don't use node modules you will need to get the videojs-logo.min.js from the package videojs-logo plugin (you can get it from here ) add it in your project (in my case I put it in folder name script in a src folder).
    2. Add the script tag in your html under <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script> your html should look like this:

    <!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>

    after refreshing the page you should have something like this:
    As you can see there is two issues :

    • the first one is that your logo is too big
    • the second one it is under your video player
      To fix that you have to change the size by passing a width to player.logo() like this:

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

    After that to fix the logo under the videoPLayer you need to do some css stuff:
    if you already have a styleSheet just add style to img in .vjs-logo-content class like this:

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

    OR if you don't want to add a styleSheet you can add it like this directly in your html file :

        <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>

    (don't try to click on play button this is a snapshot ;-) ) I can't make an exemple working in sandBox (issue with babel) sorry for that but it's working on my machine. all source code of this answer is there

    这篇关于如何在 videojs 中使用徽标插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆