Очистка видео HTML5

Question

Я искал решение, где я мог бы "чистить" видео HTML5. Я еще не нашел и собирался начать писать свой собственный. Но перед тем, как я это сделаю, я подумал, что было бы целесообразно сначала пройти мимо SO.

Прежде чем мы перейдем к моему подходу, посмотрите это:

http://www.kokokaka.com/demo/bluebell_ss10/site

Этот сайт, конечно, построен на Flash, но служит примером того, чего я хотел бы достичь с помощью HTML5.

Я экспериментировал с атрибутом воспроизведениеRate (-1) на теге видео без особой удачи. Я подозреваю, что это потому, что кодировка (ogg, mp4, vp8) лучше подходит для воспроизведения вперед.

с этим я вижу два возможных подхода:

1. создайте два видео, одно для воспроизведения вперед, а другое для воспроизведения назад. это, конечно, удваивает размер любого видео, что не идеально.

2. разделить видео на отдельные jpg-кадры и поменять изображения. Это означало бы, что у меня нет звука, но в моем конкретном приложении это не проблема.

Мне кажется, что второй вариант лучше всего подходит для моего конкретного приложения и допускает некоторую гибкость при воспроизведении. Что ты думаешь?

Answer 1

Создайте кучу миниатюр вашего видео любым способом.Когда у вас есть все большие пальцы из видео, вы можете использовать что-то вроде этого, которое обнаруживает движение мыши и заменяет миниатюру, основанную на движении - при наведении курсора.

Пример 1: http://codepen.io/simsketch/pen/gwJBRg

Пример 2: http://jsfiddle.net/simsketch/x4ko1x1w/

или для чего-то менее многословного: если вы хотите объединить все миниатюрные изображения по горизонтали в спрайт, вы можете использовать это, еще один прекрасный пример палитры при наведении.

http://jsfiddle.net/simsketch/r6wz0nz6/152/

, но вам нужно привязать событие к mousedown вместо mousemove

, это на самом деле не даст вам желаемого эффекта, поэтому вам потребуетсяобъединить mousedown и mousemove, как предлагается здесь: https://stackoverflow.com/a/1572688/1579789

, это в некоторой степени даст вам нужный эффект, но без использования видео HTML5 и без звука.

однако, вы также можете добавить звук, если привязываете движение мыши к временному коду в звуковой дорожке, я полагаю.в этот момент вы, вероятно, могли бы так же легко манипулировать видео дорожкой.

Answer 2

я думаю, что вы можете сделать с помощью popcornjs, доступной по адресу popcornjs.org

Answer 3

Мне удалось найти этот вопрос сегодня после того, как на главной странице Google появилась статья , в которой был с видео-скруббером.

Я никогда раньше не видел видео скруббер и был просто взорван!

Затем я нашел https://www.emergeinteractive.com/demos/javascript-video-scrubber/,, который описывает, как этого достичь.

Эти люди, возможно, изобрели эту концепцию для Nike несколько лет назад.

Они предлагают фрагмент кода и ссылку на Github :

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame    || 
    window.oRequestAnimationFrame      ||  
    window.msRequestAnimationFrame     || 
    function( callback ){
        window.setTimeout(callback, 1000 / 60);
    };
})();

(function animloop(){
    requestAnimFrame(animloop);
    targetStep = Math.max( Math.round( getYOffset() / 30 ) , 1 ); // what frame to animate to
    if(targetStep != step ) { step += (targetStep - step) / 5; } // increment the step until we arrive at the target step
    changeFrame();
})();

function changeFrame() {
    var thisStep = Math.round(step); // calculate the frame number
    if(images.length > 0 && images[thisStep]) { // if the image exists in the array
        if(images[thisStep].complete) { // if the image is downloaded and ready
            $('#video').attr('src',images[thisStep].src); // change the source of our placeholder image
        }
    }
}