js设置视频第一帧

最新推荐文章于 2024-01-10 13:15:23 发布

新时代_打工人

最新推荐文章于 2024-01-10 13:15:23 发布

阅读量855

点赞数

分类专栏：其它文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_46361270/article/details/128149264

版权

其它专栏收录该内容

18 篇文章 0 订阅

订阅专栏

#1.最简单的方法

  <!-- 设置poster -->
  <video src="" poster=""></video>

#2.拼接参数(第三方平台)

如果视频是在第三方平台实现。七牛云、阿里云等云端存储平台功能强大，不仅具有海量的存储功能，平台封装的还有很多功能丰富的API。

var url='http://xxx.xxx.com/demo.mp4';

###阿里云

url+'?spm=qipa250&x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast'

###七牛云

url+'?vframe/jpg/offset/3/w/300/h/200'
  // 其中“jpg”为生成图片的格式，‘8’为截取视频第8秒的截图，“w”为宽度300px，“h”为高度200px 。

#3.canvas生成图片

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
</head>

<body>
  <div class="video" id="video"></div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
  var url='xxxxxxxxxxx';
  // 封装函数百度找的，可行
  function getVideoBase64(url) {
        return new Promise(function (resolve, reject) {
            let dataURL = '';
            let video = document.createElement("video");
            video.setAttribute('crossOrigin', 'anonymous');//处理跨域
            video.setAttribute('src', url);
            video.setAttribute('width', 400);
            video.setAttribute('height', 240);
            video.setAttribute('preload', 'auto');
            video.addEventListener('loadeddata', function () {
                let canvas = document.createElement("canvas"),
                    width = video.width, //canvas的尺寸和图片一样
                    height = video.height;
                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(url).then(res=>{
      console.log(res)
    $('#video').append(`<video src="" poster="${res}" width="400" height="200"></video>`)
    })
 </script>
</html>

#扩展