Yap filigran (bkz oyun için bir dinleyici olmak ve stop

Question

ben bir şekilde Video.js oynatıcıya filigran olarak bir görüntü başardı için. Ben eklemek zorunda Neler?

kodu aşağıda ben Video döngü ve bir konteynerin içinde bağlantı etiketlerine çevrili bir filigranla Bu örneği yaptın

<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

konsolunda oyuncunun html kısaltılmış versiyonudur.

GÜNCELLEME: Yorumunuzu, videoyu videonun kontrolü olarak kullanmak istediğinizi söylediğinizi gördüm. Bu yüzden, basit bir javascript parçası ile snipped'i güncelledim: Logo tıklandığında, video durumunu kontrol eder: eğer duraklatırsa oynatır; eğer çalınırsa duraklar.

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>

video kaynağı: html5demos