Search code examples
javascripthtmlcssvideo.js

How do I use logo plugin in videojs

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

Solution

  • 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:
    first render 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>

    result

    (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