Сделать водяной знак на video.js игрока, чтобы стать слушателем для игры и остановить

Question

я каким-то образом удалось получить изображение в качестве водяного знака в video.js игрока (см. Что я должен добавить?

Код ниже приводится сокращенный вариант HTML игрока в консоли

<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

Я делал этот пример с петлей видео и водяными знаками охваченных якорными тегами внутри контейнера.

UPDATE: Я видел ваш комментарий, говоря, что вы хотите использовать логотип в качестве контроля видео. Поэтому я просто обновил свою статью с помощью простой части javascript: когда щелкнул логотип, он проверяет состояние видео: если он приостановлен, он воспроизводит; если его воспроизведение приостанавливается.

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>

Источник видео: html5demos