快捷導航

js截取video視頻某一幀做封面的簡單案例(附完整代碼)

更新時間：2024年04月10日 10:40:53 作者：平淡才是真_6210

最近碰到一個需求,要求獲取video視頻某一幀做封面圖片,這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于js截取video視頻某一幀做封面的簡單案例,需要的朋友可以參考下

可以使用 canvas元素來截取視頻某一幀并生成封面。

首先，在 video 標簽上設(shè)置視頻源地址和自動播放屬性：

<video src="video.mp4" autoplay></video>

然后，在 canvas 標簽上定義寬高和樣式，并通過 JavaScript 獲取視頻元素和 canvas 元素：

<canvas width="640" height="360" style="display:none;"></canvas>

<script>
  const video = document.querySelector('video');
  const canvas = document.querySelector('canvas');
  const ctx = canvas.getContext('2d');
</script>

接著，定義一個函數(shù)來截取視頻某一幀，并將其渲染到 canvas 上：

<script>
  function captureFrame() {
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  }
</script>

在需要生成封面的地方調(diào)用該函數(shù)即可：

<button onclick="captureFrame()">生成封面</button>

最后，將 canvas 元素轉(zhuǎn)換為圖片元素并插入到頁面中：

<script>
  function captureFrame() {
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    const dataURL = canvas.toDataURL();
    const img = document.createElement('img');
    img.src = dataURL;
    document.body.appendChild(img);
  }
</script>

完整代碼如下：

<video src="video.mp4" autoplay></video>
<canvas width="640" height="360" style="display:none;"></canvas>

<button onclick="captureFrame()">生成封面</button>

<script>
  const video = document.querySelector('video');
  const canvas = document.querySelector('canvas');
  const ctx = canvas.getContext('2d');

  function captureFrame() {
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    const dataURL = canvas.toDataURL();
    const img = document.createElement('img');
    img.src = dataURL;
    document.body.appendChild(img);
  }
</script>

附：js截取視頻第一幀作為封面

在vue的v-for循環(huán)中，直接video標簽進行列表渲染時，滾動列表頁面會很卡，所以最好以img標簽渲染視頻封面圖，點擊后再播放視頻。

具體代碼如下：

//取視頻的第一幀作為封面
function cutPicture(item) {   //這里的item是列表的每一項
  let video = document.createElement("video");
  video.style = "position:fixed; top: 9999px;left:9999px;z-index:-9999";
  video.preload = "metadata";
  video.currentTime = 1; //截取的視頻第一秒作為圖片
  video.src = item.videoUrl;
  video.setAttribute("crossOrigin", "anonymous");
  video.width = 113;
  video.height = 75;
  document.body.appendChild(video);
  video.onloadeddata = function () {
    let canvas = document.createElement("canvas");
    canvas.width = 113;
    canvas.height = 75;
    canvas.getContext("2d").drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
    var oGrayImg = canvas.toDataURL("image/jpeg");
    item.imgUrl = oGrayImg; //這里輸出的imgUrl就是視頻的封面圖
    this.remove();
  };
  return item;
}

總結(jié)

到此這篇關(guān)于js截取video視頻某一幀做封面的文章就介紹到這了,更多相關(guān)js截取video視頻幀做封面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: