javascript - 在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

我确实使用视频循环和容器内的 anchor 标记封闭的水印制作了这个示例。

更新:我看到您的评论说您希望使用 Logo 作为视频的控件。所以我只是用一个简单的 javascript 部分更新了我的截图:当单击 Logo 时，它会检查视频状态:如果暂停，则播放；如果暂停，则播放。如果播放它会暂停。

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 source: html5demos