How Do I Use Logo Plugin In Videojs

Question

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:

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).
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"  />
  
  </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 :

Baca Juga

    <html>
    <head>
      <head>
        <link href="https://vjs.zencdn.net/7.10.2/video-js.css"  />
    <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

JavaScript General

How Do I Use Logo Plugin In Videojs

Solution 1:

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