Я большой поклонник fabric.js, я считаю его самым мощным JS, доступным для работы с холстом HTML5.

Мне было трудно рендерить видео на холст, затем сохранить его как объект JSON и снова отобразить на холсте с помощью loadFromJson.

Поскольку не существует официального способа сериализации и десериализации элемента видео проблема № 3697

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

Вот как я это сделал

#шаг 1

Визуализируйте видеоэлемент на холст, ниже фрагмент кода отобразит видеоэлемент на холст.

function getVideoElement(url) {
    var videoE = document.createElement('video');
    videoE.width = 530;
    videoE.height = 298;
    videoE.muted = true;
    videoE.crossOrigin = "anonymous";
    var source = document.createElement('source');
    source.src = url;
    source.type = 'video/mp4';
    videoE.appendChild(source);
    return videoE;
}
var canvas = new fabric.Canvas('c');
var url_mp4 = 'http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4';

var videoE = getVideoElement(url_mp4);
var fab_video = new fabric.Image(videoE, {left: 0,   top: 0});
canvas.add(fab_video);
fab_video.getElement().play();
fabric.util.requestAnimFrame(function render() {
   canvas.renderAll();
   fabric.util.requestAnimFrame(render);
});

Теперь, если вы экспортируете холст как JSON

canvas.toJSON();

Вы увидите объект JSON с множеством атрибутов в объекте, но основные атрибуты, на которых нужно сосредоточиться, - это src и type

{«objects»: [{«src»: «», «top»: 0, «left»: 0, «type»: «image»,…}, {}], «version»: «2.0 .0-rc.4 ”}

Примечание. src - пусто, type - изображение, означает, что ткань сохраняет видео как объект изображения, но не может назначить источник видео.

#шаг 2

Чтобы сохранить src видеоэлементов, вам необходимо добавить настраиваемый атрибут к объекту ткани, для этого вам необходимо переопределить объект ткани .

fabric.Object.prototype.toObject = (function (toObject) {
    return function (propertiesToInclude) {
        propertiesToInclude = (propertiesToInclude || []).concat(
            ['video_src']
        );
        return toObject.apply(this, [propertiesToInclude]);
    };
})(fabric.Object.prototype.toObject);

Приведенный выше код добавит настраиваемый атрибут video_src к объекту JSON при экспорте, вы можете инициализировать его глобально.

Примечание. Установите атрибут video_src перед добавлением элемента видео на холст.

var fab_video = new fabric.Image(videoE, {left: 0,   top: 0});
fab_video.set('video_src', url_mp4);
canvas.add(fab_video);

Вы увидите экспортированный объект как:

{«объекты»: [{«src»: «», «video_src»: « http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4 », «вверх »: 0,« left »: 0,« type »:« image »,…}, {}],« version »:« 2.0.0-rc.4 »}

# step3

Вы успешно сохранили источник видео в объекте JSON. Теперь нам нужно снова отрендерить его, используя loadFromJSON.

Метод loadFromJSON, используемый для преобразования объекта JSON в фактический объект ткани и загрузки их на холст.

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

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

var data = {“objects”: [{“src”: “”, “video_src”: “http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4”, “top”: 0, “left”: 0, “type”: “image”, …}, {}], “version”: “2.0.0-rc.4” }
var canvas = canvas.loadFromJSON(JSON.stringify(data), canvasLoaded , function(o, object) {
    fabric.log(o, object);
});
function canvasLoaded(){      
   canvas.renderAll.bind(canvas);
   var objs = data['objects'];      
   for(var i=0; i< objs.length; i++){
      if(objs[i].hasOwnProperty('video_src')){
         var videoE = getVideoElement(objs[i]['video_src']); 
         var fab_video = new fabric.Image(videoE, {left: objs[i]['left'], top: objs[i]['top']} );                   
         canvas.add(fab_video);
         fab_video.getElement().play();                 
         fabric.util.requestAnimFrame(function render() {                      
            canvas.renderAll();                     
            fabric.util.requestAnimFrame(render);                
         });
      }
   }
}

Это обходной путь для сериализации и десериализации видеоэлементов с использованием фабрики.

(Помогите другим найти мою статью на Medium, предоставив ее 👏🏽 ниже.)