Make Wasserzeichen auf Video.js Spieler ein Zuhörer für das Spiel zu werden und stoppen

Question

ich schaffte es irgendwie, ein Bild als Wasserzeichen in den Video.js Spieler zu erhalten (siehe. Was muss ich hinzufügen?

Der Code ist eine verkürzte Version der hTML des Spielers in der Konsole

<div class="container_video"> 
 
     <div class= 
 
     "video-js vjs-paused my-video_0-dimensions vjs-controls-enabled vjs-workinghover vjs-user-inactive" 
 
     id="my-video_0"> 
 
      <video class="vjs-tech" id="my-video_0_html5_api" preload="auto" 
 
      src="files/videosxy.mp4"><source src="files/videosxy.mp4" title= 
 
      "2.1 Knochen.mp4" type="video/mp4"></video> 
 
      <div></div> 
 
      <div class="vjs-poster vjs-hidden" tabindex="-1"></div> 
 
      <div class="vjs-text-track-display vjs-hidden"></div> 
 
      <div class="vjs-loading-spinner" dir="ltr"></div> 
 
      <img class="watermark" src="files/video_watermarks/1.png" style="opacity: 0.5; width: 100%;"> 
 
      <button aria-live="polite" class="vjs-big-play-button" type="button"><span class="vjs-control-text">Play Video</span></button> 
 
      <div class="vjs-control-bar" dir="ltr" role="group"> 
 
       <button aria-live="polite" class= 
 
       "vjs-play-control vjs-control vjs-button" type= 
 
       "button"><span class="vjs-control-text">Play</span></button> 
 
       <div aria-live="polite" class= 
 
       "vjs-volume-menu-button vjs-menu-button vjs-menu-button-inline vjs-control vjs-button vjs-volume-menu-button-horizontal vjs-vol-3" 
 
       role="button" tabindex="0"> 
 
        <div class="vjs-menu"> 
 
         <div class="vjs-menu-content"> 
 
          <div aria-label="volume level" aria-valuemax="100" 
 
          aria-valuemin="0" aria-valuenow="100.00" 
 
          aria-valuetext="100.00%" class= 
 
          "vjs-volume-bar vjs-slider-bar vjs-slider vjs-slider-horizontal" 
 
          role="slider" tabindex="0"> 
 
           <div class="vjs-volume-level"> 
 
            <span class="vjs-control-text"></span> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </div><span class="vjs-control-text">Mute</span> 
 
       </div> 
 
       <div class="vjs-current-time vjs-time-control vjs-control"> 
 
        <div aria-live="off" class="vjs-current-time-display"> 
 
         <span class="vjs-control-text">Current Time</span> ...

Answer 1

ich dieses Beispiel mit Video-Loop gemacht habe und durch Anker-Tags in einem Behälter eingeschlossen Wasserzeichen.

UPDATE: Ich sah Ihren Kommentar sagen, dass Sie das Logo als Video-Steuerelement verwenden möchten. Also habe ich gerade meine Snipped mit einem einfachen Javascript-Teil aktualisiert: Wenn das Logo angeklickt wird, überprüft es den Video-Status: wenn es pausiert wird, spielt es; Wenn es spielt, hält es an.

function controlVid(){ 
 
var vid = document.getElementById("player"); 
 

 
if (vid.paused) { 
 
vid.play(); 
 
} 
 
    
 
else { 
 
vid.pause(); 
 
} 
 
}

.container { 
 
    display: inline-block; 
 
    position: relative; 
 
    outline: 2px dashed hotpink; 
 
} 
 

 
video { 
 
    vertical-align: bottom; 
 
} 
 

 
#logo { 
 
    position: absolute; 
 
    top: 45px; 
 
    left: 0px; 
 
    right: 0px; 
 
    margin: auto; 
 
    opacity: 0.4; 
 
    height: 80px; 
 
} 
 

 
#logo:hover { 
 
    opacity: 1; 
 
}

<div class=container> 
 
    
 
<video height="180" loop id="player"> 
 
    <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4"> 
 
    Your browser does not support HTML5 video. 
 
</video> 
 

 
    <a href=# onclick="controlVid()"><img src="https://s27.postimg.org/pjc1oyyj7/1484191470_psyduck.png" id="logo" alt="logo"></a> 
 

 
</div>

Videoquelle: html5demos