如何在移动HTML5视频中动态使用第一帧作为海报？

<video id="myVideo" src="video.mp4"></video>

var video = document.getElementById("myVideo");
video.addEventListener("loadedmetadata", function() {
  // 在此处执行下一步操作
});

var canvas = document.createElement("canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
var posterURL = canvas.toDataURL(); // 获取第一帧图像的DataURL

video.setAttribute("poster", posterURL);