1. Требования: Загрузите видео и перехватите определенный кадр видео в качестве обложки видео.
2. Идея реализации: используйте функцию рисования изображения холста, чтобы нарисовать определенный кадр изображения. Здесь рисуется первый кадр, который очень просто реализовать.
3. Код:
<!DOCTYPE html><html><head> <meta charset=UTF-8> <title>захват экрана</title> <style type=text/css> video,#container{width: 300px;height: 200px;} #container>img{width: 100%;} </style></head><body> <video id=video control=controls> <source src=video/video_test.mp4> </video> <div id=container></div> <script type=text/javascript> (function() { var видео, контейнер; var масштаб = 0,8; var инициализация = функция( ) { контейнер = document.getElementById(контейнер); видео = document.getElementById(видео); video.addEventListener('loadeddata', captureImage); }; var captureImage = function() { var Canvas = document.createElement(canvas); Canvas.width = video.videoWidth * Scale; Canvas.height = video.videoHeight * Scale; Canvas.getContext('2d').drawImage( видео, 0, 0, холст.ширина, холст.высота); вар img = document.createElement(img); Canvas.toDataURL(image/png);//Преобразовать в изображение base64, извлечь адрес и использовать его напрямуюContainer.appendChild(img }); </html>Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.