Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Video.js

How Do I Use Logo Plugin In Videojs

Post a Comment
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

Solution 1:

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><linkhref="https://vjs.zencdn.net/7.10.2/video-js.css"  /></head><body><videoid="my-video"class="video-js vjs-big-play-centered"controlspreload="auto"width="640"height="264"poster="./src/assets/MY_VIDEO_POSTER.png"data-setup="{}"
    ><pclass="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <ahref="https://videojs.com/html5-video-support/"target="_blank"
          >supports HTML5 video</a
        >
      </p></video><scriptsrc="https://vjs.zencdn.net/7.10.2/video.min.js"></script><scriptsrc="./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><linkhref="https://vjs.zencdn.net/7.10.2/video-js.css"  /><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

Post a Comment for "How Do I Use Logo Plugin In Videojs"