如何使用画布进行视频预览？

5t7ly7z5 于 2021-09-23 发布在 Java

关注(0)|答案(2)|浏览(539)

这是我的第一个问题！我试图制作一个网站，展示我制作的视频，我希望我的观众在将鼠标悬停在一个或多个元素上时可以看到视频预览。我只是这么做，但我有一些问题。让我先给你们看一个代码示例，然后问你们我的问题。

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div id="thumbs"  style="width:216px;height:468px;border: 5px solid blue;background-color:red;"><canvas onmouseover="getid1(this);" onmouseout="getid2(this);" id="canvas1"></canvas></div>

        <script>
            var thumbsList = [];
            var delay = 100;
            var i = 0;
            var video = document.createElement("video");
            var a = 0;
            var m = document.getElementById("canvas1");
            var mtx = m.getContext("2d");
            var generate = true;
            var animstop = false;
            var vidFrames = 64;

            m.width = 216;
            m.height = 468;
            video.preload = "auto";
            video.src = "aaaa.mp4";

            function stranim(bb){
                    if(generate){
                        animstop = false;
                        video.currentTime = i;
                        generateVid();
                        generate = false;
                    }else{
                        animstop = false;
                        startAnim();
                    }
            }

            function stpanim(bb) {

                clearTimeout();
                animstop = true;
                mtx.drawImage(thumbsList[0], 0, 0); 
            }
            // if i replace this section with generateVid() the code is working
            /*video.addEventListener('seeked', function() {
                var d = (video.duration / vidFrames) * 2;
                generateThumbnail();
                i += video.duration / vidFrames;
                if (i <= video.duration) {
                    video.currentTime = i;
                    generateVid()
                    if(d == i){
                        startAnim();
                    }
                }
            });*/

            function generateVid() {
                var d = (video.duration / vidFrames) * 2;
                generateThumbnail();
                i += video.duration / vidFrames;
                if (i <= video.duration) {
                    video.currentTime = i;
                    generateVid();
                    if(d == i){
                        startAnim();
                    }
                }
            }

            function generateFirstThumbnail() {
                var c = document.createElement("canvas");
                var ctx = c.getContext("2d");
                c.width = 216;
                c.height = 468;
                ctx.drawImage(video, 0, 0, 216, 468);
                thumbsList.push(c); 
                thumbs.appendChild(m);
                mtx.drawImage(thumbsList[0], 0, 0); 
                i += video.duration / vidFrames;
            }

            function generateThumbnail() {
                var c = document.createElement("canvas");
                var ctx = c.getContext("2d");
                c.width = 216;
                c.height = 468;
                ctx.drawImage(video, 0, 0, 216, 468);
                thumbsList.push(c); 
            }

            function startAnim() {
                var currentFrame = 0;
                function anim() {               
                    if(currentFrame != (vidFrames - 1) && animstop == false){
                        currentFrame = (currentFrame + 1) % thumbsList.length;
                        mtx.drawImage(thumbsList[currentFrame], 0, 0);                          
                        setTimeout(anim, delay); 
                    }
                }
                anim(); 
            }

            function getid1(obj) {
                stranim(obj.id)
            }

            function getid2(obj) {
                stpanim(obj.id)
            }
            window.onload = function(){

                generateFirstThumbnail();
            };

        </script>
    </body>
</html>

问题是：1-为什么我的generateId（）函数不起作用？此函数与eventlistener类似。2-我想在一个类上添加此代码，以便在多个视频上使用它，但idk how和我认为这不能用js类来完成。（我搜索了这么多网站）3-我可以使用2d数组来保存我的视频预览，但这不会降低我的网站的加载速度，还是不会填满用户的内存？4-有什么方法可以让代码变得更好、更容易？（我不想无缘无故地使用jquery）。

JavaScript Html Canvas html5-canvas video-thumbnails

来源：https://stackoverflow.com/questions/68329019/how-to-make-a-video-preview-with-canvas

2条答案

按热度按时间

krcsximq1#

对于纯js方法，您可以检查这一点，顺便说一句：https://codepen.io/tepexic/pen/bazygje
html:

<input type="file" accept="video/*" id="input-tag"/>
<hr>
<video controls id="video-tag">
  <source id="video-source" src="splashVideo">
  Your browser does not support the video tag.
</video>

const videoSrc = document.querySelector("#video-source");
const videoTag = document.querySelector("#video-tag");
const inputTag = document.querySelector("#input-tag");

inputTag.addEventListener('change',  readVideo)

function readVideo(event) {
  console.log(event.target.files)
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      console.log('loaded')
      videoSrc.src = e.target.result
      videoTag.load()
    }.bind(this)

    reader.readAsDataURL(event.target.files[0]);
  }
}

但对于其他方法，我可能会使用http://ffmpeg.org/ 库生成预览视频（例如10秒视频）和https://videojs.com 用于视频播放器的库，以便用户悬停播放器时可以进行控制。

赞(0）回复(0）举报 2021-09-23

1mrurvl12#

我刚刚对你的代码做了一些测试，你的视频只被搜索了一次。之后不会引发任何事件，这意味着您的缩略图将保持不变。
下面是我如何修复它的

function generateVid() {
            var d = (video.duration / vidFrames) * 2;
             generateThumbnail();
            i += video.duration / vidFrames;

            if (i <= video.duration) {
               video.currentTime = i;
                console.log("starting seeking");

                if(d == i){
                    startAnim();
                }

            }

        }

        video.onseeked = (event) => {
        if (animstop == false)
            {
            setTimeout(generateVid, delay); 
            }

        console.log("seeked");
        };

赞(0）回复(0）举报 2021-09-23

我来回答

如何使用画布进行视频预览？

2条答案

相关问题

热门标签

最新问答