移动端视频video封面无法显示

最新推荐文章于 2023-07-14 15:14:43 发布

啥也不会的程序辕

最新推荐文章于 2023-07-14 15:14:43 发布

阅读量4.3k

点赞数

分类专栏： html 文章标签： html5 js canvas

本文链接：https://blog.csdn.net/weixin_44425559/article/details/108512401

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

移动端无法自动获取封面

**
网上的办法几乎试了遍，没什么有用的。
最后还是加了封面图。
不过100多个视频，不可能一个一个的去截图视频封面。
用代码遍历了所有的视频。
最后获取了base64，来当视频封。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>capture screen</title>
</head>

<body>
  <div id="aa"></div>
  </video>
  <script src='https://test.yunjing720.cn/themes/yunjing720/public/assets/js/jquery-3.1.1.min.js'></script>
  <script type="text/javascript">
    var arr = []

    var list = [{
        img: "",
        name: "aaa",
        flag: "false",
        url: "./static/video/1/1.mp4",
        classificationOne: "制造",
        classificationTwo: "制造",
        classificationThree: "制造"
      },
      {
        img: "",
        name: "bbb",
        flag: "false",
        url: "./static/video/1/2.mp4",
        classificationOne: "设备",
        classificationTwo: "设备",
        classificationThree: "设备"
      }
    ]

    function a(num) {
      var video, output;
      var canvas = document.createElement('canvas')
      video = document.getElementById('video' + num)
      video.setAttribute('crossOrigin', 'anonymous')
      canvas.width = 172
      canvas.height = 95
      video.onloadeddata = (() => {
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
        var dataURL = canvas.toDataURL('image/png')
        video.setAttribute('poster', dataURL)
        arr.push(dataURL)

      })
    }
    
    list.forEach((item, index) => {
      $('body').append(
        `<video id="video${index}" src='${item.url}#t=3' poster='' οnlοadstart='a(${index})' ></video>`)
    })
  </script>
</body>
</html>

需要在本地服务器运行起来

如果有好方法能显示出来，求指点。

啥也不会的程序辕

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端视频video封面无法显示

**移动端无法自动获取封面**网上的办法几乎试了遍，没什么有用的。最后还是加了封面图。不过100多个视频，不可能一个一个的去截图视频封面。用代码遍历了所有的视频。最后获取了base64，来当视频封。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>capture screen</title></head><body&g
复制链接

扫一扫