Question

我不想使用视频海报，在用户点击播放之前，视频中没有显示任何内容。如何从视频中获取屏幕截图，只是为了不使缩略图为空。

<video id="player1" width="640" height="360" style="max-width:100%;" poster="<?php echo $domain_root;?>/images/<?php echo $value['poster'];?>" preload="none" controls playsinline webkit-playsinline>
    <source src="<?php echo $domain_root;?>/images/<?php echo $value['btitle'];?>" type="video/mp4">
    <source src="<?php echo $domain_root;?>/images/<?php echo $value['btitle'];?>" type="video/ogg">
    <track srclang="en" kind="subtitles" src="<?php echo $domain_root;?>/mediaelement.vtt">
    <track srclang="en" kind="chapters" src="<?php echo $domain_root;?>/chapters.vtt">
</video>

Answer 1

您可以使用某些js库，例如 popcorn.capture

示例：从第10秒的视频中捕获图像并创建海报图片：

jsfiddle

<html>
<head>
    <script src="http://cdn.popcornjs.org/code/dist/popcorn.min.js"></script>
    <script src="../src/popcorn.capture.js"></script>
</head>
<body  onload="myFunction()">

  <div id="unmoved-fixture">
        <video height="180" width="300" id="video-target">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></source>
        </video>
  </div>
<script>
function myFunction() {
   var $pop = Popcorn( "#video-target" ),
    poster;

    $pop.capture({
    at: 10 // captures the image from 10th second of video.
    });
}
</script>
</body>
</html>

毕竟看一下这个demo和github

我不想使用视频海报

1 个答案: