WXInlinePlayer
1.3.6
С появлением прямых трансляций и коротких видеороликов видео стало широко распространенным методом вывода оперативной информации/информации о продукте, поскольку оно несет в себе больший объем информации. Однако из-за интересов различных отечественных производителей браузеров они наложили множество ограничений на видеовозможности HTML5, которые не ограничиваются:
Если у вас есть конкретные вопросы, пожалуйста, обратитесь к статье «Реализация комплексной кадровой анимации для анализа видео на мобильных терминалах», написанной командой Tencent IMWeb.
Чтобы решить эти проблемы, мы внедрили WXInlinePlayer путем мягкого декодирования FLV. Используемые сторонние технологии и API платформы:
В то же время мы также написали версию FLV Demuxer для WebAssembly. Соответствующий код можно найти в lib/codec.
В тесте совместимости используются соответствующие модели, предоставленные службой BrowserStack, только для справки:
https://eroszy.github.io/WXInlinePlayer/example/index.html
Убедитесь, что вы установили package/emscripten 1.38.45/cmake и make, затем выполните следующую команду:
npm install # 初始化工程
npm update # 更新工程有关的插件。如果网络错误，改用 cnpm update
bash build.shКонечный продукт будет в папке примеров.
Пожалуйста, обрати внимание:
- Пожалуйста, создайте среду *nix. Компиляция OpenH264 под Windows не гарантируется.
- Убедитесь, что emscripten имеет версию 1.38.45, иначе возникнут ошибки wasm32.
- версия cmake должна быть 3.16+
<!DOCTYPE html >
< html >
< head >
< meta charset =" UTF-8 " />
< title > WXInlinePlayer </ title >
< style >
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
</ style >
</ head >
< body >
< canvas id =" container " width =" 800 " height =" 450 " > </ canvas >
< script src =" ./index.js " > </ script >
< script >
if ( WXInlinePlayer . isSupport ( ) ) {
WXInlinePlayer . init ( {
asmUrl : './prod.baseline.asm.combine.js' ,
wasmUrl : './prod.baseline.wasm.combine.js'
} ) ;
WXInlinePlayer . ready ( ) . then ( ( ) => {
const player = new WXInlinePlayer ( {
url : 'https://static.petera.cn/mm.flv' ,
$container : document . getElementById ( 'container' ) ,
hasVideo : true ,
hasAudio : true ,
volume : 1.0 ,
muted : false ,
autoplay : true ,
loop : true ,
isLive : false ,
chunkSize : 128 * 1024 ,
preloadTime : 5e2 ,
bufferingTime : 1e3 ,
cacheSegmentCount : 64 ,
customLoader : null
} ) ;
const { userAgent } = navigator ;
const isWeChat = / MicroMessenger / i . test ( userAgent ) ;
if ( ! isWeChat ) {
alert ( 'click to play!' ) ;
document . body . addEventListener ( 'click' , ( ) => {
player . play ( ) ;
} ) ;
}
} ) ;
}
</ script >
</ body >
</ html >В корневом каталоге проекта введите команду для запуска сервера:
npm run serveЗатем введите URL-адрес для доступа к демо-версии:
http://localhost:8888/example/index.html
Поддерживает ли текущая среда выполнения WXInlinePlayer.
if ( WXInlinePlayer . isSupport ( ) ) {
console . log ( 'WXInlinePlayer support' ) ;
}Чтобы инициализировать WXInlinePlayer, вам необходимо передать конкретный адрес загруженной библиотеки декодирования H264. Для выбора библиотеки декодирования см.: Как выбрать зависимости декодирования.
if ( WXInlinePlayer . isSupport ( ) ) {
WXInlinePlayer . init ( {
asmUrl : './prod.baseline.asm.combine.js' ,
wasmUrl : './prod.baseline.wasm.combine.js'
} ) . catch ( e => {
console . log ( `WXInlinePlayer init error: ${ e } ` ) ;
} ) ;
}WXInlinePlayer готов и может быть безопасно инициализирован.
if ( WXInlinePlayer . isSupport ( ) ) {
WXInlinePlayer . init ( { /*.....*/ } ) ;
WXInlinePlayer . ready ( ) . then ( ( ) => {
console . log ( 'WXInlinePlayer ready' ) ;
} ) ;
}Конструктор WXInlinePlayer, соответствующие параметры инициализации см. в разделе Параметры инициализации.
WXInlinePlayer . ready ( ) . then ( ( ) => {
const player = new WXInlinePlayer ( { /*...*/ } ) ;
} ) ;для воспроизведения видео. Следует отметить, что из-за ограничений браузера (за исключением версий WeChat и Chrome ниже 66) более поздние версии отключили автоматическое воспроизведение звука, поэтому прямой вызов этого метода может быть неэффективным. Нажмите/touchstart/touchend/touchmove и т. д. Разрешите пользователям. активно запускать события.
document . body . addEventListener ( 'click' , ( ) => {
player . play ( ) ;
} ) ;Останавливает весь проигрыватель и не может быть возобновлен.
player . stop ( ) ;Пауза текущего воспроизведения.
player . pause ( ) ;Возобновляет приостановленную операцию, вызванную паузой.
player . resume ( ) ;Получить/установить текущую громкость.
const volume = player . volume ( ) ; // get volume
player . volume ( volume ) ; // set volumeПолучить/установить статус отключения звука.
const muted = player . mute ( ) ; // get mute
player . mute ( muted ) ; // set muteУничтожьте плеер и освободите всю память для переработки.
player . destroy ( ) ;Получите текущее время воспроизведения. Обратите внимание, что могут быть отрицательные значения, поэтому обращайтесь с ними осторожно.
player . on ( 'timeUpdate' , ( ) => {
let currentTime = player . getCurrentTime ( ) ;
currentTime = currentTime <= 0 ? 0 : currentTime ;
} ) ;Продолжительность воспроизведения можно понимать как продолжительность буферизации.
player . on ( 'timeUpdate' , ( ) => {
const duration = player . getAvaiableDuration ( ) ;
} ) ; На данный момент существует 3 набора библиотек декодирования, а именно:
Разница в следующем:
Мы рекомендуем использовать baseline.asm/baseline.wasm при воспроизведении рекламных/маркетинговых видеороликов/небольших анимационных видеороликов, чувствительных к размеру зависимой библиотеки, и использовать его при воспроизведении видео по запросу/живых видео, которые не чувствительны к размеру зависимой библиотеки. размер зависимой библиотеки all.asm/all.wasm.
На машине разработки для одного и того же видео реализации WXInlinePlayer и FFMpeg, такие как Taobao и Huajiao, имеют одинаковое использование памяти и ЦП. Общая производительность WXInlinePlayer примерно на 5–10 % выше, чем у решения FFMpeg, а в H265 уменьшено разблокирование. Его производительность примерно на 30 % выше, чем у решения FFMpeg. Ниже приводится сравнение производительности воспроизведения H265:
Лаги и задержки WXInlinePlayer в основном возникают по трем причинам:
Вообще говоря, если сетевое окружение пользователя хорошее, трудно создать узкое место из-за использования WebGL при рендеринге (операция очень проста), что обычно вызывает постоянные лаги и задержки из-за недостаточной производительности мягкого декодирования.
Чтобы оптимизировать задержку, вызванную недостаточной производительностью мягкого декодирования, мы обычно начинаем с нескольких мест:
В настоящее время WXInlinePlayer может относительно плавно декодировать видео с разрешением 1280x720, кодовой частотой 1024 и частотой кадров 24 кадра в секунду на машинах среднего и высокого класса.
Что касается упомянутых выше параметров видео, вы можете просмотреть их через FFmpeg:
ffmpeg -i " your.flv "Здесь мы приводим для справки профиль/частоту кадров/частоту кода/разрешение основных платформ:
| платформа | тип | ясность | профиль | Частота кадров | Скорость кода | разрешение |
|---|---|---|---|---|---|---|
| Зубы тигра | Горизонтальный экран | СД | Высокий | двадцать четыре | 500 тыс. | 800x450 |
| Зубы тигра | Горизонтальный экран | HD | Высокий | двадцать четыре | 1200 тыс. | 1280x720 |
| Зубы тигра | Вертикальный экран | HD | Основной | 16 | 1280 тыс. | 540x960 |
| Цисю | Вертикальный экран | СД | Высокий | 15 | 307 тыс. | 204x360 |
| Цисю | Вертикальный экран | HD | Высокий | 15 | 512 тыс. | 304x540 |
| Цисю | Вертикальный экран | ультра прозрачный | Базовый уровень | 15 | 1440 тыс. | 720x1280 |
| Тик Ток | Вертикальный экран | по умолчанию | Высокий | 30 | 1600 тыс. (больше изменений, только для справки) | 720x1280 |
| быстрый работник | Вертикальный экран | по умолчанию | Высокий | 25 | 2880k (больше изменений, только для справки) | 720x1280 |
Мы рекомендуем вам:
Ниже приведены наиболее часто используемые параметры конфигурации WXInlinePlayer с низкой задержкой. Настройте их в соответствии с конфигурацией вашего прямого потока/файла по требованию:
{
chunkSize : 128 * 1024 ,
preloadTime : 5e2 ,
bufferingTime : 1e3 ,
cacheSegmentCount : 64 ,
}В то же время вы можете использовать событие производительности , чтобы определить текущую производительность декодирования, а затем запросить у пользователя и перейти на решение для резервного копирования (например, прямое воспроизведение видео/статические изображения/кадры последовательности и т. д.):
player . on ( 'performance' , ( { averageDecodeCost , averageUnitDuration } ) => {
const prop = averageUnitDuration / averageDecodeCost ;
if ( prop >= 2.0 ) {
console . log ( 'good performance' ) ;
} else if ( prop < 2.0 && prop >= 1.0 ) {
console . log ( 'ok, thats fine' ) ;
} else {
console . log ( 'bad performance' ) ;
}
} ) ; Решение FFmpeg на данный момент имеет несколько серьезных проблем. Первая — размер библиотеки декодирования после сокращения составляет около 2М, а gzip — около 600К. Это неприемлемо для продуктов, которым важен размер зависимой библиотеки. Во-вторых, решение FFmpeg сложно оптимизировать самостоятельно. Например, WXInlinePlayer будет выполнять декодирование нескольких рабочих процессов в версии 2.0, поэтому модификация такого решения обходится очень дорого.
Причины лагов и задержек сложны. Для WXInlinePlayer скорость декодирования обычно не соответствует скорости воспроизведения. Для оптимизации обратитесь к разделу «Как уменьшить лаги и задержки».
И iOS, и Android UC кастрировали WebAssembly/ASM.js, поэтому они его просто не поддерживают.
Используйте FFmpeg или другие подобные инструменты. Вот простой пример команды:
ffmpeg -i " your.mp4 " -vcodec libx264 -acodec aac out.flvСпецификация FLV WXInlinePlayer соответствует спецификации расширения FLV Kingsoft. Если вам нужно выполнить соответствующее кодирование, вы можете обратиться к соответствующему патчу FFmpeg или кодировщику, написанному Kingsoft.
