我想在播放时间栏上悬停时获得缩略图

Question

我想在将鼠标悬停在播放时间栏上时获得缩略图。我使用 video.js 但该功能不起作用。

https://videojs.com/

~.html

<video id='my-video' class='video-js' controls preload='auto' width='640' height='264'
              data-embed="default" data-setup='{}'>
                <source src="[filePath]" type='video/mp4'>
                <source src="[filePath]" type='video/webm'>
                <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>

也许我应该添加 Video.js Thumbnails 插件？

https://github.com/brightcove/videojs-thumbnails

Answer 1

你必须只需要按照文档！

<link href="https://vjs.zencdn.net/5-unsafe/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/5-unsafe/video.js"></script>


<div id="instructions">

  <video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px" controls preload="none" poster='http://video-js.zencoder.com/oceans-clip.jpg' data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
    <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
    <source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
  </video>


</div>

<style>
  #instructions {
    max-width: 640px;
    text-align: left;
    margin: 30px auto;
  }
  
  #instructions textarea {
    width: 100%;
    height: 100px;
  }
  /* Show the controls (hidden at the start by default) */
  
  .video-js .vjs-control-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  /* Make the demo a little prettier */
  
  body {
    margin-top: 20px;
    background: #222;
    text-align: center;
    color: #aaa;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: radial-gradient(#333, hsl(200, 30%, 6%));
  }
  
  a,
  a:hover,
  a:visited {
    color: #76DAFF;
  }
</style>

Answer 2

用于 HTML5 视频和音频的简单、可访问且可自定义的媒体播放器

document.addEventListener('DOMContentLoaded', () => {
  // This is the bare minimum JavaScript. You can opt to pass no arguments to setup.
  const player = new Plyr('#player');

  // Expose
  window.player = player;

  // Bind event listener
  function on(selector, type, callback) {
    document.querySelector(selector).addEventListener(type, callback, false);
  }

  // Play
  on('.js-play', 'click', () => {
    player.play();
  });


});

/* This is purely for the demo */

.container {
  max-width: 800px;
  margin: 0 auto;
}

.plyr {
  border-radius: 4px;
  margin-bottom: 15px;
}

<link href="https://cdn.plyr.io/3.4.6/plyr.css" rel="stylesheet" />
<script src="https://cdn.plyr.io/3.4.6/plyr.js"></script>
<div class="container">
  <video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
                <!-- Video files -->
                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576">
                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">
                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4" type="video/mp4" size="1440">

                <!-- Caption files -->
                <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
                    default>
                <track kind="captions" label="Français" srclang="fr" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">

                <!-- Fallback for browsers that don't support the <video> element -->
                <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a>
            </video>

</div>

我想在播放时间栏上悬停时获得缩略图

I want to get a thumbnail when hovering over the playing time bar

javascript

video.js

用于 HTML5 视频和音频的简单、可访问且可自定义的媒体播放器