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

时间:2018-12-24 17:52:51

标签: video html5-canvas

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

我修改了showImageAt(secs)函数,以使用PNG图像编写发帖人属性。

<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>

enter image description here

该功能用PNG图像填充海报属性,但视频播放器海报为空白(白色)。 出了点问题。 有什么建议吗?

0 个答案:

没有答案