将 PLYR 用于 Youtube 视频 - 海报图片？答案

【问题标题】：Using PLYR for Youtube videos - poster image?将 PLYR 用于 Youtube 视频 - 海报图片？
【发布时间】：2017-10-22 06:02:42
【问题描述】：

我正在使用 Plyr (https://github.com/sampotts/plyr) 在线播放 Youtube 视频。但是我现在想在播放器中添加一张海报，这样我就可以在视频播放之前使用缩略图。

Plyr 支持这一点，但我无法让它工作。我目前正在以最简单的形式使用 Plyr：

Youtube 视频：<div data-type="youtube" data-video-id="bTqVqk7FSmY"></div>

初始化 Plyr：<script>plyr.setup();</script>

就是这样。我怎样才能让上面的 sn-p 显示"/myposter.png" 的海报？

【问题讨论】：

【解决方案1】：

这里是一些实现youtube视频自定义封面图片的例子：

player.poster = '../Images/landing/attendance/Admin Back.png';

或

var player = new Plyr('#vid'); setTimeout(() => { player.poster = 'http://ichef.bbci.co.uk/images/ic/640x360/p03hj5f7.jpg'; }, 500)

或

【讨论】：

【解决方案2】：

只需在html5视频标签上使用poster属性即可：

<video poster="/myposter.png" controls>

【讨论】：