xgplayer 截取图片 代码实例

当使用xgplayer播放器时，您可以通过以下代码来截取视频中的图片：

// 创建一个video标签
var video = document.createElement('video');
// 设置视频源
video.src = 'your_video_url';
// 监听视频加载完成事件
video.addEventListener('loadeddata', function() {
  // 创建一个canvas元素
  var canvas = document.createElement('canvas');
  // 设置canvas的宽高与视频一致
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  // 在canvas上绘制视频帧
  canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
  // 将canvas转换为图片
  var image = new Image();
  image.src = canvas.toDataURL();
  // 将图片插入到页面中
  document.body.appendChild(image);
});

上述代码中，您需要将 `'your_video_url'` 替换为您自己的视频地址。当视频加载完成后，将会在页面上插入一张截取的图片。

请注意，由于涉及到跨域问题，您需要确保视频源的跨域设置正确，否则可能会导致无法截取图片。