Flowplayer背景图像不出现答案

【问题标题】：Flowplayer background image doesn't appearFlowplayer背景图像不出现
【发布时间】：2013-10-08 20:58:34
【问题描述】：

我将 Flowplayer 用于客户的自定义 Intranet，并使用 CKEditor 添加页面内容。 HTML 中无法访问网站的 HEAD），所以我一直在使用内联 CSS 语法。

客户端请求在点击播放之前在播放器区域显示图像。我可以只使用内联 CSS 获得启动画面或海报吗？

<p>Here is a new sample video.</p>
<script src="http://releases.flowplayer.org/js/flowplayer-3.2.12.min.js"></script>

<div id="clip01" style="margin:0px auto; width:500px;height: 300px; text-align:center; background-image:url('http://31.media.tumblr.com/tumblr_lrqfj1ELAQ1qzi2ewo1_500.jpg');"></div>
<script>
   $f("clip01", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
      clip: {
         url: 'mp4:vod/demo.flowplayervod/bbb-800.mp4',
         scaling: 'fit',
         autoPlay: false,
         autoBuffering: true,
         provider: 'rtmp'
      },
      plugins: {
         rtmp: {
            url: "flowplayer.rtmp-3.2.12.swf",
            netConnectionUrl: 'rtmp://rtmp01.hddn.com/play'
        }
      },
      canvas: {
         backgroundGradient: 'none'
      }
   });
</script>

到目前为止，我没有尝试过显示背景图片。播放器以黑色背景加载。

这是一个玩弄它的小提琴：http://jsfiddle.net/GuVbJ/

【问题讨论】：

标签： javascript css background background-image flowplayer

【解决方案1】：

您需要做的就是在 flowplayer div 中放置一个图像。 Flowplayer 然后将图像用作启动画面。当您单击图像时，将播放视频。

示例

<script src="http://releases.flowplayer.org/js/flowplayer-3.2.12.min.js"></script>

<div id="clip01" style="margin:0px auto; width:500px;height: 300px; text-align:center;">
    <img src="http://31.media.tumblr.com/tumblr_lrqfj1ELAQ1qzi2ewo1_500.jpg" alt="Bacon" />
</div>
<script>
    $f("clip01", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
      clip: {
          url: 'mp4:vod/demo.flowplayervod/bbb-800.mp4',
          scaling: 'fit',
          autoBuffering: true,
          provider: 'rtmp'
      },
      plugins: {
          rtmp: {
              url: "flowplayer.rtmp-3.2.12.swf",
              netConnectionUrl: 'rtmp://rtmp01.hddn.com/play'
          }
      },
      canvas: {
         backgroundGradient: 'none'
      }
   });
</script>

见jsFiddle

有关启动画面的更多详细信息，请参阅flowplayer docs

【讨论】：

【解决方案2】：

只有 CSS 会很困难，你可以用 js 在上面放置一个 div 并在播放时移除。

【讨论】：

【解决方案3】：

Flowplayer no longer offers 一个独立的播放器。旧版本仍可通过 GPL v3 许可证获得，因此这里有一个不依赖 Flash 的解决方案：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flowplayer/7.2.4/skin/skin.css">
<style>
   body {
      font-family: verdana, tahoma, arial, sans-serif;
      font-size: 14px;
      margin: 0;
      padding: 0;
   }
   #content {
      margin: 50px auto;
      max-width: 500px;
   }
   #css-poster {
      background-image: url(https://31.media.tumblr.com/tumblr_lrqfj1ELAQ1qzi2ewo1_500.jpg);
      background-color: #000;
      background-size: 200%;
      -webkit-transition: background 1s .5s;
      -moz-transition: background 1s .5s;
      transition: background 1s .5s;
   }
   #css-poster.is-poster {
      background-size: 100%;
   }
</style>
<div id="content">
   <div id="css-poster" data-aspect-ratio="47:25" class="flowplayer no-volume">
      <video>
         <source type="video/webm" src="https://edge.flowplayer.org/black/470x250.webm">
         <source type="video/mp4"  src="http://p.demo.flowplayer.netdna-cdn.com/vod/demo.flowplayer/bbb-800.mp4">
      </video>
   </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowplayer/7.2.4/flowplayer.min.js"></script>

这是fiddle。

【讨论】：