<script src="jquery.js"></script> <video id="video" controls preload="none" width="640" poster="http://img.ruphp.com/javascript/poster.png" onloadedmetadata="$(this).trigger('video_really_ready')"> <source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4' /> <source id='webm' src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm'/> <source id='ogv' src="http://media.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg' /> </video> <br /> <input type="button" id="capture" value="Capture" /> Press play, and then start capturing <div id="screen"></div> <script> var VideoSnapper = { /** * Capture screen as canvas * @param {HTMLElement} video element * @param {Object} options = width of screen, height of screen, time to seek * @param {Function} handle function with canvas element in param */ captureAsCanvas: function(video, options, handle) { // Create canvas and call handle function var callback = function() { // Create canvas var canvas = $('<canvas />').attr({ width: options.width, height: options.height })[0]; // Get context and draw screen on it canvas.getContext('2d').drawImage(video, 0, 0, options.width, options.height); // Seek video back if we have previous position if (prevPos) { // Unbind seeked event - against loop $(video).unbind('seeked'); // Seek video to previous position video.currentTime = prevPos; } // Call handle function (because of event) handle.call(this, canvas); } // If we have time in options if (options.time && !isNaN(parseInt(options.time))) { // Save previous (current) video position var prevPos = video.currentTime; // Seek to any other time video.currentTime = options.time; // Wait for seeked event $(video).bind('seeked', callback); return; } // Otherwise callback with video context - just for compatibility with calling in the seeked event return callback.apply(video); } }; $(function() { $('video').bind('video_really_ready', function() { var video = this; $('input').click(function() { var canvases = $('canvas'); VideoSnapper.captureAsCanvas(video, { width: 160, height: 68, time: 40 }, function(canvas) { $('#screen').append(canvas); if (canvases.length == 4) canvases.eq(0).remove(); }) }); }); }); </script> Как я могу добавить видео на YouTube. Невозможно воспроизвести видео с YouTube в теге видео. Встроенный тег работает для воспроизведения видео на YouTube. Как сделать снимок экрана, разместив видеоролик youtube внутри тега embed. пожалуйста, помогите мне
Я мог бы решить это с помощью ffmpeg .
Просто беги
ffmpeg -i inputfile.avi -r 1 -t 1 -ss 00:00:03 image-%d.jpeg
где
-i inputfile.avi – входной файл -r 1 – один кадр в секунду -t 1 – сколько секунд должно быть преобразовано в изображения -ss 00:00:03 – с какой секунды до начала image-%d.jpeg – итоговый шаблон имени файла Найдено здесь http://linuxers.org/tutorial/how-extract-images-video-using-ffmpeg
Если вручную настроить изображение, это может вам помочь.
Попробуйте добавить poster="placeholder.png" //photo you want в теге видео.
пример
<video width="470" height="255" poster="placeholder.png" controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> <source src="video.webm" type="video/webm"> <object data="video.mp4" width="470" height="255"> <embed src="video.swf" width="470" height="255"> </object> </video>