1. Demand
Website front-end development process, there may be such a scene, you need to display a video picture list, click pictures, play video directly.
Realization of ideas: 1. First define video send request to obtain a list of list (multiple video video label), contain pictures url address
2. corresponding to each video, creates a picture
2. The front-end code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>capture screen</title>
</head>
<body>
<video id="video" controls="controls">
<source src="http://localhost:8888/data/1111.mp4">
</video>
<div id="output"></div>
<script type="text/javascript">
(function(){
var video, output;
output = document.getElementById("output");
var canvas = document.createElement('canvas')
var img = document.createElement("img");
video = document.getElementById('video')
video.setAttribute('crossOrigin', 'anonymous')
canvas.width = video.clientWidth
canvas.height = video.clientHeight
video.onloadeddata = (() => {
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
var dataURL = canvas.toDataURL('image/png')
img.src = dataURL;
img.width = 400;
img.height = 300;
output.appendChild(img);
})
})();
</script>
</body>
</html>
http: // localhost: 8888 / data / 1111.mp4 - the address was nginx turn a bit, increasing the cross-domain codes
If you change the local path, it reported the following error.
Here, get h5 video functions on the realization of the first frame, any questions, please add group, communicate together, or leave a comment below
如果你热衷技术，喜欢交流，欢迎加入我们！
