获取视频video第一个帧的图片作为视频的背景图片

2021-09-06 12:03:27 阅读：164 来源： 互联网

获取视频video第一个帧的图片作为视频的背景图片

一般情况下，Android版本可自动获取视频的第一帧作为视频的背景图片，但ios是无法获得的，只能手动为其添加视频的背景图片。
制作这第一帧图片我使用的原理：拿到视频播放路径后，创建一个video标签，将路径传给src，使其自动播放时，截取展示的第一个图片，使用canvas将其画出来，

1、设置video背景图片的属性

在video中属性很多，为视频设置背景图片的属性为：poster，该属性的值就为图片的路径

2、上传本地视频，获取视频的宽高及播放长度等

通过loadeddata事件或onloadedmetadata事件，使用具体如下：

 video.onloadedmetadata = function () {
      const vLength = video.duration; //视频播放的长度
       console.log('vLength', vLength);
       imgWith = video.videoWidth;//视频播放的宽度
       imgHeight = video.videoHeight; // 视频播放的高度
  };
  // 或者
  video.addEventListener('loadeddata', function () {
       const vLength = video.duration; //视频播放的长度
       console.log('vLength', vLength);
       imgWith = video.videoWidth;//视频播放的宽度
       imgHeight = video.videoHeight; // 视频播放的高度
  });
  // 使用loadeddata 也是类似用法

3、实际代码操作

// 我在hooks下写的 
const getVideoBase64 = (url) => {
    return new Promise(function (resolve) {
      let dataURL = '';
      const video = document.createElement('video');

      video.setAttribute('crossOrigin', 'anonymous'); // 处理跨域
      video.setAttribute('src', url);
      video.setAttribute('preload', 'auto');
      video.addEventListener('loadeddata', function () {
        const canvas = document.createElement('canvas');
        console.log('video.clientWidth', video.videoWidth);// 视频宽
        console.log('video.clientHeight', video.videoHeight); // 视频高
        const width = video.videoWidth || 400; // canvas的尺寸和图片一样
        const height = video.videoHeight || 240;// 设置默认宽高为  400  240 
        canvas.width = width;
        canvas.height = height;
        canvas.getContext('2d').drawImage(video, 0, 0, width, height); // 绘制canvas
        dataURL = canvas.toDataURL('image/jpeg'); // 转换为base64
        resolve(dataURL);
      });
    });
  };


//调取getVideoBase64  获取图片的路径
// 利用async...await...来进行获取
const getImgFun = async() =>{
	const videoUrl = '' // 视频播放的路径
	const video = document.getElementById("video") //获取视频标签
	const urlImg = await getVideoBase64(videoUrl) //获取视频播放路径
	video.setAttribute('poster',urlImg)//给视频video属性poster设置值图片路径，即为视频展示的背景图片
}

标签：视频,canvas,const,video,播放,背景图片
来源： https://blog.csdn.net/weixin_45315794/article/details/120130194

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

获取视频video第一个帧的图片作为视频的背景图片