playerJs

Реализация видеопроигрывателя с использованием canvas.

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

Пример использования:

//html <script type="text/javascript" src="XXX/player-0.9.min.js"></script>
videoUI.startup({
    root: '../',  // Корневой каталог плагина
    url: '',  // Источник видеоданных
    volume: 50, // По умолчанию громкость звука: 0–100
    "vw": 600, // Ширина окна просмотра
    "vh": 400, // Высота окна просмотра
    "cw": 600, // Ширина нижнего слоя canvas
    "ch": 3200, // Высота нижнего слоя canvas
});

Совместимость:

• Браузеры: IE9+, Edge12+, Chrome43+, Firefox41+, Safari8+, Opera33+
• Аудио: mp3 | wav (поддержка mp3 лучше)
• IE не поддерживает формат wav, но Edge поддерживает.

Формат видеоданных:

Формат данных трассировки определяет структуру видеоданных. Первая строка содержит информацию о размере экрана и версии трассировки. Последняя строка указывает общую продолжительность видео в миллисекундах. Каждая строка трассировочных данных включает временную метку и набор параметров, таких как тип пользователя, смещение экрана, действие, цвет, координаты точки X и Y, время и давление.

Для получения более подробной информации о формате данных и использовании плагина рекомендуется обратиться к документации проекта на GitHub. { «events»: [ { «timestamp»: 5500, «data»: [ { «userType»: 1, «screenOffset»: 0, //视口移动偏移量 «action»: 5 //视口移动 } ] } ], «duration»: 6000 //视频总时间长 单位：毫秒 //Notice："timestamp" 相对视频始点的偏移时间戳，单位：毫秒 }