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=videocontrols=controls> <source src=video/video_test.mp4> </video> <div id=container></div> <script type=text/javascript> (function() { var ビデオ, コンテナ; var スケール = 0.8; var 初期化 = function( ) { コンテナ = document.getElementById(container); video = document.getElementById(video); video.addEventListener('loadeddata', CaptureImage); }; var CaptureImage = function() { var Canvas = document.createElement(canvas); Canvas.height = video.videoHeight *scale;ビデオ、0、0、キャンバス.幅、キャンバス.高さ); var img = document.createElement(img); Canvas.toDataURL(image/png);//base64 イメージに変換し、アドレスを取り出して直接使用しますcontainer.appendChild() })(); < /html>以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。