Как мне получить прозрачность видео для веба? - PullRequest
Новая
       43

Как мне получить прозрачность видео для веба?

0 голосов
/ 27 июня 2018

Я хочу создать видео с прозрачностью, но я не могу сделать так, чтобы это был фильм Quicktime, поскольку он размещен в Интернете. Мне также нужно что-то совместимое с браузерами.

Я пытался создать видео с черным фоном и использовать режим наложения в CSS, чтобы выбить фон, создавая иллюзию прозрачности. Это сработало, но также повлияло на искусство в видео, которое лежало поверх черного фона. Мне нужно решение, которое будет работать для создания прозрачности (альфа) на фоне, но не влияет на остальную часть контента, например, при просмотре видео QuickTime с альфа-каналом.

enter image description here

Ответы [ 2 ]

0 голосов
/ 11 августа 2018

Вы можете использовать html5 прозрачное видео, например mp4, удвоить высоту, с канвой и альфа-каналом.

взгляните на этот код: 

        (function () {
            var outputCanvas = document.getElementById('output'),
                output = outputCanvas.getContext('2d'),
                bufferCanvas = document.getElementById('buffer'),
                buffer = bufferCanvas.getContext('2d'),
                video = document.getElementById('video'),
                width = outputCanvas.width,
                height = outputCanvas.height,
                interval;

            function processFrame() {
                buffer.drawImage(video, 0, 0);

                // this can be done without alphaData, except in Firefox which doesn't like it when image is bigger than the canvas
                var image = buffer.getImageData(0, 0, width, height),
                    imageData = image.data,
                    alphaData = buffer.getImageData(0, height, width, height).data;

                for (var i = 3, len = imageData.length; i < len; i = i + 4) {
                    imageData[i] = alphaData[i - 1];
                }

                output.putImageData(image, 0, 0, 0, 0, width, height);
            }

            video.addEventListener('play', function () {
                clearInterval(interval);
                interval = setInterval(processFrame, 40)
            }, false);

            // Firefox doesn't support looping video, so we emulate it this way
            video.addEventListener('ended', function () {
                video.play();
            }, false);


        })();

и я использовал это на веб-странице один раз: 

<div class="IntroVideo" id="canvas_output">
    <video id="video" style="display:none;" autoplay crossorigin="anonymous">
      <source src="https://jakearchibald.com/scratch/alphavid/compressed.mp4" type='video/mp4' />
     </video>
     <canvas width="920" height="1300" id="buffer" style="display: none;"></canvas>
     <canvas width="920" height="650" id="output" style="display: inline-block;"></canvas>
</div>

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

0 голосов
/ 03 июля 2018

Боюсь, это невозможно. Я также ищу, ищу и ищу ... Но, глядя на ваше изображение: вы не можете создать анимацию CSS вместо видео?

...