Article From:https://segmentfault.com/q/1010000011125173
Question:

After uploading video, you need to make a cover for video. How do you get it?

Answer 0:

Ah… Just made a function like this, this is a summary of the article, you can refer to it.
https://segmentfault.com/a/11…

Answer 1:

As far as I know, those pictures were intercepted and put on top of them.

Answer 2:

Intercept one by oneself, then use poster= “picture address”.

Answer 3:

Try this: JS implements video screenshots

Test results:

Complete code:

<!doctype html>
<html lang="zh-CN">
    <head>
        <title>Test page < /title>< meta charset= "UTF-8" >< meta name= "viewport" content= "widTh=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1 ">";< /head≫< body>< video id= "video" controls= "controls" >< source SRC= "movie.ogg" > < /source>< source src= "movie.mp4" > < /source>Your browser does not support HTML5< /video>< button id= "capture" > screenshot < /button>< div id= "output" > < /div>< script src= "https://cdn.bootcss.com/jquery/1.12.3/jqUery.js "> < /script>< script>$(function () {()Var video, $outPut;Var scale = 0.25;Var initialize = (function () {()$outpuT = $('#output');Video = $('#video').Get (0);$('#capture').On ('clicK', function () {CaptureImage ();})}) () ()Var captureImage = function () {()Var canvas = document.createElement ("canvas");Canvas.width = video.videoWidth * scale;Canvas.height = video.videoHeight* scale;Canvas.getContext ('2d').DrawImage (video, 0, 0, canvas.width, canvas.height));Var image = document.createElement ('img');Image.src = canvas.toDAtaURL ();$output.prepend (image);}})< /script>< /body>< /html>

Note: Video must be deployed locally, otherwise cross-domain screenshots will occur and the video can be downloaded locally from the following address
http://www.w3school.com.cn/i/…
http://www.w3school.com.cn/i/…

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *