在HTML5视频中使用视频帧/图像作为海报

Question

看一下：[ https://gist.github.com/westc/5d05341d61dbb0d15aeb75a1d277cf93#file-w3schools-tryhtml5_video-html]

我修改了函数showImageAt（secs），以使用PNG图像编写poster属性。

<script>
  $('#video_live').html('<video id="bkv" poster="" preload="none" controls="controls" width="100%" height="60%" data-title="videolive"><source  type="video/mp4" src="' + video_live + '"></video>') ;
////

secs = 5; ////// frame at second five

function showImageAt(secs) {
  var duration;
  getVideoImage(
    video_live,       //////// url file name  variable
    function(totalTime) {
      duration = totalTime;
      return secs;
    },
    function(img, secs, event) {

      if (event.type == 'seeked') {
      /////////////////////////////////////////////////////////////////////
      document.getElementById('bkv').setAttribute('poster', img.outerHTML);
      /////////////////////////////////////////////////////////////////////
        if (duration >= ++secs) {
          showImageAt(secs);
        };
      }

    }
  );
}
</script>

<div id="video_live" data-ratio="0.4167"></div>

在此处输入图片说明

该功能用PNG图像填充海报属性，但视频播放器海报为空白（白色）。 出了点问题。 有什么建议么 ？